Best jQuery Tables Plugins & Tutorials with Demo

Frappe DataTable : A Simple Modern and Interactive Datatable Library

Frappe DataTable : A Simple Modern and Interactive Datatable Library

Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data. Originally built for ERPNext, it can be used to render large amount of rows without sacrificing performance and has the basic data grid features like inline editing and keyboard navigation. It does not require jQuery, like most data grids out there.

x-spreadsheet : A web-based JavaScript Spreadsheet

x-spreadsheet : A web-based JavaScript Spreadsheet

x-spreadsheet is a web-based JavaScript(canvas) spreadsheet.

Simple Data Table with JavaScript

Simple Data Table with JavaScript

Lightweight and simple data table with no dependencies.

Features:

  • Display data (array with objects) in simple table
  • Lazy loading of data (you can load data whenever you can)
  • Support custom skins
  • Small size of package
  • No dependencies
  • Support custom events (update, add, remove)
  • Fluent API
  • Recognize data in input and change input type

Toast UI Grid : The Powerful Component to Display and Edit Data

Toast UI Grid : The Powerful Component to Display and Edit Data

Toast UI Grid is the Powerful Component to Display and Edit Data.Experience the Ultimate Data Transformer!

Features:

  • Custom cell formatter & converter
  • Various input types (checkbox, radio, select, password, etc)
  • Full keyboard navigation (move, select, copy, paste, delete, etc)
  • Virtual scrolling (Handling large dataset without performance loses)
  • Copy & Paste using clipboard with 3rd party application (Like MS-Excel or Google-spreadsheet)
  • Column resize & reorder & show & hide
  • Multi column headers
  • Validation
  • Pagination
  • Merging cell

ScrollHint : JavaScript Scrollable Horizontally Elements

ScrollHint : JavaScript Scrollable Horizontally Elements

A javascript library to suggest that the elements are scrollable horizontally, with the pointer icon.

Mobile Friendly Responsive Table with jQuery

Mobile Friendly Responsive Table with jQuery

A mobile-friendly table solution, which persists headers for each table-cell on mobile devices.On mobile devices the orientation changes from horizontal to vertical, and each cell is prepended with its respective table header as a label.

Dgtable : jQuery High-performance Table for Web Apps

Dgtable : jQuery High-performance Table for Web Apps

Dgtable is a table View for jQuery, which is meant to be high-performance, and allow simple user interactions with the UI, such as:

  • Sorting
  • Sorting by more than one column
  • Moving columns
  • Resizing columns
  • Full cell preview when hovering
  • Native RTL support

Scrollbooster : Enjoyable Content Drag-to-scroll library

Scrollbooster : Enjoyable Content Drag-to-scroll library

Scrollbooster is a enjoyable content drag-to-scroll micro (~2KB gzipped) library.

Yet Another DataTables Column Filter : jQuery Plugin

Yet Another DataTables Column Filter : jQuery Plugin

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:

  • Support DataTables 1.10.0 – Use yadcf.init(…) for new API (Capital “D”)
  • Support all data source: DOM, Javascript, Ajax and server-side processing (1.10.0 +)
  • Various filter options:
  • select input, multiple selection input, text input
  • autocomplete input – make use of the jQuery UI Autocomplete widget (with some enhancements)
  • date input – make use of the jQuery UI Datepicker widget (with some enhancements)
  • range of numbers
  • range of numbers with slider widget – make use of the jQuery UI Slider widget (with some enhancements)
  • range of dates – make use of the jQuery UI Datepicker widget (with some enhancements) or Bootstrap Datepicker
  • custom function
  • Filters can be placed in the header (thead) or in the footer (tfoot) , second argument of yadcf constructor or third argument of init function

Tabullet : jQuery Editable Table Row Plugin

Tabullet : jQuery Editable Table Row Plugin

Tabullet is a simple jQuery plugins for creating a table that can insert, edit, and delete row in one place.