Best jQuery Tables Plugins & Tutorials with Demo

    jQuery.sheet : jQuery Ajax spreadsheet Plugin

    jQuery.sheet : jQuery Ajax spreadsheet Plugin

    The ajax spreadsheet, jQuery plugin flavor.

    bbGrid : Extendable Grid based on jQuery & Twitter Bootstrap

    bbGrid : Extendable Grid based on jQuery & Twitter Bootstrap

    Quite simply, bbGrid is a JavaScript grid/spreadsheet component. The general idea is the same as in Backbone, you don’t need to keep an eye on collection, bbGrid will do that!

    Features:

    • Responsive due to Twitter Bootstrap
    • Extendable thanks to Backbone.js
    • Fast as much as jQuery can
    • Configurable & customizable

    Responsive CSS3 Data Grids

    Responsive CSS3 Data Grids

    Responsive CSS3 Data Grids are used to present typical tabular data. Their advantages over the standard table are expandable rows in a form of drop down accordion sections, ability to highlight individual rows, hover states, table cell and headings tooltips. In addition the table is fully responsive and adapts well to the resolution of different mobile devices like iPad or iPhone by grouping the data into rows. Additional drop down panel allows to show / hide selected columns for easier data comparison.

    Features:

    • Pure CSS3 + HTML,
    • Responsive Layout,
    • IE8 JS Fallback,
    • Expandable Rows,
    • Ability To Expand Multiple Rows At Once,
    • Ability To Expand Only One Row At Once,
    • Ability To Expand Selected Rows By Default At Startup,
    • Ability to Highlight Single Table Row,
    • Hover States,
    • Columns Filtering,
    • CSS3 Tooltips,
    • 4 Predefined Color Skins

    htmlToOffice : HTML Data converter with JavaScript

    htmlToOffice : HTML Data converter with JavaScript

    Word or Excel to HTML convert all of your data in this plugin

    Open JS Grid : Easiest jQuery Grid

    Open JS Grid : Easiest jQuery Grid

    OpenJS Grid is the easiest jQuery Grid ever. With very little work you can have a data grid that can do everything from sorting and searching to complex database queries. Best of all, its open source. So you can learn how it’s all done.

    OpenJS Grid provides a super easy / powerful way to give customers access to data. I do all the database work for you, so you don’t have to figure out searching and sorting, as well as give you cool stuff like events and cell types so you can customize to fit your need. And now with Stylus and Bootstrap, you can easily restyle the grid to your liking.

    dolly.js : Clone your tables easily with jQuery

    dolly.js : Clone your tables easily with jQuery

    Dolly.js is a simple and generic jQuery UI widget that adds excel-like cloning functionality to your tables. It works with any tabular structure (not only semantic html tables) and does not make any assumptions about the underlying data structure. It handles the UI part of cloning only – the implementation of business cloning logic is left to the widget’s users.

    jQuery Dynatable : HTML5+JSON interactive Table plugin

    jQuery Dynatable : HTML5+JSON interactive Table plugin

    Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON.

    Dynatable does three things:

    1. Normalize: It normalizes an HTML table into an array of JSON objects, where each JSON object (or record) corresponds to a row in the table.
    2. Operations: It sorts, filters, and paginates the JSON collection.
    3. Rendering: It renders the resulting collection from the operations back to the table.

    Fixed header and column jQuery Datatables

    Fixed header and column jQuery Datatables

    Uses jQuery datatables to make a responsive datatable with a fixed header and a fixed column.

    Features:

    • Regular markup
    • Styled with Bootstrap 2.3.2
    • Scrolls to first non-empty cell when you click header or left column
    • Resizes height and width on browser resize

    SortedList : jQuery plugin to Sort a list of DOM elements

    SortedList : jQuery plugin to Sort a list of DOM elements

    SortedList is a jQuery plugin to sort a list of DOM elements the way you want. Think about LI, TR, OPTION and even DIVS.

    Yet Another DataTables Column Filter in jQuery

    Yet Another DataTables Column Filter in jQuery

    This jQuery plug-in allows the user to easily add filter components to table columns, the plug-in works on top of the DataTables jQuery plug-in.

    Features:

    • Various filter options:
      • select input
      • autocomplete input – make use of the jQuery UI Autocomplete widget (with some enhancements)
    • Parsing various types of columns:
      • plain text
      • plain text with delimiter
      • one or more HTML elements with the ability to extract text / value / id from each HTML element
    • Multiple tables support
    • CSS support:
      • each filter element has got a css style class , so its style can be easily overridden
    • Reset button for filter:
      • next to each filter a reset button will appear (this button allows the user to reset the filter)
    • Filter in use visual notification:
      • when a certain filter is being used it will be highlighted (the color of highlight can easily be changed with css)