Advertise here via BSA

There has been some discussion in the past about how/when to use tables in web development. Though, the conclusion is the same: when you’re dealing with tabular data, tables are absolutely required.

Designing a table is a challenge. It’s (mostly) about how easy is your table to read. Red Team Design has written a nice tutorial on how to to create Practical CSS3 Tables with Rounded Corners. Also, jQuery will be used to create fallbacks for older browsers.

Requirements: jQuery Framework and CSS3
Demo: http://www.red-team-design.com/wp-content/uploads/2011/10/practical…
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

List.js is a 7 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable.

You can add, edit and remove items by dead simple templating. You can also write your own filter functions easily. List.js is free for download and released under MIT License.

Requirements: Javascript enabled
Demo: http://listjs.com/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

accounting.js is a tiny JavaScript library for number, money and currency formatting (currency symbol, precision, and thousand/decimal separators), with optional excel-style column rendering (to line up symbols and decimals).

It is lightweight, fully localisable and has zero dependencies. accounting.js was made by Joss for enterprise analytics application at Demand Analytics. It is released under GPL v3.

Requirements: Javascript Enabled
Demo: http://josscrowcroft.github.com/accounting.js/
License: GPL License

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

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.

It loads grid from XML or attach to an existing HTML table. Built-in validators for columns of type integer, double, url, email and date. Sort columns accordingly to their types, by clicking on the column header. Open Flash Chart integration to render charts from the grid data. Callbacks for all events: load, edition, sorting, etc.

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

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Animated Table Sort is a plugin that allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

Requirements: Javascript Enabled
Demo: http://www.mitya.co.uk/scripts/Animated-table-sort…
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

jQuery.sheet gives you all sorts of possibilities when it comes to giving your web application a spreadsheet style interface with MS Excel style calculations.

jQuery.sheet addresses the web-based spreadsheet or “websheet” in a different, simple, approach – using html, you simply load the sheet from a url, and you save it to a url. jQuery.sheet manages the sheet creation, viewing, and editing processes, you simply build your application around it.

jQuery.sheet is also theme-able, using jQuery UI ThemeRoller, so you make the spreadsheet look like you want. For a complete list of all the MS Excel style functions that jQuery.sheet supports, take a look at the Demo, which is the documentation.

Requirements: jQuery Framework
Demo: http://jqueryplugins.weebly.com/jquerysheet.html
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

DHTMLX library is getting closer to people who do not want or do not know how to write the code, but need to have something for showing/updating data they store in the database. Even programmers sometimes need this to minimize the time spent on routine tasks.

With the help of DHX Quick Tables, you get necessary number of web pages with tables linked to the database records. Two entries are available: for guests (just view the tables) and for administrator (view, edit, add/delete pages). Thus, you can put it on the backend of your database-driven site and be able to access and update data.

Or you can show resulting table on your website, if tabulated data is what you need. Visitors will be able to navigate through the huge amount of records, sort and filter the information. In the next build of the tool we’ll also add printing and other nice features. DHX Quick Tables is distributed under GNU GPL for free.

Requirements: -
Demo: http://www.dhtmlx.com/blog/?p=144
License: GPL License

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Wouldn’t it be great if there was an easy way to make massive HTML tables with scrollable content and headers that stayed put? Why would you want this? Say you have a table with many rows and columns. Typically what happens when you scroll to the bottom of the table is you’ve forgotten the context of the cell you’re viewing because the table header has scrolled out of view.

Chromaloop did come across a solution that achieves the desired effect by creating two tables and stacking them on top of each other, one for the thead and the other for the tbody. Regardless of the extra markup required, this approach seemed to work the most reliably across all browsers.

So Chromaloop worked out a way to do it that would rely on Jquery to do most of the heavy lifting for the extra HTML markup and generating the correct cell dimensions so that the thead would line up properly with the tbody with dynamic content. The rest would rely on some light CSS markup to define the table dimensions and positioning.

And then, he has taken this a step further by creating Chromatable jQuery Plugin to keep the code contained in one location and allow users to call the “chromatable()” method on any table, or many tables on the same page.

Requirements: jQuery Framework
Demo: http://www.chromaloop.com/posts/chromatable-jquery-plugin
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

If we could drag our tabular data into grids from other programs we could circumvent the need to upload a data file to a web server to be read and parsed, then spit back out to our browser in a readable format.

Anyone who has ever had to parse Excel files on the server side knows how much of a pain it is, we might be lucky if we get a CSV file or some other simple format, but in the real world the end user running their spreadsheet program has no clue what simple tabular data is.

Shea Frederick has created a DataDrop plugin that is used on an ExtJS grid, giving that grid the ability to accept data dragged from spreadsheet programs such as Excel and OpenOffice Calc right into the grid to create rows of data.

Requirements: ExtJS Framework
Demo: http://www.vinylfox.com/datadrop-drag-grid-data-from-spreadsheet/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

With 200 lines of JavaScript, you can drag and drop table content. Content of the HTML table cells can be dragged to the another table cell or another table. Script has built in autoscroll and option to forbid landing to some table cells. Table could have rowspan or colspan cells and different background color for every cell.

In order to detect destination table cells, script calculates all table cell coordinates / dimensions and store them to the arrays. Arrays are searched inside onMouseMove handler and when user release left mouse button, object will drop to the current table location.

Requirements: FireFox 3, Internet Explorer 6 and Google Chrome
Demo: http://www.redips.net/javascript/drag-and-drop-table-content/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications