Examples › Sorting

Name	Street address	City	State
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Johnston LLC	230 Julie Lake	Hartford	KY
Kub and Sons	8699 Upton Fords	East Providence	IN
Mueller, Hodkiewicz and Beahan	21751 Elisa Village	Grand Prairie	WA
Nicolas Group	09622 Marcel Place	Highland	OR
Runolfsdottir - Cummerata	102 Konopelski Greens	Missouri City	KY
Schmidt and Sons	286 Leif Lock	Collierville	AL
Sipes Inc	280 Rigoberto Divide	Twin Falls	MT
Welch - Tremblay	31622 Isobel Fall	Olathe	AR

No records

In order to enable sorting, you’ll have to:

add a sortable: true property to each sorting candidate column;
add a sortStatus property to the DataTable component, pointing to an object describing the current sort status;
add a handler called onSortStatusChange to the DataTable to perform the required action when a sortable column header is clicked.

import sortBy from 'lodash/sortBy';
import { DataTable, DataTableSortStatus } from 'mantine-datatable';
import { useEffect, useState } from 'react';
import { companies, type Company } from '~/data';

export default function SortingExample() {
  const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({ columnAccessor: 'name', direction: 'asc' });
  const [records, setRecords] = useState(sortBy(companies, 'name'));

  useEffect(() => {
    const data = sortBy(companies, sortStatus.columnAccessor) as Company[];
    setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
  }, [sortStatus]);

  return (
    <DataTable
      withBorder
      withColumnBorders
      records={records}
      columns={[
        { accessor: 'name', width: '40%', sortable: true },
        { accessor: 'streetAddress', width: '60%' },
        { accessor: 'city', width: 160, sortable: true },
        { accessor: 'state', sortable: true },
      ]}
      sortStatus={sortStatus}
      onSortStatusChange={setSortStatus}
    />
  );
}

If you enable sorting, you might want to consider disabling text selection; otherwise, repeatedly clicking on the same column header will naturally result in a text selection on the column title text, which may be annoying for some users.

Custom sort icons

If you want to use custom icons for sorting, you can pass them to the sortIcons prop:

import { IconChevronUp, IconSelector } from '@tabler/icons-react';
import sortBy from 'lodash/sortBy';
import { DataTable, DataTableSortStatus } from 'mantine-datatable';
import { useEffect, useState } from 'react';
import { companies, type Company } from '~/data';

export default function SortingExampleCustomIcons() {
  const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({ columnAccessor: 'name', direction: 'asc' });
  const [records, setRecords] = useState(sortBy(companies, 'name'));

  useEffect(() => {
    const data = sortBy(companies, sortStatus.columnAccessor) as Company[];
    setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
  }, [sortStatus]);

  return (
    <DataTable
      withBorder
      withColumnBorders
      records={records}
      columns={[
        { accessor: 'name', width: '40%', sortable: true },
        { accessor: 'streetAddress', width: '60%' },
        { accessor: 'city', width: 160, sortable: true },
        { accessor: 'state', sortable: true },
      ]}
      sortStatus={sortStatus}
      onSortStatusChange={setSortStatus}
      sortIcons={{
        sorted: <IconChevronUp size={14} />,
        unsorted: <IconSelector size={14} />,
      }}
    />
  );
}

Name	Street address	City	State
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Johnston LLC	230 Julie Lake	Hartford	KY
Kub and Sons	8699 Upton Fords	East Providence	IN
Mueller, Hodkiewicz and Beahan	21751 Elisa Village	Grand Prairie	WA
Nicolas Group	09622 Marcel Place	Highland	OR
Runolfsdottir - Cummerata	102 Konopelski Greens	Missouri City	KY
Schmidt and Sons	286 Leif Lock	Collierville	AL
Sipes Inc	280 Rigoberto Divide	Twin Falls	MT
Welch - Tremblay	31622 Isobel Fall	Olathe	AR