Posts

Drag & Drop Table Rows with JavaScript – REDIPS.drag

REDIPS.drag – JavaScrip that enables you to easily drag and drop table rows as well as table content.

REDIPS.drag also takes care about background color of table cells and table rows. When dragging begins, color of each table cell is saved to the array and returned in a moment of dropping or highlighting current table row.

Currently it is not possible to drag table columns – only table rows. As REDIPS.drag evolved from dragging table content to dragging rows, hopefully in one of the next releases there will be option to drag table columns as well.

JavaScript - easily drag and drop table rows

Make Your Standard HTML Tables Editable and Sortable – EditableGrid

EditableGrid – an Open Source Javascript library to turn your standard HTML tables into advanced editable and sortable components.

EditableGrid is focuses on simplicity, with just a few lines of code you can get your standard HTML table up and running.

Editable html tables - editablegrid

Main features:

  • Load grid from XML or attach to an existing HTML table
  • Possibility to declare a list of possible values for the cells of a column statically or in Javascript
  • Sort columns accordingly to their types, by clicking on the column header
  • PHP binding: build your grid in PHP and let it generate the XML file
  • Insert and remove rows
  • Open Flash Chart integration to render charts from the grid data (the chart can follow when editing data or sorting columns)
  • … and much more

Generate Charts From Accessible Data Tables – Table2Chart MooTools Plugin

table2chart – Mootools plugin which allows you to easily create a pie chart from valid data tables.

Simply add the script to the end of the body and it will convert all tables with a class ‘toChart’ to pie charts. You can define the chart size and the chart color within the class like:

class="toChart size700x300 color29b34f"

table2chart is a light-weight plugin, only 1Kb compressed and gzipped.

generate charts from tables - mootools plugin

Animated table sort jQuery Plugin

Animated table sortjQuery plugin allows you to sort a table based on a particular column with a fly effect.

The various <td>s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches.

Table sort plugin cleans up after itself, and what you’re left with is a legitimate table with each <td> containing the value it visually appears to.

animated table sort

You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

Compass Datagrid Plugin for jQuery

Compass DataGrid is an ajax-driven data grid jQuery plugin that takes an empty table and populates it by connecting to a server-side url via ajax.

As users interact with the grid, the grid talks with the server-side script letting it know what the user is requesting. The server-side script then provides JSON encoded data for the plugin to update the table.

ajax driven datagrid jquery plugin

Compass Datagrid will work with any server-side programming language (the example in the download is in PHP). Compass DataGrid is released under the MIT and GPL license.

Keyboard Navigation for HTML Tables – KeyTable Javascript Library

KeyTable – a Javascript library which provides keyboard navigation and event binding for any HTML table.

With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. As a further bonus, KeyTable integrates seamlessly with DataTables.

KeyTable is open source software and has been tested and works great on: IE6+, Firefox 3+, Safari 3+ and Opera 9.6.

KeyTable - HTML tables javascript library

JavaScript Table Sorter – TinyTable

TinyTable – a lightweight (2.5kb) easy to use JavaScript table sorter script.

Features include column highlighting, optional pagination, support for links, and date/link parsing. A few other features are alternate row highlighting, header class toggling, auto data type recognition and selective column sorting. More updates will follow soon.

TinyTable has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome.

View TinyTable Demo

table sorter