Row Numbers Feature Guide

Mantine React Table has an easy to implement row number features. There are two row number modes that you can enable. You can have row numbers that are associated with the data in the table (original mode), or you can have row numbers that are just statically part of the table (static mode).

Relevant Table Options

#	Type	Default Value	More Info Links
1	`boolean`		Row Numbers Feature Guide

2	`'original' \| 'static'`	`'static'`

Enable Row Numbers (Static Mode)

In the default rowNumberDisplayMode (static), row numbers are just a static part of the table in their own column. They act like the row numbers in an excel spreadsheet. Sorting and filtering will not affect the row numbers.

Demo

#	First Name	Last Name	Address	City	State
1	Dylan	Murray	261 Erdman Ford	East Daphne	Kentucky
2	Raquel	Kohler	769 Dominic Grove	Columbus	Ohio
3	Ervin	Reinger	566 Brakus Inlet	South Linda	West Virginia
4	Brittany	McCullough	722 Emie Stream	Lincoln	Nebraska
5	Branson	Frami	32188 Larkin Turnpike	Charleston	South Carolina

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
import { columns, data } from './makeData';

const Example = () => {
  const table = useMantineReactTable({
    columns,
    data,
    enableRowNumbers: true,
    rowNumberDisplayMode: 'static', //default
  });

  return <MantineReactTable table={table} />;
};

export default Example;

Enable Row Numbers (Original Mode)

Alternatively, use the "original" rowNumberDisplayMode to have row numbers linked to the original index of the data array. This means that when you search or filter, the same row numbers will stay with the same rows as data is sorted and filtered.

Demo

#	First Name	Last Name	Address	City	State
1	Dylan	Murray	261 Erdman Ford	East Daphne	Kentucky
2	Raquel	Kohler	769 Dominic Grove	Columbus	Ohio
3	Ervin	Reinger	566 Brakus Inlet	South Linda	West Virginia
4	Brittany	McCullough	722 Emie Stream	Lincoln	Nebraska
5	Branson	Frami	32188 Larkin Turnpike	Charleston	South Carolina

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
import { columns, data } from './makeData';

const Example = () => {
  const table = useMantineReactTable({
    columns,
    data,
    enableRowNumbers: true,
    rowNumberDisplayMode: 'original',
  });

  return <MantineReactTable table={table} />;
};

export default Example;

View Extra Storybook Examples