Row selection
Add selectableRows to enable checkbox-based multi-select.
Use the imperative ref API to clear selection programmatically.
⚠ keyField is required for reliable selection
DataTable uses keyField to uniquely identify each row. Tracking checked state across
sorts, page changes, and re-renders. It defaults to "id". If your rows use a
different unique field, set it explicitly:
<DataTable selectableRows keyField="deviceId" columns={columns} data={data} />
If keyField resolves to undefined on any row, selection state will
be unreliable and the table will log a console warning. TypeScript also catches explicit
mismatches at compile time since keyField is typed as keyof T.
Multi-select with imperative clear
Select rows, then clear with the button. Toggle single-select mode or disable 'On Leave' rows with the checkboxes.
import { useState, useRef } from 'react';
import DataTable, { type TableColumn, type DataTableHandle } from 'react-data-table-component';
interface Employee {
id: number;
name: string;
role: string;
department: string;
status: 'Active' | 'On Leave';
}
const data: Employee[] = [
{ id: 1, name: 'Aria Chen', role: 'Engineering Lead', department: 'Engineering', status: 'Active' },
{ id: 2, name: 'Marcus Webb', role: 'Product Manager', department: 'Product', status: 'Active' },
{ id: 3, name: 'Priya Kapoor', role: 'Senior Designer', department: 'Design', status: 'On Leave' },
{ id: 4, name: 'Jordan Ellis', role: 'Data Scientist', department: 'Analytics', status: 'Active' },
{ id: 5, name: 'Sam Rivera', role: 'DevOps Engineer', department: 'Engineering', status: 'On Leave' },
{ id: 6, name: 'Taylor Brooks', role: 'Account Manager', department: 'Sales', status: 'Active' },
];
const columns: TableColumn<Employee>[] = [
{ name: 'Name', selector: r => r.name, sortable: true },
{ name: 'Role', selector: r => r.role },
{ name: 'Department', selector: r => r.department, sortable: true },
{ name: 'Status', selector: r => r.status },
];
export default function App() {
const [selectedRows, setSelectedRows] = useState<Employee[]>([]);
const [single, setSingle] = useState(false);
const [disableOnLeave, setDisableOnLeave] = useState(false);
const ref = useRef<DataTableHandle>(null);
return (
<div>
<label>
<input type="checkbox" checked={single} onChange={e => setSingle(e.target.checked)} />
{' '}Single select
</label>
<label>
<input type="checkbox" checked={disableOnLeave} onChange={e => setDisableOnLeave(e.target.checked)} />
{' '}Disable "On Leave" rows
</label>
<button onClick={() => ref.current?.clearSelectedRows()}>Clear selection</button>
{selectedRows.length > 0 && (
<span>{selectedRows.length} selected: {selectedRows.map(r => r.name).join(', ')}</span>
)}
<DataTable
ref={ref}
columns={columns}
data={data}
keyField="id"
selectableRows
selectableRowsSingle={single}
selectableRowDisabled={disableOnLeave ? (r => r.status === 'On Leave') : undefined}
onSelectedRowsChange={({ selectedRows }) => setSelectedRows(selectedRows)}
highlightOnHover
/>
</div>
);
}Single select
Pass selectableRowsSingle to restrict to one row at a time.
Disable specific rows
Pass a predicate to selectableRowDisabled to prevent specific rows from being
checked. Disabled rows render with a greyed-out checkbox that cannot be interacted with.
Toggle "Disable 'On Leave' rows" in the demo above to see this in action.
// Prevent rows matching a condition from being selected
<DataTable
selectableRows
selectableRowDisabled={row => row.status === 'On Leave'}
/>Pre-select rows
<DataTable
selectableRows
selectableRowSelected={row => row.status === 'Active'}
/>onSelectedRowsChange
The callback receives { allSelected, selectedCount, selectedRows }.
<DataTable
selectableRows
onSelectedRowsChange={({ selectedCount, selectedRows }) => {
console.log(`${selectedCount} rows selected`, selectedRows);
}}
/>Clearing selection (imperative API)
Use a ref to call clearSelectedRows(). This is the recommended approach
that avoids the toggle-boolean bug present in older versions.
const tableRef = useRef<DataTableHandle>(null);
tableRef.current?.clearSelectedRows();Highlight selected rows
Add selectableRowsHighlight to apply the theme's selected-row background
to checked rows, giving an obvious visual confirmation of selection state.
<DataTable selectableRows selectableRowsHighlight />Hide "select all" checkbox
Pass selectableRowsNoSelectAll to remove the header checkbox entirely.
Useful when you want per-row selection without a bulk-select affordance.
<DataTable selectableRows selectableRowsNoSelectAll />Select only visible rows
When pagination is enabled, selectableRowsVisibleOnly makes the "select all"
checkbox operate only on the current page rather than the full dataset.
<DataTable selectableRows pagination selectableRowsVisibleOnly />Custom checkbox component
Replace the built-in checkbox with your own component via selectableRowsComponent.
Extra props can be forwarded through selectableRowsComponentProps.
import Checkbox from '@mui/material/Checkbox';
<DataTable
selectableRows
selectableRowsComponent={Checkbox}
selectableRowsComponentProps={{ color: 'primary' }}
/>