View on github
Get Code
Making a Grid

About GrapheneDataGrid:

GrapheneDataGrid provides a full tabular interface for managing, manipulating, and displaying data. The DataGrid offers:

  • Sorting,
  • Searching,
  • Paginating,
  • Editing,
  • Updating,
  • Adding,
  • and Deletion of Data

Here's a Basic Example of a Grid

Result:

Code:

<script>			
	gdg = new GrapheneDataGrid({el:'#myGrapheneDataGrid',
	search: false,columns: false,upload:false,download:false,title:'Demo Content',
	entries:[],
	count:4,
	schema:[
		{type:"text", name:"name", label:"Name", required:true},
		{type:"text", name:"number",label:"Age"}
	], data: [
		{name:'Bob'},
		{name:'Adam', number: 30},
		{name:'Tim', number: 30.5},
		{name:'Lauri', number: 21},
		{name:'Scott'},
	]
	})
</script>

Getting Started


Dependencies - jQuery, Bootstrap 3.4.1 (Both JS and CSS), Lodash, GrapheneForms (BootStrap)

  • The first two dependencies we incorporate are jQuery and Bootstrap 3.4.1 for the purpose of styling and functionality.
    For Bootstrap make sure to include both:

    • Bootstrap Css 3.4.1
      • and
    • Bootstrap JS 3.4.1 * ***
    • You can either use the provided CDN's below or find out how to setup Bootstrap at: (Getting Started with Bootstrap)

    - Bootstrap's get started page helps you setup jquery -

    
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>

<style src='//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'></style>

  • GrapheneDataGrid is built on top of gform.js, otherwise known as GrapheneForms. You will need to include one dependency for GrapheneForms called Lodash (lodash.js) before the include of GrapheneForms **.
    - You can click the above links to see the documentation for GrapheneForms or Lodash -

    --To Set Up GrapheneForms, navigate to Graphene Forms, go to the top of the page and select "Get Code". Include the downloaded code in your project--

NOTES: * jQuery is a dependency of Bootstrap, so make sure jquery is the first script included on your page
** Note the include for GrapheneForms will appear as 'gform_bootstrap.js' or 'gform_bootstrap.min.js'
*** We do not require the optional Bootstrap dependency of popper.js ***

A minimum setup might look something like this:

<!DOCTYPE html>
<html>
<head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<style src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'></style>
<style src='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'></style>

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js'></script>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
<script type='text/javascript' src='gform.bootstrap.min.js'></script>
<script type='text/javascript' src='GrapheneDataGrid.min.js'></script>

//CSS Includes

</head>
<body>
	<div class="myTable">
	//Other HTML
</div>
<script>
	//Make DataGrids Here
</script>
</body>
</html>

© Escher Labs 2019