blogfreakz.com » Table

EditableGrid – Turn HTML Tables Into Advanced Editable Components

Mufti Ali — Sat, 11 Sep 2010 04:01:03 +0000

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.

Originally, EditableGrid was a component developed to be used in Timetrack, an online time tracking and invoicing tool. Thereafter, this work has been factorized into an external library.

Features

Load grid from XML or attach to an existing HTML table
Simple to use and easy integration into existing web applications
Each column is typed (string, integer, double, boolean, url, email, date)
Edit cells with a suitable editor, according to the column type (eg. checkbox for boolean)
Possibility to declare a list of possible values for the cells of a column (statically or in Javascript)
Management of unit, precision and NaN values for numeric columns
Built-in validators for columns of type integer, double, url, email and date
Possibility to plug your own cell renderers, editors and validators
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
Filtering of the grid
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)
Callbacks for all events: load, edition, sorting, etc.

Requirements:
Demo: http://www.webismymind.be/editablegrid
License: GPL license

Incoming search terms for the article:

TableKit – Sortable Resizable Editable HTML Table

Mufti Ali — Thu, 26 Aug 2010 18:46:59 +0000

TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.

TableKit allow us to sort the column, by click the table header cells, resize the column by dragging the right border of a header cell, click a cell in the table body to edit the value.

Requirements: Prototype framework
Demo: http://millstream.com.au/upload/code/tablekit/index.html
License: MIT

Incoming search terms for the article:

table2chart – Generates Charts from Data Tables MooTools Plugin

Mufti Ali — Fri, 13 Aug 2010 03:23:58 +0000

table2chart is MooTools that generates charts from accessible data tables. So, you can take a simple, valid and accessible data table and it gets automatically converted to a pie chart.

Simply add the script to the end of the body and it’ll converts all the table with a class called ‘toChart’. You can define the size and the colour within the attribute class of the table.

Requirements: Mootools framework
Demo:http://thinkphp.ro/apps/google/Google%20Chart%20API/mootools/MooTools%201.2.4/
License: License free

Incoming search terms for the article:

TableGear – Mootools Plugin for Working With Data

Mufti Ali — Sun, 11 Jul 2010 02:24:54 +0000

TableGear is a Mootools plugin for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.

The TableGear package has two parts. TableGear.php is concerned with fetching data, formatting it, and getting it into an XHTML table. It also handles submitted data, both from AJAX calls and a standard POST, and returns data to the application. TableGear.js handles the client-side functions that make the tables dynamic including sorting, editing and keyboard shortcuts. These scripts can be used independently, but are designed to be used together.

Requirements: Mootools framework
Demo: http://andrewplummer.com/demos/tablegear/
License: License free

Incoming search terms for the article:

Animated Table Sort jQuery Plugin

Mufti Ali — Wed, 30 Jun 2010 18:10:32 +0000

Animated Table Sort is jQuery plugin that allows us to animatedly sort a table based on a particular column. The various s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. We can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

Since s are very fixed elements and aren’t animatable, the animation is done by some DOM-scripted

s, which animate to their new homes then repopulate their new homes.

Requirements: jQuery framework
Demo: http://mitya.co.uk/scripts/Table-sort…
License: License free

Incoming search terms for the article:

Flexigrid – Feature-Rich Data Grid For jQuery

Mufti Ali — Fri, 18 Jun 2010 03:43:31 +0000

Flexigrid is Lightweight but 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. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Features

Resizable columns
Resizable height and width
Sortable column headers
Cool theme
Can convert an ordinary table
Ability to connect to an ajax data source (XML and JSON[new])
Paging
Show/hide columns
Toolbar (new)
Search (new)
Accessible API
Many more

Requirements: jQuery framework
Demo: http://www.flexigrid.info/
License: Other license

Incoming search terms for the article:

DataTables – Advanced Data Table jQuery plugin

Mufti Ali — Tue, 09 Feb 2010 21:15:41 +0000

DataTables is Data Table jQuery plugin that offfer us to create advanced and flexible data table with slick user interface. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

Features

Variable length pagination
On-the-fly filtering
Multi-column sorting with data type detection
Smart handling of column widths
Display data from almost any data source
- DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
Fully internationalisable
jQuery UI ThemeRoller support
Rock solid – backed by a suite of 1300+ unit tests
Wide variety of plug-ins inc. TableTools, FixedHeader and KeyTable
And more..

Demo: http://www.datatables.net/
License: GPL v2 license or a BSD (3-point) license

Incoming search terms for the article:

SlickGrid – fast rendering JavaScript grid/spreadsheet component

Mufti Ali — Tue, 15 Dec 2009 13:41:04 +0000

SlickGrid is a JavaScript grid/spreadsheet component. SlickGrid utilizes virtual rendering to enable you to easily work with hundreds of thousands of items without any drop in performance.

Features

Virtual scrolling/rendering (hundreds of thousands of rows)
Extremely fast rendering speed
Background post-rendering for richer cells.
Configurable & customizable
Full keyboard navigation
Column resize/reorder/show/hide
Column autosizing & force-fit
Custom cell formatters & editors
Support for editing and creating new rows.
“GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.

In fact, there is no difference in performance between working with a grid with 10 rows versus a 100’000 rows. This is achieved through virtual rendering where only what’s visible on the screen plus a small buffer is rendered.

Demo:

Basic use: http://slickgrid.googlecode.com/svn/trunk/examples/example1-simple.html
Adding some formatting: http://slickgrid.googlecode.com/svn/trunk/examples/example2-formatters.html
Turning it into a spreadsheet: http://slickgrid.googlecode.com/svn/trunk/examples/example3-editing.html
Using a simple Model (filtered data view) to drive the grid: http://slickgrid.googlecode.com/svn/trunk/examples/example4-model.html
Adding tree functionality (expand/collapse) to the grid: http://slickgrid.googlecode.com/svn/trunk/examples/example5-collapsing.html
AJAX-loading data (shows all Apple-related Digg stories): http://slickgrid.googlecode.com/svn/trunk/examples/example6-ajax-loading.html
Using pre-compiled micro-templates to render cells: http://slickgrid.googlecode.com/svn/trunk/examples/example8-alternative-display.html
Using background post-rendering to add graphs: http://slickgrid.googlecode.com/svn/trunk/examples/example10-async-post-render.html

License:MIT License
Project Home: http://code.google.com/p/slickgrid/

Incoming search terms for the article:

jTPS, Animated Sortable Data Table jQuery plugin

Mufti Ali — Tue, 06 Oct 2009 02:28:34 +0000

jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability. The development version is currently 15KB.

NOTES

Default sort is first column ASCending
When you click on a new column to sort, it defaults to DESCending
The natural sort is driven by my algorithm /2008/09/01/javascript-natural-sort-algorithm/ which assumes a lot of things such as: alpha > numeric, case-insensitive, etc.

View Demo: http://www.overset.com/2008/08/30/animated-sortable-data-table-jquery-plugin–jtps/
License : MIT License