Examples › Sorting | Mantine DataTable

Examples › Sorting

Name	Street address	City	State
Connelly, Feest and Hodkiewicz	7057 Stanley Road	Kearaburgh	CA
Cummerata - Kuhlman	6389 Dicki Stream	South Gate	NH
Doyle, Hodkiewicz and O'Connell	576 Joyce Ways	Tyraburgh	KS
Feest, Bogan and Herzog	21716 Ratke Drive	Stromanport	WY
Goldner, Rohan and Lehner	632 Broadway Avenue	North Louie	WY
Goyette Inc	8873 Mertz Rapid	Dorthyside	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID
Kling - McLaughlin	8346 Kertzmann Square	South Joesph	ID
Rau - O'Hara	7508 Lansdowne Road	Shieldsborough	MI
Runte Inc	2996 Ronny Mount	McAllen	MA
Shanahan, Robel and Beier	378 Berta Crescent	West Gerry	KS
Tillman - Jacobi	57918 Gwendolyn Circles	Sheridanport	MI

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.

'use client';

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

export default function SortingExample() {
  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<Company>>({
    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
      withTableBorder
      withColumnBorders
      records={records}
      columns={[
        { accessor: 'name', width: '40%', sortable: true },
        { accessor: 'streetAddress', width: '60%' },
        { accessor: 'city', width: 160, sortable: true },
        { accessor: 'state', textAlign: 'right', 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:

'use client';

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

export default function SortingExampleCustomIcons() {
  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<Company>>({
    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
      withTableBorder
      withColumnBorders
      records={records}
      columns={[
        { accessor: 'name', width: '40%', sortable: true },
        { accessor: 'streetAddress', width: '60%' },
        { accessor: 'city', width: 160, sortable: true },
        { accessor: 'state', textAlign: 'right', sortable: true },
      ]}
      sortStatus={sortStatus}
      onSortStatusChange={setSortStatus}
      sortIcons={{
        sorted: <IconChevronUp size={14} />,
        unsorted: <IconSelector size={14} />,
      }}
    />
  );
}

Name	Street address	City	State
Connelly, Feest and Hodkiewicz	7057 Stanley Road	Kearaburgh	CA
Cummerata - Kuhlman	6389 Dicki Stream	South Gate	NH
Doyle, Hodkiewicz and O'Connell	576 Joyce Ways	Tyraburgh	KS
Feest, Bogan and Herzog	21716 Ratke Drive	Stromanport	WY
Goldner, Rohan and Lehner	632 Broadway Avenue	North Louie	WY
Goyette Inc	8873 Mertz Rapid	Dorthyside	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID
Jogi - McLaughlin	83462 Shazam Street	North Joesph	ID
Kling - McLaughlin	8346 Kertzmann Square	South Joesph	ID
Rau - O'Hara	7508 Lansdowne Road	Shieldsborough	MI
Runte Inc	2996 Ronny Mount	McAllen	MA
Shanahan, Robel and Beier	378 Berta Crescent	West Gerry	KS
Tillman - Jacobi	57918 Gwendolyn Circles	Sheridanport	MI