15 JavaScript Data Grids to Enhance your HTML Tables


Using a plain HTML table for displaying data is a common convention. It works fine as long as you don’t have many records and don’t want your user to manipulate your data. But when building a web application that serves hundreds of records in a table, presentation of data within HTML tables suffers from great usability drawbacks.

A data grid can help address concerns of HTML tables with large data sets by providing features like sorting, filtering, searching, pagination and even in-line editing for your tables. There are two ways you can add data grid functionality to your tables. The first method is to use server-side scripting like PHP or .NET to allow your users to manipulate your table data. The second and recommended method is to use JavaScript to bind grid controls to your tables.

In this post, we’ll take a look at some of the most popular JavaScript Data Grids available on the Net. Some of them are based on pure JavaScript, while others are plugins to JavaScript frameworks like Mootools, jQuery and Prototype.

Pure JavaScript Data Grids

dhtmlxGrid

dhtmlxGrid is an Ajax-driven JavaScript grid control that supports data in different format including XML, JSON, CSV, HTML table and even custom XML format. The grid component lets you implement nice looking tables with built-in inline editing, filtering, searching and grouping capabilities

EditableGrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running. It supports sorting of columns based on different datatypes, filtering, inserting and removing rows as well as an automatic Flash chart-rendering feature.

Standardista Table Sorting

Standardista Table Sorting is a client-side JavaScript sorting module that lets you sort an HTML data table by any column. It is the most basic and easiest to implement table sorting solution we’ve found. It works great with large table sets and supports result of different data types including date, plain text, currency and number.

SortedTable

SortedTable is another JavaScript datagrid component that combines table sorting and rows selection and movement. It allows you to select rows and move them up or down your table or even movie them from one table to another. Its sorting feature supports different data types (similar to Standardista).

SigmaGrid

Written in pure javascript, Sigma grid is an open source AJAX data grid for displaying and inline editing data in a scrollable and sortable table. It is very powerful yet easy to use &  integrate with PHP, ASP.NET,  JSP and RoR. One of its great features is the support for printable tabular data.

jQuery Data Grid Plugins

jTPS – Datatable jQuery Plugin

jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability. The development version is currently 15KB.

DataTables – Data Table jQuery plugin

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Some of its key features include pagination, on-the-fly filtering and multi-column sorting.

Animated table sort

This jQuery plugin allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

Flexigrid for jQuery

Flexigrid is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. It supports resizable and sortable columns, different skinning themes, ability to connect via AJAX, pagination, toolbar and search. One of the great thing about Flexigrid is that you will find a lot of sample codes to integrate it in your preferred scripting language.

TableSorter

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.

Ingrid

Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

Prototype Data Grid Components

TableKit

TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax. It can be implemented by simply calling the JavaScript file and attaching it to a table’s CSS class.

MyTableGrid

MyTableGrid is a JavaScript based DataGrid control built on the Prototype library. It allows you to display your data in a simple and flexible way.  It supports resizable columns, sortable columns and support data import via JSON or AJAX.

MooTools Data Grid Components

OmniGrid

OmniGrid is a datagrid component that supports table sorting, refresh and pagination. Its ability to connect via AJAX enables it to offer in-line editing, addition and deletion of records as well as rows duplication.

Related Posts:

One Response to “15 JavaScript Data Grids to Enhance your HTML Tables”

  1. Matthew1471 Says:

    There was no mention of jqGrid?

Leave a Comment