MRT logoMaterial React Table

    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

    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 Code SandboxOpen on GitHub
    1DylanMurray261 Erdman FordEast DaphneKentucky
    2RaquelKohler769 Dominic GroveColumbusOhio
    3ErvinReinger566 Brakus InletSouth LindaWest Virginia
    4BrittanyMcCullough722 Emie StreamLincolnNebraska
    5BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina

    Rows per page

    1-5 of 5

    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...
    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.


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

    Rows per page

    1-5 of 5

    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...
    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