Take Your HTML Tables to a New Level with JavaScript Frameworks

Saturday, January 2nd, 2010

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

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

TableEditor

TableEditor provides flexible in place editing of HTML tables.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

Scrollable HTML Table

Convert ordinary HTML tables into Scrollable HTML Tables.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

CSV2Table

A plug-in that helps to load a CSV file and load the data values directly into a table.

Take Your HTML Tables to a New Level with JavaScript Frameworks

Table Pagination

This can help to create a pagination element at the bottom of a table.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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).

Take Your HTML Tables to a New Level with JavaScript Frameworks

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).

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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).

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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).

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

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.

Take Your HTML Tables to a New Level with JavaScript Frameworks

AdPrelanté offers Quality Outsourcing – HTML, CSS, jQuery, WordPress,VFX & Motion Graphics – Prelanté

 

Discussions