Boost your Tables with JavaScript Frameworks | Developer Assets

Dashir — Sat, 27 Jun 2009 21:23:36 +0000

A JavaScript library is a library of pre-written JavaScript controls which allow for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.

JavaScript frameworks/libraries have become essential elements for a good web design in these days. These frameworks and libraries can help us to enhance the user experience and develop web pages in a quick way.

The following is a list of beautiful JavaScript frameworks and libraries that can handle the table element beautifully and provide more interactivity and guarantee better functionality in any html web document.

If you know other JavaScript frameworks and libraries that are useful for tables which are not included in the list, please do not hesitate to leave your comments below.

jQuery Framework/Library

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

1- KeyTable

A lighweight JS library for adding keyboard navigation support to tables.The library provides an Excel-like navigation that can be bundled with features like on-click editing. The inline row editing feature is accomplished with the jQuery jEditable plug-in. And, KeyTable integrates easily with DataTables (see WRD post).The library works in all major browsers.

2- DataTables

A jQuery plugin for adding advanced interaction controls to HTML tables.It can add pagination, filtering and multi-column sorting functions to tables with ease.

3- Datagrid: Ingrid

Ingrid is an unobtrusive jQuery component for creating very nice looking & effective datagrids.It simply adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

With every display event, Ingrid sends a query to a dynamic file (ASP, Asp.Net, PHP..), which must be created by you (a PHP example exists).The query then simply returns the results in a table format “how Ingrid expects them to be”. And, that’s all.

4- jqGrid

jqGrid is an Ajaxed jQuery grid plugin with amazing features.As the grid is a client-side solution that loads data with Ajax callbacks, it can be used with any server-side language like ASP, PHP, ASP.NET, JSP and so.A clever feature is sub grids which shows you a sub grid when a master column is called.

5- 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.Using tableSorter, you can have custom headers, sorting classes and row striping features.

6- Flexigrid

Flexigrid is a feature 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.

MooTools Framework/Library

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

7- OmniGrid

OmniGrid is a free grid component for MooTools that has advanced features. Having inspired from Flexigrid (for jQuery) & sortableTable, OmniGrid offers a similar functionality.

Besides client-side sorting, with a serverside script (a PHP one is mentioned), it connects to the data & can easily sort/paginate an unlimited number of records.

Columns can be resized, multiple records can be selected (data inside is shown with an accordion), the look can be customized & more.

8- Sortable Table with Phatfusion

Phatfusion has beautiful Mootools JavaScript framework plugins which you’ll love.

Prototype Framework/Library

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

9- TablesKit

TableKit, built with the Prototype Framework, not only improves the usability of standard HTML tables but also saves so much time while implementing a standard data editing & sorting functionality.

Other Frameworks/Libraries

10- TinyTable

A lightweight JavaScript table sorter for getting more out of a standard table.

Any column can be excluded from the sorting functionality with ease.The script is an updated version of this one (see WRD post) & works in all major browsers.

11- Dragtable

Dragtable is a JavaScript library for making the columns of a table draggable.It is very easy to use as inserting the dragtable.js in our code and adding the class=”dragtable” to any table is enough.

Tables become more functional with Dragtable as you can put the columns you think important side-by-side and have a better view.It can also be used with the famous Sorttable library which will make the standard tables both draggable and sortable.

12- Table Sorter

JavaScript Table Sorter is a lighweight code (1.7kb) for transforming standard tables into a sortable grid.It includes alternate row formatting, header class toggling, auto data type recognition and selective column sorting.

13- Ext Live Data

Ext JS LiveGrid component, a component for the powerful Ext JS Framework, makes it easy to create non-refreshing, live grids.This EXT JS component is very handy while browsing through a large amount of data as all data doesn’t need to be loaded once & no need for paging.

Resources articles and resources on JavaScript frameworks

Note(s): Illustration to book review JavaScript: The Good Parts.

Ultimate Smashing » Coding