• Simple data grid
  • Features
    • Requirements
    • Downloads
  • Demo
• Tutorial
  • Example 1: a very simple data grid
    • Step 1: define a table
    • Step 2: add columns
    • Step 3: include javascript and css
    • Step 4: some javascript
  • Example 1a: get the data from the server
• Api
  • Defining columns
    • Define columns in html
    • Define columns in javascript
  • Defining the data
    • Syntax of the data
    • Define the data using ajax
    • Define the data as an array
  • Functions
    • reload

Simple data grid

Simple-data-grid is a datagrid widget.

The project is hosted on github and has unit tests.

Features

• Works on Internet Explorer 7+, Firefox 3.6+, Chrome and Safari
• Written in Coffeescript

Requirements

• jQuery 1.5+

Downloads

simple-data-grid.tar.gz

Demo

<table id="demo-table" data-url="/fruits.json">
  <thead>
    <tr>
      <th>Name</th>
      <th>Latin name</th>
    </tr>
  </thead>
</table>

$(function() {
  $('#demo-table').simple_datagrid();
});

Tutorial

Example 1: a very simple data grid

The result is in example1.html.

Step 1: define a table

First, we need an html table.

<table id="example1">
</table>

Step 2: add columns

Lets's add some columns. We can define them in <th> elements.

<table id="example1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Latin name</th>
    </tr>
  </thead>
</table>

Step 3: include javascript and css

We need to include some javascript and css.

<link rel="stylesheet" href="simple.datagrid.css">
<script src="extra/jquery-1.8.2.min.js"></script>
<script src="simple.datagrid.js"></script>

Step 4: some javascript

Fill the grid with some data:

<script>
  $(function() {
    $('#example1').simple_datagrid({
      data: [
        ["Avocado", "Persea americana"],
        ["Bell pepper", "Capsicum annuum"],
        ["Bitter melon", "Momordica charantia"]
      ]
    });
  });
</script>

The result looks like this:

Example 1a: get the data from the server

In example 1 the data is defined in a javascript array. We can also get the data from the server via ajax.
The result is in example1a.html.

Define a table with a data-url property:

<table id="example1a" data-url="extra/fruits.json">
  <thead>
    <tr>
      <th>Name</th>
      <th>Latin name</th>
    </tr>
  </thead>
</table>

Initialize the grid:

<script>
  $(function() {
    $('#example1a').simple_datagrid();
  });
</script>

Api

Defining columns

A column has the following properties:

• Title: the title is displayed in the grid header
• Key: you use a key to refer to a column, for example in the data.<
  If you do not define the key for a column, then it's defined as the slugified title.
  E.g. the title Latin name is slugified to latin_name.

Define columns in html

You can define columns in the <th> elements of a table. The elements must be in the <thead>.

<table>
  <thead>
    <th>Name</th>
    <th>Latin name</th>
  </thead>
</table>

You can also set the key of a column in the data-key property.

For example, to set the key for the Latin name column to latin:

<table>
  <thead>
    <th>Name</th>
    <th data-key="latin">Latin name</th>
  </thead>
</table>

Define columns in javascript

You can define the columns in the columns property of the javascript options.

$('#table1').simple_datagrid({
  columns: ['Name', 'Latin name']
});

You can also define columns as an object:

$('#table1').simple_datagrid({
  columns: [
    {
      title: 'Name'
    },
    {
      title: 'Latin name',
      key: 'latin'
    }
  ]
});

Defining the data

Syntax of the data

The data is an array of rows. You can define a row as an array or as an object.

• array: an array of strings, for all the columns in the grid:
  

  var data = [
    ['Avocado', 'Persea americana'],
    ['Bell pepper', 'Capsicum annuum']
  ];
  

• object: an object with the column keys:
  

  var data = [
    {
      name: 'Avocado',
      'latin_name': 'Persea americana'
    },
    {
      name: 'Bell pepper',
      'latin_name': 'Capsicum annuum'
    }
  ];
  

Define the data using ajax

You can set an url in the data-url property of the table.

<table data-url="/fruits.json">
</table>

You can also set the url in javascript.

$('#table1').simple_datagrid({
  url: '/fruits.json'
});

Define the data as an array

You can define the data in a javascript array:

$('#table1').simple_datagrid({
  data: [
    ["Avocado", "Persea americana"],
    ["Bell pepper", "Capsicum annuum"],
    ["Bitter melon", "Momordica charantia"]
  ]
});

You can also define the data as an array of objects:

$('#table1').simple_datagrid({
  data: [
    {
      name: 'Avocado',
      'latin_name': 'Persea americana'
    },
    {
      name: 'Bell pepper',
      'latin_name': 'Capsicum annuum'
    }
  ]
});

Functions

reload

Reload the data.

$('#tree1').simple_datagrid('reload');