Examples

One of the best ways of learning how to do anything new (including software APIs!) is to get stuck in with some code as quickly as possible. With over 1'000 examples for the DataTables suite, you will learn how to perform tasks ranging from something as simple as applying DataTables to an HTML table, right the way through to a fully editable, responsive table with advanced search controls.

Core

DataTables core

Start your learning with DataTables by looking at how to load data, configure options and use the API. Almost every aspect of DataTables can be tweaked to suit your needs, including layout and language strings. It all starts here!

Extensions

AutoFill

Adds an Excel like data fill option to DataTables, allowing click and drag over cells, filling in information and incrementing numbers as needed.

Buttons

A common and extensible framework for displaying table control buttons. Includes options for data export, column visibility and more.

CardView

A card view mode for DataTables, where each row in the table is shown as a card, which can be defined with custom templates.

ColReorder

Allows the end user to modify the column order of a table through drop-and-drag of column headers.

ColumnControl

Add control content to the headers and footers of a table. Content types include ordering buttons, search inputs and lists.

DateTime

A date picker library that is used by a number of other extensions, providing an easy to use UI for end users to select dates and times.

Editor

A complete editing library for DataTables adding full CRUD support. Editing options include inline and modal displays, and a wide variety of field types.

FixedColumns

Fix one or more columns to the left and / or right hand side of a DataTable that scrolls along the x-axis.

FixedHeader

Sticky headers and footers for DataTables, allowing the header to always be visible even for long tables.

KeyTable

Spreadsheet-like navigation for your DataTable - focus on a cell and navigate around the table with your keyboard.

Responsive

Automatically toggle columns to have the table fit in the visible area, for clean integration with mobile-first sites.

RowGroup

Add the ability to easily group rows in a DataTable by a given data point. The grouping is shown as an inserted row either before or after the group.

RowReorder

Provide end user reordering of rows in a DataTable through click-and-drag mouse and touch operations.

Scroller

A virtual rendering plug-in for DataTables which allows large datasets to be drawn on screen very quickly.

SearchBuilder

A simple UI for the end user to build arbitrarily complex search operations, with grouping and logic support.

Select

Row, columns and cell selection for DataTables, with full API integration and complex selection abilities.

StateRestore

State management UI, allowing users to create and restore table states with ease. Full Ajax support.