Headless hooks

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

const columns = [
  { id: 1, name: 'Name',  selector: (row) => row.name,  sortable: true },
  { id: 2, name: 'Email', selector: (row) => row.email },
  { id: 3, name: 'Role',  selector: (row) => row.role },
];

function MyTable({ data }) {
  // 1. Column order + drag state
  const { tableColumns, handleDragStart, handleDragEnd } = useColumns(
    columns,
    () => {},   // onColumnOrderChange
    null,       // defaultSortFieldId
    true,       // defaultSortAsc
  );

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

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

  // 3. Sorted + paginated rows
  const { sortedData, tableRows } = useTableData({
    data,
    columns: tableColumns,
    selectedColumn,
    sortDirection,
    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={() => handleSort({ type: 'SORT_CHANGE', sortColumn: col, clearSelectedRows: false })}>
                {col.name}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) => (
            <tr key={i}>
              {tableColumns.map(col => (
                <td key={col.id}>{col.selector?.(row, i)}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function useColumns<T>(
  columns: TableColumn<T>[],
  onColumnOrderChange: (nextOrder: TableColumn<T>[]) => void,
  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>

// 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]);