DataTables

2.3.8 verified Mon Apr 27 auth: no javascript

DataTables is a powerful JavaScript library for enhancing HTML tables with advanced interaction controls such as pagination, instant search, multi-column sorting, and server-side processing. The current stable version is 2.3.8, released on a regular schedule with minor updates and patches. It requires jQuery as a dependency and provides a rich API for customizing table behavior. DataTables differentiates itself with extensive community support, numerous plugins, and seamless integration with jQuery. A major 3.0 beta is in development, which will introduce breaking changes and new features.

Common errors

error TypeError: (intermediate value).DataTable is not a function ↓

cause Trying to call $(...).DataTable() without proper import or before jQuery is loaded.

fix

Use the module import: import DataTable from 'datatables.net'; new DataTable('#table');

error Error: Cannot find module 'jquery' ↓

cause jQuery is not installed as a dependency.

fix

Run npm install jquery and import it before DataTables.

error TS2322: Type 'undefined' is not assignable to type 'Config' ↓

cause Trying to use import { Config } from 'datatables.net' at runtime instead of using type-only import.

fix

Use import type { Config } from 'datatables.net' for TypeScript.

Warnings

breaking DataTables v2 drops the $.fn.dataTable jQuery API. Use the importable DataTable constructor instead. ↓

fix Replace $(...).DataTable() with new DataTable(...) and import DataTable from 'datatables.net'.

deprecated Using $('#table').DataTable() is deprecated in v2 and removed in v3 beta. ↓

fix Use new DataTable('#table') from the module instead.

gotcha DataTables requires jQuery to be loaded before importing DataTable. Failing to do so results in a runtime error: 'jQuery is not defined'. ↓

fix Ensure jQuery is installed and imported: import $ from 'jquery'; then import DataTable.

gotcha When using DataTables with webpack or similar bundlers, the default import might be undefined if jQuery is not properly provided. ↓

fix Use webpack.ProvidePlugin to expose jQuery globally or use imports-loader.

Install

npm install datatables.net

yarn add datatables.net

pnpm add datatables.net

Imports

DataTable
wrong
```
const DataTable = require('datatables.net')
```
correct
```
import DataTable from 'datatables.net'
```
Default export provides the DataTable constructor. In CJS environments, use require('datatables.net') with CommonJS, but TypeScript types are designed for ESM default import.

wrong

import DataTable from 'datatables.net'; (missing jQuery import)

correct

import $ from 'jquery'; import DataTable from 'datatables.net'

DataTables requires jQuery globally. Import jQuery separately and ensure it's loaded before DataTables.

type Config

wrong

import { Config } from 'datatables.net' (runtime import)

correct

import type { Config } from 'datatables.net'

Config is a TypeScript type/interface. Use type-only import to avoid runtime errors.

Quickstart

Creates a new DataTable instance from an HTML table element with data, enabling pagination, search, and sorting.

import $ from 'jquery';
import DataTable from 'datatables.net';

const table = new DataTable('#myTable', {
  paging: true,
  searching: true,
  ordering: true,
  pageLength: 10,
  serverSide: false,
  columns: [
    { data: 'name' },
    { data: 'position' },
    { data: 'office' },
    { data: 'age' },
    { data: 'salary' }
  ],
  data: [
    { name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', age: 61, salary: '$320,800' },
    { name: 'Garrett Winters', position: 'Accountant', office: 'Tokyo', age: 63, salary: '$170,750' }
  ]
});

console.log(table.rows().count());