All posts in Tables

GridNic : lightning fast JavaScript grid/spreadsheet

GridNic : lightning fast JavaScript grid/spreadsheet

SlickGrid is a JavaScript grid/spreadsheet component.It is an advanced component and is going to be a bit more difficult to learn and configure, but once you realize its full potential, it will blow your mind!

Some highlights:

  • Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
  • Extremely fast rendering speed
  • Supports jQuery UI Themes
  • Background post-rendering for richer cells
  • Configurable & customizable
  • Full keyboard navigation
  • Column resize/reorder/show/hide
  • Column autosizing & force-fit
  • Pluggable cell formatters & editors
  • Support for editing and creating new rows.
  • Grouping, filtering, custom aggregators, and more!
  • Advanced detached & multi-field editors with undo/redo support.
  • “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.

dynoTable: A jQuery plugin for creating editable tables

dynoTable: A jQuery plugin for creating editable tables

I was working on a project that required the GUI to allow the user to dynamically add, remove and rearrange various form fields contained in table rows. The tricky part was that the UI needed to have this functionality for several different types of elements across several different forms. For instance, one set of fields was for adding and removing specifications to a product while another set of fields was for adding images to a product.

DynoTable makes an html table editable. With it you can:

  • Add rows
  • Remove rows
  • Clone rows
  • Click and Drag to Re-arrange rows (If you have Jquery UI included on
    your page)

The dynoTable defaults will probably handle most use cases. If you do not require any of the functionality it provides, you can simply omit the classes from your table. However, dynoTable also provides a number
of properties and callback functions to configure it further if needed.

ezEditTable – Enhance Html Tables in jQuery

ezEditTable - Enhance Html Tables in jQuery

ezEditTable 2.0 is a javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation. With just a line of code you can easily convert a regular HTML table in an advanced editable and selectable grid control.

Features:

  • Attach to an existing HTML table
  • Advanced selection model
  • Extended keyboard navigation
  • Inline cell or row editing
  • Insert and remove rows
  • Send changes to server via GET or POST methods by form submission or by including script elements in the head section (only GETs)
  • Integration with any server-side technology as this is a pure client-side solution
  • Callbacks for all events, and delegates for most actions
  • Based on plain javascript, that is, independent from any javascript framework but compatible with any of them (no for..in etc.)
  • Exhaustive documentation and API

Handsontable : jQuery Excel-like table editor

Handsontable : jQuery Excel-like table editor

Handsontable is a minimalistic approach to Excel-like table editor in HTML & jQuery.

  • Type in any cell and see how the grid adds new rows and cols automatically.
  • The legend feature, which makes the first row uneditable and have an green font
  • You can define rules for autocompletition.
  • You can drag it (drag-down) to repeat the values from the cell.
  • Right click to see the context menu.
  • Use the onChange callback to track changes made in the table.
  • There is also the NEW onBeforeChange callback, which can be used to validate changes before they are applied to the table.

tablecloth.js : jQuery bootstrap to Style & Manipulate data tables

tablecloth.js : jQuery bootstrap to Style & Manipulate data tables

tablecloth.js is a jQuery plugin that helps you easily style HTML tables along with some simple customizations.Either you’re redesigning a large site or working on a completely new one… styling tables is typically tedious and time-consuming. If you’d rather spend your valuable time making the other elements of your site pretty, use tablecloth to do the heavy lifting

Drag and Drop table content with JavaScript

Drag and Drop table content with JavaScript

Content of HTML table cells can be dragged to another table cell or another table. It isn’t difficult to define onMouseMove handler and change top / left element styles to move the object. In case with tables, you will have to determine somehow destination table cell. Attaching onMouseOver handler on table cells will not work, because browser doesn’t fire events to the elements beneath the dragged object.

jQuery Scrollable Table Plugin

jQuery Scrollable Table Plugin

This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table. Scrollable tables are most useful when having to display lots of tubular data in a fixed space.

The tablescroll jQuery plugin is a simple markup manipulation plugin, it will manipulate the table, create a couple of new elements and wrap everything in a DIV.

Ingrid : jQuery Grid plugin

Ingrid : jQuery Grid plugin

Datagrids don’t have to be difficult to use anymore – say hi to Ingrid. Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables. It’s easy to get started – read on below, or check out the Example Pages

jqGrid : jQuery Flexible Grid Plugin

jqGrid : jQuery Flexible Grid Plugin

jqGrid is a grid component for ASP.NET & PHP based on the world’s most popular and flexible jQuery grid plugin jqGrid.

  • Client-side javascript based on jQuery
  • Theming based on jQuery UI (Themeroller)
  • Support for all major databases (MS SQL, MySql, Postgre)
  • Simple
  • No ViewState

List.js – Add search, sort and flexibility to plain HTML lists with jQuery

List.js - Add search, sort and flexibility to plain HTML lists with jQuery

Do you want a 9 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable? Yeah!
Do you also want the possibility to add, edit and remove items by dead simple templating? Hell yeah!



Best jQuery websites design awards