Take Your HTML Tables to a New Level with JavaScript Frameworks
With basic HTML tables, the structure and the way the table are presented inherits the native html style. And if you like to change it then you need to change the underlying HTML code or spend time in adding attributes to all tables tags, in order to style it with CSS . But what if you want to make the tables more interesting, more dynamic, more visual appealing without spending so much time. Yes you can certainly use JavaScript for this, but coding it from scratch will be time consuming and it’s not worth. But JS libraries/frameworks will allow you to add a range of dynamic behavior to your tables and manipulate it for better presentation on a webpage without spending much time. We decided to list a few for the benefit of those who intend to use tables with JavaScript(JS). Most of these are for the popular jQuery, MooTools and Prototype/script.aculo.us JS frameworks. Since most of the JS frameworks mentioned below are plug-ins that work on top of existing JS frameworks, it is recommended that you take a look at those base frameworks first. But there are a few others that do not require an existing JS frameworks.
Solutions Based on jQuery
Flexigrid is a lightweight plug-in for jQuery that converts an ordinary HTML table into an extremely flexible and feature-rich datagrid (or Flexigrid). Resizable columns, ability to connect to an XML data source through AJAX, data scrolling, search, pagination, themes, and the ability to add a toolbar are some of its features.
tablesorter
tablesorter is a jQuery plug-in 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. It has a number of interesting features including: multi-column sorting; support for secondary hidden sorting; preloaded sorters for text, URLs, integers, currency, etc. – your own can be added easily; cross-browser support (except Chrome); and the system is easily extensible via the widget system.
TableRowCheckboxToggle
This is a plug-in that generically adds the toggle checkbox function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. You can also manually exclude checkboxes based on various criteria: name, id, or CSS classes. And more. See the live Demo here.
TableEditor
TableEditor provides flexible in place editing of HTML tables.
ingrid
ingrid is a jQuery datagrid plug-in. It makes it possible to achieve a number of datagrid behaviors such as column resizing, paging, sorting, row and column styling, etc. Take a look at the examples page to see some of the possibilities.
columnManager
columnManager is a jQuery plug-in that enables you to toggle the visibility of table columns (collapsing / expanding) and also to save the state of the table until the user’s next visit to the webpage.
DataTables
DataTables is a plug-in that adds advanced interaction tools to your HTML tables. These include: on-the-fly sorting; multi-column sorting with automatic detection of data types; variable length pagination; and an extensible API to add more features of your own. It can display data from almost any data source – DOM, JS array, AJAX files and supports Server-side processing (PHP, C#, Perl, Ruby, AIR, Gears, …). Tables can also be themed by CSS or jQuery UI ThemeRoller.
uiTableFilter
uiTableFilter by Greg Weber is a jQuery plug-in for filtering table rows. The arrows at the top of each column enable you to sort accordingly. He has also created another great plug-in uiTableFilter, which makes tables editable by users.
Scrollable HTML Table
Convert ordinary HTML tables into Scrollable HTML Tables.
JQTreeTable
JQTreeTable enables you to have a tree-view for an ordinary HTML table. It also has graceful degradation inasmuch as, once the browser’s JS is turned off, the plain HTML table view is maintained.
CSV2Table
A plug-in that helps to load a CSV file and load the data values directly into a table.
Table Pagination
This can help to create a pagination element at the bottom of a table.
Table Drag and Drop
Pretty self-explanatory name: enables users to reorder rows according to their own criteria (for example priority). Individual rows can be marked as non-draggable and/or non-droppable (i.e. other rows cannot be dropped on to them).
Solutions Based on MooTools
OmniGrid
OmniGrid is a plug-in for the MooTools JS framework that can add a rich set of functionality to your data grids and HTML tables. These functionality include: pagination; Server-side and Client-side sorting; resizable columns; connection to back-end databases through AJAX; multiple selection and more. It has been inspired, according to its author, Marko Šantic, by Flexigrid (see above) and PhatFusion’s sortableTable (see below).
TableGear
TableGear is a MooTools+PHP powered component that enables you to manipulated data on the web in various ways. It helps you easily create interactive HTML tables. Features include: sorting; the ability to add and delete rows on-the-fly; keyboard shortcuts; graceful degradation to simple tables in the absence of JS capability on a browser; data loading through AJAX and POST; and is fully XHTML compliant.
Phatfusion Sortable Table
Phatfusion’s sortableTable enables you to sort and filter HTML tables. Sorting can be done on numbers, strings, dates and currency. Filtering can be done on columns.
Zebra Tables
Zebra Tables, developed by David Walsh, is a MooTools plug-in that implements “Zebra” presentation on ordinary tables (i.e. alternate rows are different colors).
mootable
mootable enables conversion of an ordinary HTML table into what the author’s call a mootable, which is simply saying that the table now will have interactive capabilities such as sorting, resizable columns, and the ability to hide/show columns. They degrade gracefully because they are still simple HTML tables at heart.
Solutions Based on Prototype
TableKit
This is a whole set of enhancements for HTML tables. It implements a number of functionality including: column sorting, column resizing, row striping, user cell editing using AJAX, and more.
Solutions Based on Yahoo! UI
YUI DataTables
The Yahoo! UI (YUI) people provide their own control for making powerful HTML tables which is called DataTable. YUI DataTables has pretty advanced functionality: sorting; user cell editing; pagination; scrolling; row, cell and column selection; ability to hide, show, insert or delete columns; and more.
Solutions that Do Not Depend on an Existing Framework
KeyTable
Although KeyTable has a couple of jQuery components, since they are just two it can be easily be made to work with other JS frameworks. It takes any simple HTML table and is able to add things such as keyboard-based navigation and event bindings. The author (Allan Jardine) calls this Excel style navigation, because the table entries can be edited without the use of a mouse. The current cell is highlighted (see below) using event handling functions through the API: “focus” – when a cell is highlighted; “blur” – when user navigates away from the highlighted cell; “return” – when user hits a return key for the current cell; and “esc” – when user hits the escape key.
Tablecloth
Tablecloth is a lightweight, easy to use, and unobtrusive way to add style and behavior to html table elements. Tablecloth searches your HTML source for table elements and processes each one individually. It is easily extensible with the function that gets called when the user clicks on a table cell being editable.
TinyTable
At a 2.5KB download size this is an extremely lightweight solution, that adds a number of attractive features to simple HTML tables which include the following: alternate row highlighting; header class toggling; auto data type recognition; selective column sorting; column highlighting; optional pagination; support for links; and date/link parsing. See the live demo here.
DrasticData
This is an exciting PHP/JS/MySQL based open source package with an AJAX-based datagrid, which comes with editing support, a configurable tag cloud and even a Google Mapping component. See the host of examples for what is possible. The example below shows reverse sorted “Continent” column and hitting the red “x” on row 6 has brought up the dialog box. Check out other examples at the homepage.
JavaScripTools
JavaScripTools is a collection of useful JS components, functions, and classes with the aim of simplifying the web developer’s task. Its features include parsers/formatters for various data types. In particular, it comes with a dynamic table function that is useful for creating sortable HTML tables.
Standardista Table Sorting
This is a JS module that allows to take an HTML data table and make it sortable by any column. Sorting can be done on various data types including IP addresses, Currency, numbers, Plain text, and dates. The example shows the “price” column sorted.
Unobtrusive Table Actions Script
The author’s goal was to create a solution which was not tied to any underlying JS framework and so we get the Unobtrusive Table Actions Script. This has a number of useful features including: “Zebra” striping of rows; row hover, cell hover, and column hover effects; table rows can be selected on click and the behavior on click can be programmed via a callback function, allowing for flexibility for the web developer; row and column highlighting and selection; and the ability to hyperlink cell contents. See example below: row 6 has been selected; the mouse pointer is actually on row 10 and column 2 causing that to be highlighted as also the entire row; finally, there is a hyperlink at cell (1,1).
sorttable
sorttable is a JS framework that enables you to convert all your HTML tables and make them sortable (see example below – name column is reverse sorted). sorttable uses DOM, sorts a number of different data types and it is completely unobtrusive.
dragtable
As its name suggest dragtable makes table columns draggable. Users can now change the order of table columns by dragging them wherever they need to. Enable users to change order of table columns by simply dragging them. It can and is meant to be used in conjunction with sorttable.
source: Pixel Art
StumbleIt! 
January 16, 2010
…
Хм.. …
--Reply