Row Numbers Feature Guide

Material 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 Props

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

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

Enable Row Numbers (Original Mode)

In the default rowNumberMode (original), the 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 row, though they will not be in the same order when sorted or will skip numbers when filtered.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

#	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

Source Code

1import React, { FC, useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import { data, Person } from './makeData';
4
5const Example: FC = () => {
6  const columns = useMemo<MRT_ColumnDef<Person>[]>(
7    //column definitions...
8    () => [
9      {
10        accessorKey: 'firstName',
11        header: 'First Name',
12      },
13      {
14        accessorKey: 'lastName',
15        header: 'Last Name',
16      },
17      {
18        accessorKey: 'address',
19        header: 'Address',
20      },
21      {
22        accessorKey: 'city',
23        header: 'City',
24      },
25      {
26        accessorKey: 'state',
27        header: 'State',
28      },
29    ],
30    [],
31    
32  );
33
34  return (
35    <MaterialReactTable
36      columns={columns}
37      data={data}
38      enableRowNumbers
39      rowNumberMode="original" //default
40    />
41  );
42};
43
44export default Example;
45

Enable Row Numbers (Static Mode)

Alternatively, if you just want row numbers to always be the same and in order, you can use the static row number mode.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

#	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

Source Code

1import React, { FC, useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import { data, Person } from './makeData';
4
5const Example: FC = () => {
6  const columns = useMemo<MRT_ColumnDef<Person>[]>(
7    () => [
8      //column definitions...
9      {
10        accessorKey: 'firstName',
11        header: 'First Name',
12      },
13      {
14        accessorKey: 'lastName',
15        header: 'Last Name',
16      },
17      {
18        accessorKey: 'address',
19        header: 'Address',
20      },
21      {
22        accessorKey: 'city',
23        header: 'City',
24      },
25      {
26        accessorKey: 'state',
27        header: 'State',
28      },
29      
30    ],
31
32    [],
33  );
34
35  return (
36    <MaterialReactTable
37      columns={columns}
38      data={data}
39      enableRowNumbers
40      rowNumberMode="static"
41    />
42  );
43};
44
45export default Example;
46

View Extra Storybook Examples