Getting started

react-data-table-component is a batteries-included React table with sorting, pagination, row selection, expandable rows, themes, and animations, all in one package. React 18+ required. No other peer dependencies.

Installation

npm install react-data-table-component

That's it. No CSS import required.

Minimal example

import DataTable from 'react-data-table-component';

const columns = [
  { name: 'Name',       selector: row => row.name,   sortable: true },
  { name: 'Role',       selector: row => row.role },
  { name: 'Salary',     selector: row => row.salary, right: true },
];

const data = [
  { id: 1, name: 'Aria Chen',   role: 'Engineering Lead', salary: 155000 },
  { id: 2, name: 'Marcus Webb', role: 'Product Manager',  salary: 132000 },
];

export default function App() {
  return <DataTable columns={columns} data={data} pagination />;
}

That renders a fully functional table with client-side sorting and pagination.

Common props at a glance

Prop Type Description
columnsTableColumn<T>[]Column definitions (required)
dataT[]Row data (required)
paginationbooleanEnable built-in pagination
selectableRowsbooleanEnable row checkboxes
expandableRowsbooleanEnable expandable row panels
themestringNamed theme (e.g. "slate-dark")
animateRowsbooleanStaggered row entrance + sort animation
columnSeparatorboolean | "full"Body column separators (headers always shown)

See the full API reference for all props.

Row identity and keyField

Each row needs a stable unique identifier so DataTable can track selection state, expansion state, and React keys. By default it looks for an id field on each row object.

If your data uses a different field name, set keyField: 

// Your rows use deviceIdentifier instead of id
<DataTable
  keyField="deviceIdentifier"
  columns={columns}
  data={devices}
/>

For display-only tables (no row selection) this doesn't affect rendering. DataTable falls back to row index. It only matters when selectableRows is enabled, where a missing keyField will cause selection to break across page changes and sorting.

TypeScript

All props are fully typed. Column types are inferred from your data type. No manual generics needed in most cases. See the TypeScript guide for advanced patterns. 

import DataTable, { type TableColumn } from 'react-data-table-component';

interface Employee {
  id: number;
  name: string;
  salary: number;
}

const columns: TableColumn<Employee>[] = [
  { name: 'Name',   selector: row => row.name },
  { name: 'Salary', selector: row => row.salary },
];

Next steps