Make Dynamic Tables in Seconds from Any JSON Data

Standard HTML tables can be great if you are just trying to layout some basic data, but what if you are looking for more from your tables? If you need to fetch your data from an external API, make your table sortable or editable, then you are going to need something that packs a bit more of a punch.

If this sounds familiar, then Tabulator is the library for you. Tabulator is a lightweight jQuery UI plugin designed to make building complex interactive tables a doddle, using only a few lines of JavaScript you can turn almost any data source into a beautifully formatted interactive table.

In this tutorial I will take you through the basics of creating your first Tabulator, then expand on some of the options available to add extra features to your tables.

Building Your First Tabulator

Let's start off by creating a very simple table.

As Tabulator is a jQuery widget you need to include the jQuery and jQuery UI libraries, either from a local source or a CDN of your choice.

You will need to get yourself a copy of the Tabulator library, which can be cloned from the GitHub repo at http://ift.tt/1HZ78R9, and include the tabulator.css and tabulator.js files in your project.

<link rel="stylesheet" href="tabulator.css">
<script type="text/javascript" src="tabulator.js"></script>

Create a <div> element to hold the table:

<div id="example-table"></div>

Let's turn that element into a Tabulator with some JavaScript:

$("#example-table").tabulator();

And there you have it, a functioning table!

OK, so we aren't quite there yet. To finish our table we need to define the columns and load some data.

Defining the Columns

To define the layout of the table, we need to provide some information about each of its columns.

We do this by passing a column definition array to the Tabulator constructor. Each object in the array represents a column of the table, and contains its setup parameters:

$("#example-table").tabulator({
  columns:[
    {title:"Name", field:"name", sortable:true, width:200},
    {title:"Progress", field:"progress", sortable:true, sorter:"number"},
    {title:"Gender", field:"gender", sortable:true},
    {title:"Favourite Color", field:"col", sortable:false},
    {title:"Date Of Birth", field:"dob"},
    {title:"Cheese Preference", field:"cheese"},
  ],
});

There are a large number of column parameters available, in this demo we will cover a few of these:

• title - Required - The title that will be displayed in the header for the column
• field - Required - The key for the column in the data array
• align - Text alignment for the column (left|center|right)
• width - Column width (if not set the system will determine the best fit)
• sortable - Toggles whether the user can sort data by the column
• sorter - How to sort data in the column (defaults to string)
• formatter - How to format data in the column (defaults to string)
• onClick - Callback for when user clicks on a cell in the column
• editable - Determines if this data is editable by the user
• editor - Editor to be used when cell in the column is editable
• visible - Show or hide the column

Loading Data into Your Table

The final stage of building your new Tabulator is to load in some data. There are several options for this, and we will touch briefly on each one here.

JavaScript array

You can pass in an array of data using the setData method. This takes an array, with each row of the table being defined by an object.

Lets create some sample data:

var sampleData = [
  {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"},
  {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, cheese:"Gouda"},
  {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, cheese:"Manchego"},
  {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980", lucky_no:18, cheese:"Brie"},
  {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999", lucky_no:33, cheese:"Cheader"},
];

Then assign it to our table:

$("#example-table").tabulator("setData", sampleData);

Ajax request

To retrieve JSON formatted data from a remote source, you can pass a URL to the setData method and it will perform the Ajax request for you.

$("#example-table").tabulator("setData", "http://ift.tt/2fab7DE");

Additional request parameters can be passed in an object with the URL.

$("#example-table").tabulator("setData", "http://ift.tt/2fab7DE", {key1:"value1", key2:"value2"});

HTML table

You can also convert an existing HTML table into a Tabulator.

Create your HTML table:

<table id="example-table">
  <thead>
    <tr>
      <th width="200">Name</th>
      <th>Progress</th>
      <th>Gender</th>
      <th>Height</th>
      <th>Favourite Color</th>
      <th>Date of Birth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Billy Bob</td>
      <td>12</td>
      <td>male</td>
      <td>1</td>
      <td>red</td>
      <td></td>
    </tr>
    <tr>
      <td>Mary May</td>
      <td>1</td>
      <td>female</td>
      <td>2</td>
      <td>blue</td>
      <td>14/05/1982</td>
    </tr>
  </tbody>
</table>

Then call the Tabulator constructor on the table element to extract the headers and data automatically:

Continue reading %Make Dynamic Tables in Seconds from Any JSON Data%

by Oli Folkerd via SitePoint