Top Related Projects
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡
A lightning fast JavaScript grid/spreadsheet
React components for efficiently rendering large lists and tabular data
Quick Overview
DataTables is a powerful jQuery plugin for creating interactive and feature-rich HTML tables. It enhances standard HTML tables with advanced interaction controls such as pagination, instant search, and multi-column ordering. DataTables is highly flexible and can be customized to meet various data presentation needs.
Pros
- Easy integration with existing HTML tables
- Extensive features including sorting, filtering, and pagination
- Highly customizable with numerous configuration options
- Active community and regular updates
Cons
- Requires jQuery, which may not be ideal for modern JavaScript frameworks
- Can be resource-intensive for very large datasets
- Learning curve for advanced customizations
- Some features require additional plugins or extensions
Code Examples
- Basic initialization:
$(document).ready(function() {
$('#myTable').DataTable();
});
This code initializes DataTables on an existing HTML table with the ID 'myTable'.
- Custom column rendering:
$('#myTable').DataTable({
columns: [
{ data: 'name' },
{ data: 'position' },
{
data: 'salary',
render: function(data, type, row) {
return '$' + data.toLocaleString();
}
}
]
});
This example demonstrates how to customize the rendering of a specific column, in this case formatting a salary field.
- Server-side processing:
$('#myTable').DataTable({
processing: true,
serverSide: true,
ajax: '/api/data'
});
This code sets up DataTables to use server-side processing, fetching data from a specified API endpoint.
Getting Started
To get started with DataTables:
- Include the required files in your HTML:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
- Create an HTML table with a unique ID:
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<!-- Table data goes here -->
</tbody>
</table>
- Initialize DataTables in your JavaScript:
$(document).ready(function() {
$('#myTable').DataTable();
});
This will apply the default DataTables functionality to your table.
Competitor Comparisons
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
Pros of ag-grid
- More feature-rich with advanced functionality like pivoting, grouping, and aggregation
- Better performance for large datasets (100,000+ rows)
- Supports both Angular and React frameworks natively
Cons of ag-grid
- Steeper learning curve due to more complex API
- Community edition has limited features; full functionality requires paid license
- Larger bundle size, which may impact initial load times
Code Comparison
DataTables:
$('#myTable').DataTable({
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' }
]
});
ag-grid:
new agGrid.Grid(gridDiv, {
columnDefs: [
{ field: 'name' },
{ field: 'position' },
{ field: 'salary' }
],
rowData: myData
});
Both libraries offer easy setup for basic tables, but ag-grid provides more configuration options for advanced use cases. DataTables focuses on enhancing existing HTML tables, while ag-grid creates the entire grid structure programmatically. ag-grid's approach allows for more flexibility in terms of customization and dynamic data handling, but may require more initial setup compared to DataTables' simpler integration with existing HTML.
JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡
Pros of Handsontable
- Offers spreadsheet-like functionality with cell editing, formulas, and data validation
- Supports more advanced features like cell merging, nested headers, and custom cell types
- Provides a more Excel-like user experience for complex data manipulation
Cons of Handsontable
- Steeper learning curve due to more complex API and configuration options
- Larger file size and potentially higher performance overhead for simpler use cases
- Commercial license required for some features and enterprise use
Code Comparison
Handsontable initialization:
const hot = new Handsontable(container, {
data: dataset,
rowHeaders: true,
colHeaders: true,
filters: true,
dropdownMenu: true
});
DataTables initialization:
$(document).ready(function() {
$('#myTable').DataTable({
data: dataset,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" }
]
});
});
Both libraries offer powerful data grid solutions, but Handsontable is more suited for complex, spreadsheet-like interactions, while DataTables excels in simpler table display and manipulation scenarios. The choice between them depends on the specific requirements of your project and the level of interactivity needed.
A lightning fast JavaScript grid/spreadsheet
Pros of SlickGrid
- Highly performant with large datasets (100,000+ rows)
- More flexible and customizable for complex grid requirements
- Better suited for dynamic, editable grids with real-time updates
Cons of SlickGrid
- Steeper learning curve and more complex implementation
- Less extensive documentation and community support
- Fewer built-in features and plugins compared to DataTables
Code Comparison
SlickGrid:
var grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onCellChange.subscribe(function (e, args) {
// Handle cell change
});
DataTables:
$('#myTable').DataTable({
data: dataSet,
columns: columnDefs
});
SlickGrid offers more granular control over grid behavior and events, while DataTables provides a simpler setup for basic table functionality. SlickGrid is better suited for complex, high-performance grids, while DataTables excels in ease of use and quick implementation for standard table needs.
React components for efficiently rendering large lists and tabular data
Pros of react-virtualized
- Optimized for rendering large lists and tabular data efficiently
- Supports windowing techniques to render only visible items
- Offers flexible components for various use cases (List, Grid, Table, etc.)
Cons of react-virtualized
- Steeper learning curve compared to DataTables
- Requires more manual configuration and setup
- Less out-of-the-box styling and theming options
Code Comparison
react-virtualized:
import { List } from 'react-virtualized';
<List
width={300}
height={300}
rowCount={1000}
rowHeight={20}
rowRenderer={({ key, index, style }) => (
<div key={key} style={style}>Row {index}</div>
)}
/>
DataTables:
$(document).ready(function() {
$('#myTable').DataTable({
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" }
]
});
});
react-virtualized is better suited for React applications dealing with large datasets, offering superior performance through virtualization. However, it requires more setup and customization. DataTables provides an easier-to-use solution with more built-in features but may not perform as well with very large datasets in complex React applications.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Legacy repository
Please note that this is a legacy repo for DataTables. The main source repo is DataTables/DataTablesSrc.
Our distribution repos (for NPM, Nuget, etc packages) are the DataTables/Dist-* repos - e.g. DataTables/Dist-DataTables. Each distribution repo has a core Javascript file or styling for DataTables or an extension. Please use our download builder to obtain the files you need, including for NPM, Nuget, CDN and download.
DataTables plug-in for jQuery
DataTables is a table enhancing plug-in for the jQuery Javascript library, adding sorting, paging and filtering abilities to plain HTML tables with minimal effort. The stated goal of DataTables is:
To enhance the accessibility of data in HTML tables.
To meet this goal, DataTables is developed with two distinct groups of users in mind:
-
You the developers using DataTables. For developers DataTables provides a wide array of options for how data should be obtained, displayed and acted upon, along with an extensive API for accessing and manipulating the table.
-
End users. For those using the interface DataTables presents, actions to get the most from the information contained in tables, such as sorting and filtering, along with paging and scrolling of the data in table, are easy to use, intuitive and fast.
Installing DataTables
To use DataTables, the primary way to obtain the software is to use the DataTables downloader. You can also include the individual files from the DataTables CDN. See the documentation for full details.
NPM and Bower
If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name datatables.net. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.
Please see the DataTables NPM and Bower installation pages for further information. The DataTables installation manual also has details on how to use package managers with DataTables.
Usage
In its simplest case, DataTables can be initialised with a single line of Javascript:
$('table').dataTable();
where the jQuery selector is used to obtain a reference to the table you want to enhance with DataTables. Optional configuration parameters can be passed in to DataTables to have it perform certain actions by using a configuration object as the parameter passed in to the DataTables constructor. For example:
$('table').dataTable( {
paginate: false,
scrollY: 300
} );
will disable paging and enable scrolling.
A full list of the options available for DataTables are available in the documentation.
Documentation
Full documentation of the DataTables options, API and plug-in interface are available on the DataTables web-site. The site also contains information on the wide variety of plug-ins that are available for DataTables, which can be used to enhance and customise your table even further.
Support
Support for DataTables is available through the DataTables forums and commercial support options are available.
License
DataTables is release under the MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact (specifically the comment block which starts with /*!).
Top Related Projects
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡
A lightning fast JavaScript grid/spreadsheet
React components for efficiently rendering large lists and tabular data
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot