Sorting

import DataTable, { type TableColumn, SortOrder } from 'react-data-table-component';

const columns: TableColumn<Employee>[] = [
  { id: 'name',   name: 'Name',       selector: r => r.name,       sortable: true },
  { id: 'dept',   name: 'Department', selector: r => r.department, sortable: true },
  { id: 'salary', name: 'Salary',     selector: r => r.salary,     sortable: true,
    format: r => `$${r.salary.toLocaleString()}`, right: true },
  { id: 'hired',  name: 'Hired',      selector: r => r.hired,      sortable: true },
  { id: 'id',     name: 'ID',         selector: r => r.id }, // not sortable
];

<DataTable
  columns={columns}
  data={data}
  defaultSortFieldId="name"
  defaultSortAsc={true}
  onSort={(column, direction) => console.log(column.id, direction)}
  highlightOnHover
/>

import { useState } from 'react';
import DataTable, { type TableColumn, type SortColumn } from 'react-data-table-component';

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

export default function App() {
  const [sortColumns, setSortColumns] = useState<SortColumn<Employee>[]>([]);

  return (
    <DataTable
      columns={columns}
      data={data}
      sortMulti
      // onSort's 4th argument is the full sort config in priority order
      onSort={(column, direction, sortedRows, sortColumns) => setSortColumns(sortColumns)}
      highlightOnHover
    />
  );
}

import DataTable, { SortOrder, type TableColumn, type SortFunction } from 'react-data-table-component';

// ── Pattern 1: custom value ordering ───────────────────────────────────────
// Sort "Active → On Leave → Terminated" instead of alphabetically.
const STATUS_ORDER = { Active: 0, 'On Leave': 1, Terminated: 2 };

const columns: TableColumn<Employee>[] = [
  {
    id: 'status',
    name: 'Status',
    selector: r => STATUS_ORDER[r.status],   // numeric selector drives the sort key
    cell: r => <StatusBadge status={r.status} />,
    sortable: true,
    sortFunction: (a, b) => STATUS_ORDER[a.status] - STATUS_ORDER[b.status],
  },
];

// ── Pattern 2: secondary sort (break ties) ──────────────────────────────────
// When two rows have the same primary value, sort by salary descending as a
// tiebreaker. Wire this as the table-level sortFunction.
const withSecondarySalary: SortFunction<Employee> = (rows, selector, direction) =>
  [...rows].sort((a, b) => {
    const av = selector(a), bv = selector(b);
    const primary = av === bv ? 0 : (av > bv ? 1 : -1) * (direction === SortOrder.ASC ? 1 : -1);
    return primary !== 0 ? primary : b.salary - a.salary;   // salary desc as tiebreaker
  });

import { useState } from 'react';
import DataTable, { type TableColumn, SortOrder } from 'react-data-table-component';

const columns: TableColumn<Employee>[] = [
  { id: 'name',       name: 'Name',       selector: r => r.name,       sortable: true, sortField: 'name' },
  { id: 'department', name: 'Department', selector: r => r.department, sortable: true, sortField: 'department' },
  { id: 'salary',     name: 'Salary',     selector: r => r.salary,     sortable: true, sortField: 'salary',
    right: true, format: r => `$${r.salary.toLocaleString()}` },
  { id: 'hired',      name: 'Hired',      selector: r => r.hired,      sortable: true, sortField: 'hired' },
];

export default function App() {
  const [data, setData]     = useState<Employee[]>(initialData);
  const [loading, setLoading] = useState(false);

  async function handleSort(col: TableColumn<Employee>, dir: SortOrder) {
    const field = col.sortField ?? String(col.id);
    setLoading(true);
    const sorted = await fetch(`/api/employees?sort=${field}&dir=${dir}`).then(r => r.json());
    setData(sorted);
    setLoading(false);
  }

  return (
    <DataTable
      columns={columns}
      data={data}
      progressPending={loading}
      sortServer
      onSort={handleSort}
      highlightOnHover
    />
  );
}

import { useState, useEffect, useCallback } from 'react';
import DataTable, { type TableColumn, SortOrder } from 'react-data-table-component';

export default function App() {
  const [data, setData]           = useState<Employee[]>([]);
  const [loading, setLoading]     = useState(true);
  const [totalRows, setTotal]     = useState(0);
  const [page, setPage]           = useState(1);
  const [perPage, setPerPage]     = useState(10);
  const [sortField, setSortField] = useState('name');
  const [sortDir, setSortDir]     = useState<SortOrder>(SortOrder.ASC);
  const [resetPage, setResetPage] = useState(false);

  const load = useCallback(async (params) => {
    setLoading(true);
    const result = await fetchFromServer(params);
    setData(result.rows);
    setTotal(result.total);
    setLoading(false);
  }, []);

  useEffect(() => { load({ page, perPage, sortField, sortDir }); }, []);

  function handleSort(col: TableColumn<Employee>, dir: SortOrder) {
    const field = col.sortField ?? String(col.id);
    setSortField(field); setSortDir(dir);
    setPage(1); setResetPage(prev => !prev); // reset pagination to page 1 on sort
    load({ page: 1, perPage, sortField: field, sortDir: dir });
  }

  return (
    <DataTable
      columns={columns}
      data={data}
      progressPending={loading}
      sortServer
      onSort={handleSort}
      pagination
      paginationServer
      paginationTotalRows={totalRows}
      paginationResetDefaultPage={resetPage}
      onChangePage={p => { setPage(p); load({ page: p, perPage, sortField, sortDir }); }}
      onChangeRowsPerPage={(pp, p) => { setPerPage(pp); load({ page: p, perPage: pp, sortField, sortDir }); }}
      highlightOnHover
    />
  );
}

import { useRef } from 'react';
import DataTable, { type DataTableHandle } from 'react-data-table-component';

function App() {
  const ref = useRef<DataTableHandle>(null);

  return (
    <>
      <button onClick={() => ref.current?.clearSort()}>Reset sort</button>
      <DataTable
        ref={ref}
        columns={columns}
        data={data}
        defaultSortFieldId="name"
        defaultSortAsc={true}
      />
    </>
  );
}