Overview
The DataTable component is a powerful, flexible, and accessible grid for displaying large amounts of tabular data. It is built on top of TanStack Table (formerly React Table), which provides a headless, unstyled table engine. The DataTable wraps this engine with a complete UI layer including virtualized scrolling, pagination, filtering, sorting, row selection, and built-in dialogs for editing and deleting data.
Provide data and configure columns
To use the DataTable, provide it with an array of objects (tableData) and an array of column definitions (columns).
Locales and formats
Working with locales
Filtering, Sorting, and Selection
The DataTable provides robust capabilities for interacting with your data, including column-based filtering, sorting, and row selection.
Actions: Mass Edit and Delete
The DataTable has built-in mass-action support out of the box. When you configure the table to be selectable=, selecting one or more rows will reveal a contextual action bar at the top of the table.
Column Pinning
The DataTable supports column pinning (also known as frozen columns). This allows you to stick specific columns to the left or right side of the table so they remain visible while the user scrolls horizontally through a wide dataset.
Datatable modes
The DataTable supports different ways of rendering rows (renderMode) and processing data operations like sorting/filtering (processingMode).
Custom data types and cell renderers
If the built-in column types aren't enough for your use case, you can provide a custom React component for your cells, headers, footers, or filter inputs.
API
Below is the complete list of properties for the DataTable component.