6 Best jQuery and JavaScript Data Table Libraries

Data tables is an important part in any admin dashboards. It helps show data to webmasters and users.

That’s why we need a good data table library to make data look neat and correct.


This is the most popular data table library for jQuery and JavaScript. It supports pagination, instant search, multi-column ordering, remote data source, themes, and extensions.

$(document).ready( function () {
} );


This is a plugin for any tables with large dataset. It can work smoothly with over 400,000 rows.

var data = ['<tr>…</tr>', '<tr>…</tr>', …];
var clusterize = new Clusterize({
  rows: data,
  scrollId: 'scrollArea',
  contentId: 'contentArea'


Handsontable is a JavaScript library which makes data grid feel like a spreadsheet. It is very easy to implement, flexible, and super customizable. You can extend it with custom plugins and edit the source code to adjust it to your product. 


jTable is a jQuery plugin used to create AJAX based CRUD tables. The plugin has many useful features, including AJAX data source, ‘create new record’ with jQueryUI dialog form, server side paging using AJAX, server side sorting using AJAX, row selection, and many more.

$(document).ready(function () {
title: 'The Student List',
paging: true, //Enable paging
pageSize: 10, //Set page size (default: 10)
sorting: true, //Enable sorting
defaultSorting: 'Name ASC', //Set default sorting
actions: {
listAction: '/Demo/StudentList',
deleteAction: '/Demo/DeleteStudent',
updateAction: '/Demo/UpdateStudent',
createAction: '/Demo/CreateStudent'
fields: {
StudentId: {
key: true,
create: false,
edit: false,
list: false
Name: {
title: 'Name',
width: '23%'
EmailAddress: {
title: 'Email address',
list: false
Password: {
title: 'User Password',
type: 'password',
list: false
Gender: {
title: 'Gender',
width: '13%',
options: { 'M': 'Male', 'F': 'Female' }
CityId: {
title: 'City',
width: '12%',
options: '/Demo/GetCityOptions'
BirthDate: {
title: 'Birth date',
width: '15%',
type: 'date',
displayFormat: 'yy-mm-dd'
Education: {
title: 'Education',
list: false,
type: 'radiobutton',
options: { '1': 'Primary school', 
'2': 'High school', 
'3': 'University' }
About: {
title: 'About this person',
type: 'textarea',
list: false
IsActive: {
title: 'Status',
width: '12%',
type: 'checkbox',
values: { 'false': 'Passive', 'true': 'Active' },
defaultValue: 'true'
RecordDate: {
title: 'Record date',
width: '15%',
type: 'date',
displayFormat: 'dd.mm.yy',
create: false,
edit: false,
sorting: false //This column is not sortable!
//Load student list from server


Tabular has all the features which are included in DataTables library.

var table = new Tabulator("#example-table", {
data:tabledata,           //load row data from array
layout:"fitColumns",      //fit columns to width of table
responsiveLayout:"hide",  //hide columns that dont fit on the table
tooltips:true,            //show tool tips on cells
addRowPos:"top",          //when adding a new row, add it to the top of the table
history:true,             //allow undo and redo actions on the table
pagination:"local",       //paginate the data
paginationSize:7,         //allow 7 rows per page of data
movableColumns:true,      //allow column order to be changed
resizableRows:true,       //allow row order to be changed
initialSort:[             //set the initial sort order of the data
{column:"name", dir:"asc"},
columns:[                 //define the table columns
{title:"Name", field:"name", editor:"input"},
{title:"Task Progress", field:"progress", hozAlign:"left", formatter:"progress", editor:true},
{title:"Gender", field:"gender", width:95, editor:"select", editorParams:{values:["male", "female"]}},
{title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100, editor:true},
{title:"Color", field:"col", width:130, editor:"input"},
{title:"Date Of Birth", field:"dob", width:130, sorter:"date", hozAlign:"center"},
{title:"Driver", field:"car", width:90,  hozAlign:"center", formatter:"tickCross", sorter:"boolean", editor:true},

Cheetah Grid

Cheetah Grid is among the frequently updated data table plugins. It allows user not only to convert current table to a dynamic one with searching, pagination but also to modify data from script.

<div id="sample" style="height: 300px; border: solid 1px #ddd;">
// initialize
const grid = new cheetahGrid.ListGrid({
// Parent element on which to place the grid
parentElement: document.querySelector('#sample'),
// Header definition
header: [
{field: 'check', caption: '', width: 50, columnType: 'check', action: 'check'},
{field: 'personid', caption: 'ID', width: 100},
{field: 'fname', caption: 'First Name', width: 200},
{field: 'lname', caption: 'Last Name', width: 200},
{field: 'email', caption: 'Email', width: 250},
// Array data to be displayed on the grid
// Column fixed position
frozenColCount: 2,

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.