MRT logoMantine React Table

On This Page

    Density Toggle Feature Guide

    Mantine React Table includes a density toggle button in the top toolbar by default where a user can toggle between 3 different density levels. This is a great feature to include to help with accessibility for different user preferences, but it can easily be disabled if it is not wanted.

    Relevant Table Options

    Prop Name
    Default Value
    More Info Links
    1booleantrueMRT Density Toggle Docs
    2OnChangeFn<MRT_DensityState>MRT Density Toggle Docs

    Relevant State

    State Option
    Default Value
    More Info Links
    1'xs' | 'sm' | 'md' | 'lg' | 'xl''md'

    Default Density

    By default, Mantine React Table will render with a medium md density.

    A density toggle is shown by default to let a user change the density to cycle through xl, md, and xs densities.

    When a xs 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 mantineTableBodyCellProps styles or sx prop.

    Change Default Density

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

    const table = useMantineReactTable({
      initialState: { density: 'xs' },

    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 xs density is set by default in the initialState prop.

    First Name
    Last Name
    DylanMurray261 Erdman FordEast DaphneKentucky
    RaquelKohler769 Dominic GroveColumbusOhio
    ErvinReinger566 Brakus InletSouth LindaWest Virginia
    BrittanyMcCullough722 Emie StreamLincolnNebraska
    BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina

    Rows per page

    1-5 of 5

    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 { useMemo } from 'react';
    import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
    import { data, type Person } from './makeData';
    const Example = () => {
      const columns = useMemo(
        () =>
              accessorKey: 'firstName',
              header: 'First Name',
              accessorKey: 'lastName',
              header: 'Last Name',
              accessorKey: 'address',
              header: 'Address',
              accessorKey: 'city',
              header: 'City',
              accessorKey: 'state',
              header: 'State',
          ] as MRT_ColumnDef<Person>[],
      return (
          initialState={{ density: 'xs' }}
    export default Example;