Headless hooks

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

interface Person {
  id: number;
  name: string;
  email: string;
  role: string;
}

const columns: TableColumn<Person>[] = [
  { id: 'name', name: 'Name', selector: row => row.name, sortable: true },
  { id: 'email', name: 'Email', selector: row => row.email },
  { id: 'role', name: 'Role', selector: row => row.role },
];

function MyTable({ data }: { data: Person[] }) {
  const [rowsPerPage] = useState(10);

  // 1. Column order + drag state
  const { tableColumns, defaultSortColumn, defaultSortDirection } = useColumns(
    columns,
    () => {}, // onColumnOrderChange
    undefined, // onColumnGroupOrderChange
    undefined, // columnGroups
    null, // defaultSortFieldId
    true, // defaultSortAsc
  );

  // 2. Sort / page / selection state
  const { tableState, handleSort, handleChangePage } = useTableState({
    data,
    keyField: 'id',
    defaultSortColumn,
    defaultSortDirection,
    paginationDefaultPage: 1,
    paginationPerPage: rowsPerPage,
    paginationServer: false,
    paginationServerOptions: {},
    paginationTotalRows: 0,
    pagination: true,
    selectableRowsSingle: false,
    selectableRowsVisibleOnly: false,
    selectableRowSelected: null,
    clearSelectedRows: false,
    paginationResetDefaultPage: false,
    onSelectedRowsChange: () => {},
    onSort: () => {},
    onChangePage: () => {},
    onChangeRowsPerPage: () => {},
  });

  const { selectedColumn, sortDirection, sortColumns, currentPage } = tableState;

  // 3. Sorted + paginated rows
  const { tableRows } = useTableData({
    data,
    columns: tableColumns,
    selectedColumn,
    sortDirection,
    sortColumns,
    currentPage,
    rowsPerPage,
    pagination: true,
    paginationServer: false,
    sortServer: false,
    sortFunction: null,
    onSort: () => {},
  });

  // 4. Optional: per-column filtering (uncontrolled — internal state)
  const { filteredData } = useColumnFilter(tableColumns);

  const rows = filteredData(tableRows);

  return (
    <div>
      <table>
        <thead>
          <tr>
            {tableColumns.map(col => (
              <th
                key={col.id}
                onClick={() =>
                  col.sortable &&
                  handleSort({
                    type: 'SORT_CHANGE',
                    selectedColumn: col,
                    clearSelectedOnSort: false,
                    additive: false,
                    defaultSortDirection: SortOrder.ASC,
                  })
                }
              >
                {col.name}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) => (
            <tr key={row.id}>
              {tableColumns.map(col => (
                <td key={col.id}>{col.selector?.(row, i)}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <button onClick={() => handleChangePage(currentPage + 1)}>Next page</button>
    </div>
  );
}

function useColumns<T>(
  columns: TableColumn<T>[],
  onColumnOrderChange: (nextOrder: TableColumn<T>[]) => void,
  onColumnGroupOrderChange: ((nextGroups: ColumnGroup[], nextColumns: TableColumn<T>[]) => void) | undefined,
  columnGroups: ColumnGroup[] | undefined,
  defaultSortFieldId: string | number | null | undefined,
  defaultSortAsc: boolean,
): ColumnsHook<T>;

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

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

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

function useColumnFilter<T>(
  columns: TableColumn<T>[],
  controlledFilterValues?: Record<string | number, FilterState>,
  onFilterChange?: (columnId: string | number, filter: FilterState) => void,
): 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,
    selectableRows: false,
    expandableRows: false,
    expandableRowsHideExpander: false,
    effectiveColumns: columns,
    filteredTableRowCount: data.length,
    showTableHead: false,
  });

  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.MouseEvent) => 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>
  );
}

// Server-side: you manage the rows, just use useTableState for UI state
const { tableState, handleSort, handleChangePage } = useTableState({ ..., paginationServer: true });

// When tableState changes, fire your own API call. No useTableData needed.
useEffect(() => {
  fetchPage(tableState.currentPage, tableState.rowsPerPage, tableState.sortDirection);
}, [tableState.currentPage, tableState.rowsPerPage, tableState.sortDirection]);

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