Saturday, January 2nd, 2010
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 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.
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 provides flexible in place editing of HTML tables.
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 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 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 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.
Convert ordinary HTML tables into Scrollable HTML Tables.
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.
A plug-in that helps to load a CSV file and load the data values directly into a table.
This can help to create a pagination element at the bottom of a table.
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 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 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’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, developed by David Walsh, is a MooTools plug-in that implements “Zebra” presentation on ordinary tables (i.e. alternate rows are different colors).
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
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
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
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 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.
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.
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.
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.
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 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.
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.
AdPrelanté offers Quality Outsourcing – HTML, CSS, jQuery, WordPress,VFX & Motion Graphics – Prelanté