Tabulator is a free and Open Source JQuery library that helps in creating interactive tables quickly and with ease. It creates Tables from HTML, JavaScript or PHP Array of data, AJAX data source or data formatted in JSON. Tabulator has styles formats or themes to use for the tables created. Tabulator dependencies are JQuery and JQuery UI.
Some of the basic and advanced features of Tabulator includes Data Filtering, Sorting, Formatting, Grouping, Input Validation, Editing, Callbacks, Pagination and direct Data Download.
For this tutorials, we are going to setup a web page using bootstrap and then a table using the Tabulator JQuery library. We are going to make use of HTML5, CSS3 and JQuery scripts. The basic and most important features we are going to cover include sorting, formatting, pagination, columns management and direct download of data into 'CSV' or 'JSON' format.
To setup our web page we need to follow the following steps;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Utopian-io – Interactive table with Tabulator JQuery Library</title>
</head>
<body>
</body>
</html>
The page is setup correctly but it would not render anything in the browser for now because the body is empty.
We are going to setup Tabulator JQuery library in our web page using the provided CDN links but you can choose to download tabulator from their official website and work offline if you want. For this purpose of this tutorial we are using CDN links but it’s recommended to download and load locally for production purpose.
We need JQuery, JQuery UI (both CSS and JS) and Tabulator CSS and JS file for the library to work. I used bootstrap for the web page setup. You can get it here.
JQuery
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.4.2/css/tabulator.min.css" rel="stylesheet">
JS
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.4.2/js/tabulator.min.js"></script>
Note: JQuery, JQuery UI must be loaded first before Tabulator JS
All the necessary files we need to setup Tabulator are in place. Now let’s begin;
<body> section in “tabulator.html” file and create a div with an id of “utopian-table” and a button to download table data.<div id="utopian-table"></div>
<div class="text-center mt-3">
<button class="button btn-lg btn-primary" type="type" name="download" id="download-button">Download Data</button>
</div>
$("#utopian-table").tabulator({
layout:"fitColumns", //fit columns to width of table (optional)
tooltips:true, // set tooltips to true or false
pagination:"local", //'local' or 'remote'. local loads all the data and then paginate while remote loads upon ajax call
paginationSize:7, // number of rows before applying pagination
movableColumns:true, // allows columns to be moved around
resizableRows:true, // allows rows to be resize'
initialSort:[
{column:"Username", dir:"asc"},
],
columns:[ //Define Table Columns
{title:"Username", field:"name", width:150},
{title:"Contribution", field:"np"},
{title:"Approval Rate", field:"apr", align:"left", formatter:"progress"},
{title:"Total Reward ($)", field:"col"},
{title:"Last Contribution", field:"lc", sorter:"date"},
],
});
The scripts above initiates tabulator JQuery library and constructs the table with options. All the options used are describing beside with a comment. Next is to define the columns of the table we want to populate. We can use either JQuery or JSON format. The ‘title’ is the title of the table, ‘field’ serve as a name of the column.
Define Data
Next, we are going to define the data to be populated in the table. I used JQuery but you’re free to use other formats as I stated earlier in the beginning of the tutorial.
//defined sample data
var tabledata = [
{id:1, name:"Aliyu-s", np:"23", apr:"40", col:"123", lc:"20/02/2018"},
{id:2, name:"Elear", np:"3", apr:"3", col:"67", lc:"14/05/2017"},
{id:3, name:"Dante31", np:"5", apr:"42", col:"47", lc:"22/05/2017"},
{id:4, name:"Bright123", np:"7", apr:"125", col:"372.12", lc:"01/08/2017"},
{id:5, name:"Marmajuke", np:"9", apr:"12", col:"124.34", lc:"31/01/2018"},
{id:8, name:"OliBoy", apr:"12", np:"14", col:"87.3", lc:"12/01/2018"},
{id:9, name:"Maryie", apr:"2", np:"19", col:"36.12", lc:"14/05/2017"},
{id:10, name:"Christy", np:"6", apr:"42", col:"26.2", lc:"22/10/2017"},
{id:11, name:"Philips", np:"12", apr:"125", col:"12.9", lc:"01/08/2017"},
{id:12, name:"Margret", np:"3", apr:"16", col:"19.6", lc:"31/01/2018"},
];
*NB:* “id” is not a column. It’s a row unique identifier.
Initialize
Now, we are going to populate the sample data into the table setup above and then also setup the button download the data into a ‘CSV’.
//load sample data into the table
$("#utopian-table").tabulator("setData", tabledata);
// downloads data when button is clicked. The format can be ‘csv’ or ‘json’ and the title should end with the format used just in case
$("#download-button").on("click", function(){
$("#utopian-table").tabulator("download", "csv", "Tabulator Sample Download.csv");
});
The work is complete. The scripts loads data into a table with features including sorting, column management, pagination and direct data download etc. You can watch the demo of the final result in the gif below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Utopian-io | Interactive table with Tabulator JQuery Library</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.4.2/css/tabulator.min.css" rel="stylesheet">
</head>
<body style="padding-top: 5rem;">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Utopian-io</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<main role="main" class="container">
<h1>Utopian-io Contributions</h1>
<div class="container welcome-div">
<div id="utopian-table"></div>
<div class="text-center mt-3">
<button class="button btn-lg btn-primary" type="type" name="download" id="download-button">Download Data</button>
</div>
</div>
</main>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.4.2/js/tabulator.min.js"></script>
<script type="text/javascript">
$("#utopian-table").tabulator({
layout:"fitColumns", //fit columns to width of table (optional)
tooltips:true, // set tooltips to true or false
pagination:"local", //'local' or 'remote'. local loads all the data and then paginate while remote loads upon ajax call
paginationSize:7, // number of rows before applying pagination
movableColumns:true, // allows columns to be moved around
resizableRows:true, // allows rows to be resize'
initialSort:[
{column:"Username", dir:"asc"},
],
columns:[ //Define Table Columns
{title:"Username", field:"name", width:150},
{title:"Contribution", field:"np"},
{title:"Approval Rate", field:"apr", align:"left", formatter:"progress"},
{title:"Total Reward ($)", field:"col"},
{title:"Last Contribution", field:"lc", sorter:"date"},
],
});
//define sample data
var tabledata = [
{id:1, name:"Aliyu-s", np:"23", apr:"40", col:"123", lc:"20/02/2018"},
{id:2, name:"Crypto", np:"3", apr:"3", col:"67", lc:"14/05/2017"},
{id:3, name:"Habbuyi", np:"5", apr:"42", col:"47", lc:"22/05/2017"},
{id:4, name:"Bright123", np:"7", apr:"125", col:"372.12", lc:"01/08/2017"},
{id:5, name:"Marmajuke", np:"9", apr:"12", col:"124.34", lc:"31/01/2018"},
{id:8, name:"OliBoy", apr:"12", np:"14", col:"87.3", lc:"12/01/2018"},
{id:9, name:"Maryie", apr:"2", np:"19", col:"36.12", lc:"14/05/2017"},
{id:10, name:"Christy", np:"6", apr:"42", col:"26.2", lc:"22/10/2017"},
{id:11, name:"Philips", np:"12", apr:"125", col:"12.9", lc:"01/08/2017"},
{id:12, name:"Margret", np:"3", apr:"16", col:"19.6", lc:"31/01/2018"},
];
//load sample data into the table
$("#utopian-table").tabulator("setData", tabledata);
$("#download-button").on("click", function(){
$("#utopian-table").tabulator("download", "csv", "Tabulator Sample Download.csv");
});
</script>
</body>
</html>
Some of my previous contributions are;