Row selection

Add selectableRows to enable checkbox-based multi-select. Shift-click extends the selection across a contiguous range. Pass selectedRows to drive selection from outside, or use the imperative ref API to clear it.

New in 8.1.0 — Shift-click range selection (on by default) and a controlled selectedRows prop.

<DataTable selectableRows keyField="deviceId" columns={columns} data={data} />

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>
  );
}

Custom selection toolbar

v8 removed the built-in contextMessage and contextActions props. Use onSelectedRowsChange to drive your own toolbar rendered outside the table — you get full control over layout, copy, and actions. See thebulk-action toolbar recipe for a complete example.

Range selection (Shift-click)

Click one row's checkbox, then Shift-click another to toggle every row in between to match the anchor's intended state. The anchor row is the most recent single toggle. Range selection is enabled by default; opt out with selectableRowsRange={false}.

The behaviour respects selectableRowDisabled — disabled rows in the range are skipped, not toggled. It also stays within the current page when pagination is enabled.

// Default: range selection on
<DataTable selectableRows />

// Disable range selection
<DataTable selectableRows selectableRowsRange={false} />

Controlled selection

Pass selectedRows to drive selection from your own state. The table will render those rows as checked and call onSelectedRowsChange when the user toggles. Match rows by keyField, so the entries you pass in must include the key field.

function App() {
  const [selected, setSelected] = useState<Employee[]>([]);

  return (
    <DataTable
      keyField="id"
      columns={columns}
      data={data}
      selectableRows
      selectedRows={selected}
      onSelectedRowsChange={({ selectedRows }) => setSelected(selectedRows)}
    />
  );
}

Controlled selection is useful when selection lives in URL state, a Redux/Zustand store, or needs to survive remounts. Omit selectedRows to fall back to the table's internal state.

Single select

Pass selectableRowsSingle to restrict to one row at a time. Shift-click range selection is automatically disabled in single-select mode.

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' }} />;

A prop value can also be a function — it is called with the checkbox's indeterminate state (true for the header checkbox when only some rows are selected) and its return value is passed to the component instead. Useful for components that express the indeterminate state through a different prop:

<DataTable
  selectableRows
  selectableRowsComponent={Checkbox}
  selectableRowsComponentProps={{
    indeterminate: (isIndeterminate: boolean) => isIndeterminate,
  }}
/>;

Prop reference