Hook reference

import {
  useColumns,
  useTableState,
  useTableData,
  useColumnFilter,
  useColumnVisibility,
  useColumnResize,
  useCellNavigation,
  useTableExport,
  getPinnedOffsets,
  getPinnedTotalWidths,
  getPinnedCellMeta,
} from 'react-data-table-component/headless';

function useColumns<T>(
  columns: TableColumn<T>[],
  options?: {
    onColumnOrderChange?: (nextOrder: TableColumn<T>[]) => void;
    onColumnGroupOrderChange?: (nextGroups: ColumnGroup[], nextColumns: TableColumn<T>[]) => void;
    columnGroups?: ColumnGroup[];
    defaultSortFieldId?: string | number | null;
    defaultSortAsc?: boolean; // default true
  },
): UseColumnsResult<T>;

const { tableColumns, columnDrag, draggingColumnId } = useColumns(columns);

{tableColumns.map(col => (
  <th
    key={col.id}
    data-column-id={col.id}
    draggable
    onDragStart={columnDrag.onDragStart}
    onDragEnter={columnDrag.onDragEnter}
    onDragOver={columnDrag.onDragOver}
    onDragLeave={columnDrag.onDragLeave}
    onDragEnd={columnDrag.onDragEnd}
    onPointerDown={columnDrag.onPointerDown} // touch and pen
    style={{ opacity: draggingColumnId === String(col.id) ? 0.5 : 1 }}
  >
    {col.name}
  </th>
))}

function useTableState<T>(props: UseTableStateProps<T>): UseTableStateReturn<T>;

const { tableState, handleSelectedRow } = useTableState({ data });
const isSelected = (row: Person) => tableState.selectedRows.some(r => r.id === row.id);

<input
  type="checkbox"
  checked={isSelected(row)}
  onChange={() =>
    handleSelectedRow({
      type: 'SELECT_SINGLE_ROW',
      keyField: 'id',
      row,
      isSelected: isSelected(row), // the state before this click
      rowCount: data.length,
      singleSelect: false,
    })
  }
/>

function useTableData<T>(props: UseTableDataProps<T>): UseTableDataReturn<T>;

import type { FilterState } from 'react-data-table-component';

function useColumnFilter<T>(
  columns: TableColumn<T>[],
  options?: {
    filterValues?: Record<string | number, FilterState>;
    onFilterChange?: (columnId: string | number, filter: FilterState) => void;
    localization?: Localization['filter'];
    rows?: T[];
  },
): UseColumnFilterResult<T>;

function useCellNavigation<T>(options: UseCellNavigationOptions<T>): {
  activeCell: ActiveCell | null;
  handleNavFocus: (e: React.FocusEvent<HTMLDivElement>) => void;
  handleNavKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
};

function Row({ row, rowIndex, columns, activeCell }) {
  return (
    <tr>
      {columns.map((col, colIndex) => (
        <td
          key={col.id}
          data-nav-row={rowIndex}
          data-nav-col={colIndex}
          tabIndex={activeCell?.row === rowIndex && activeCell?.col === colIndex ? 0 : -1}
        >
          {col.selector?.(row, rowIndex)}
        </td>
      ))}
    </tr>
  );
}

function MyTable({ data, columns }) {
  const { activeCell, handleNavFocus, handleNavKeyDown } = useCellNavigation({
    cellNavigation: true,
    effectiveColumns: columns,
    filteredTableRowCount: data.length,
    showTableHead: false, // this table renders no header row
  });

  return (
    <table onFocus={handleNavFocus} onKeyDown={handleNavKeyDown}>
      <tbody>
        {data.map((row, i) => (
          <Row key={row.id} row={row} rowIndex={i} columns={columns} activeCell={activeCell} />
        ))}
      </tbody>
    </table>
  );
}

function useColumnResize(options?: UseColumnResizeOptions): {
  columnWidths: Record<string | number, number>;
  handleResizeStart: (columnId: string | number, e: React.PointerEvent, minWidth?: string) => void;
};

function getPinnedOffsets<T>(
  columns: TableColumn<T>[],
  columnWidths: Record<string | number, number>,
  selectableRows: boolean,
  expandableRows: boolean,
  expandableRowsHideExpander: boolean,
): PinnedOffsets;

function getPinnedTotalWidths<T>(
  columns: TableColumn<T>[],
  columnWidths: Record<string | number, number>,
  selectableRows: boolean,
  expandableRows: boolean,
  expandableRowsHideExpander: boolean,
): { left: number; right: number };

function getPinnedCellMeta<T>(
  column: TableColumn<T>,
  pinnedOffsets: PinnedOffsets | undefined,
  zIndex?: number,
): PinnedCellMeta;

const pinnedOffsets = getPinnedOffsets(columns, columnWidths, false, false, false);

function Cell({ column, pinnedOffsets }: { column: TableColumn<Row>; pinnedOffsets: PinnedOffsets }) {
  const meta = getPinnedCellMeta(column, pinnedOffsets, 1);
  return (
    <td className={meta.className} style={meta.style}>
      {/* ... */}
    </td>
  );
}

function useTableExport<T>(options: UseTableExportOptions<T>): UseTableExportResult;

import {
  useColumns,
  useTableState,
  useTableData,
  useColumnFilter,
  useTableExport,
  type TableColumn,
} from 'react-data-table-component';

const columns: TableColumn<Employee>[] = [
  { id: 'name', name: 'Name', selector: r => r.name },
  { id: 'dept', name: 'Department', selector: r => r.department },
  { id: 'salary', name: 'Salary', selector: r => r.salary },
];

function MyTable({ data }: { data: Employee[] }) {
  const { tableColumns } = useColumns(columns, () => {}, undefined, undefined, null, true);
  const { tableState } = useTableState({ data, keyField: 'id' /* … */ });
  const { tableRows } = useTableData({ data, columns: tableColumns /* … */ });
  const { filterValues, handleFilterChange, filteredData } = useColumnFilter(tableColumns);
  const rows = filteredData(tableRows);

  const { download, copy } = useTableExport({ columns: tableColumns, rows });

  return (
    <div>
      <button onClick={() => download('employees.csv')}>Download CSV</button>
      <button onClick={() => download('employees.json', 'json')}>Download JSON</button>
      <button onClick={() => copy()}>Copy to clipboard</button>
      {/* … your table markup … */}
    </div>
  );
}