Row selection

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

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

  const selectWhere = (predicate) => setSelected(data.filter(predicate));

  return (
    <>
      <button onClick={() => selectWhere(r => r.status === 'Active')}>Select Active</button>
      <button onClick={() => selectWhere(r => r.role.includes('Engineer'))}>Select Engineers</button>
      <button onClick={() => setSelected(data.filter(r => !selected.some(s => s.id === r.id)))}>
        Invert
      </button>
      <button onClick={() => setSelected([])}>Clear</button>

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

// Default: select all takes the whole dataset, selection survives paging
<DataTable keyField="id" columns={columns} data={data} selectableRows pagination paginationPerPage={3} />

// Page-scoped: select all takes the current page, paging clears the selection
<DataTable
  keyField="id"
  columns={columns}
  data={data}
  selectableRows
  pagination
  paginationPerPage={3}
  selectableRowsVisibleOnly
/>

const VinylCheckbox = forwardRef<HTMLInputElement, Props>(
  ({ accent = '#7c3aed', checked, disabled, ...rest }, ref) => (
    <label className="vinyl-wrap" style={{ '--vinyl-accent': accent }}>
      {/* the ref must land on a real input: DataTable sets .indeterminate on it */}
      <input ref={ref} type="checkbox" checked={checked} disabled={disabled} {...rest} />
      <span className="vinyl-disc" aria-hidden="true">
        <span className="vinyl-label" />
      </span>
    </label>
  ),
);

<DataTable
  keyField="id"
  columns={columns}
  data={data}
  selectableRows
  selectableRowsComponent={VinylCheckbox}
  selectableRowsComponentProps={{ accent }}
  selectableRowDisabled={r => r.id === 4}
/>

/* The input is visually hidden but still present and focusable.
   Everything visible is a sibling driven by :checked / :indeterminate. */
.vinyl-wrap input { position: absolute; inset: 0; opacity: 0; }
.vinyl-wrap input:checked ~ .vinyl-disc { transform: rotate(180deg); }
.vinyl-wrap input:indeterminate ~ .vinyl-disc { box-shadow: 0 0 0 2px #f59e0b; }