MRT logoMaterial React Table

On This Page

    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 Table Options

    1
    boolean
    Row Numbers Feature Guide
    2
    'original' | 'static'
    'original'

    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

    Open StackblitzOpen Code SandboxOpen on GitHub
    1DylanMurray261 Erdman FordEast DaphneKentucky
    2RaquelKohler769 Dominic GroveColumbusOhio
    3ErvinReinger566 Brakus InletSouth LindaWest Virginia
    4BrittanyMcCullough722 Emie StreamLincolnNebraska
    5BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina
    1-5 of 5

    Source Code

    1import { useMemo } from 'react';
    2import {
    3 MaterialReactTable,
    4 useMaterialReactTable,
    5 type MRT_ColumnDef,
    6} from 'material-react-table';
    7import { data, type Person } from './makeData';
    8
    9const Example = () => {
    10 const columns = useMemo<MRT_ColumnDef<Person>[]>(
    11 //column definitions...
    36 );
    37
    38 const table = useMaterialReactTable({
    39 columns,
    40 data,
    41 enableRowNumbers: true,
    42 rowNumberDisplayMode: 'static', // default
    43 });
    44
    45 return <MaterialReactTable table={table} />;
    46};
    47
    48export default Example;
    49

    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

    1DylanMurray261 Erdman FordEast DaphneKentucky
    2RaquelKohler769 Dominic GroveColumbusOhio
    3ErvinReinger566 Brakus InletSouth LindaWest Virginia
    4BrittanyMcCullough722 Emie StreamLincolnNebraska
    5BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina
    1-5 of 5

    Source Code

    1import { useMemo } from 'react';
    2import {
    3 MaterialReactTable,
    4 useMaterialReactTable,
    5 type MRT_ColumnDef,
    6} from 'material-react-table';
    7import { data, type Person } from './makeData';
    8
    9const Example = () => {
    10 const columns = useMemo<MRT_ColumnDef<Person>[]>(
    11 //column definitions...
    36 );
    37
    38 const table = useMaterialReactTable({
    39 columns,
    40 data,
    41 enableRowNumbers: true,
    42 rowNumberDisplayMode: 'original',
    43 });
    44
    45 return <MaterialReactTable table={table} />;
    46};
    47
    48export default Example;
    49

    View Extra Storybook Examples