MRT logoMaterial React Table

On This Page

    Density Toggle Feature Guide

    Material React Table includes a density toggle button in the top toolbar by default that lets you toggle between three different density levels. This is a great feature to include to help with accessibility for different user preferences, but it can also easily be disabled if desired.

    Relevant Table Options

    1
    boolean
    true
    MRT Density Toggle Docs
    2
    OnChangeFn<MRT_DensityState>
    MRT Density Toggle Docs

    Relevant State

    1
    'comfortable' | 'compact' | 'spacious'
    'comfortable'

    Default Density

    By default, Material React Table will render with a medium comfortable density.

    A density toggle is shown by default to let a user change the density to cycle through spacious, comfortable, and compact densities.

    When a compact density is set, whitespace is set to nowrap by default to keep the rows as short in height as possible. This can be overridden in the muiTableBodyCellProps styles or sx prop.

    Change Default Density

    If you want to change the default density, you can set it in either the initialState table option or the state table option.

    const table = useMaterialReactTable({
    data,
    columns,
    initialState: { density: 'compact' },
    });
    return <MaterialReactTable table={table} />;

    Disable or Hide the Density Toggle

    You can change the default density and disable the density toggle itself if you want.

    In this example, the density toggle is disabled and a compact density is set by default in the initialState table option.

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    DylanMurray261 Erdman FordEast DaphneKentucky
    RaquelKohler769 Dominic GroveColumbusOhio
    ErvinReinger566 Brakus InletSouth LindaWest Virginia
    BrittanyMcCullough722 Emie StreamLincolnNebraska
    BransonFrami32188 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(
    11 //column definitions...
    37 );
    38
    39 const table = useMaterialReactTable({
    40 columns,
    41 data,
    42 enableDensityToggle: false,
    43 initialState: { density: 'compact' },
    44 });
    45
    46 return <MaterialReactTable table={table} />;
    47};
    48
    49export default Example;
    50