MRT logoMantine React Table

On This Page

    Customize (Style) Components Guide

    One of the strengths of Mantine React Table is that it exposes a majority of all the underlying Mantine component props used to build the table.

    Additionally, in one of the sections below, you will learn how to customize and use the Mantine Theme to customize colors, typography, or any other default CSS that is used by Mantine React Table.

    Relevant Table Options

    All props labeled mantine...Props get forwarded to Mantine components. Here is a list of all the props that are exposed in both the root props and column options.

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1'semantic' | 'grid''semantic'TODO
    2BoxProps | ({ table }) => BoxPropsMantine Toolbar Docs
    3ActionIconProps | (({table, column }) => ActionIconProps);Mantine ActionIcon Docs
    4ActionIconProps | ({table, column }) => ActionIconPropsMantine ActionIcon Docs
    5UnstyledButtonProps | ({ cell, column, row, table }) => UnstyledButtonPropsMantine UnstyledButton Docs
    6ModalProps | ({ row, table }) => ModalPropsMantine Modal Docs
    7BoxProps | ({ row, table }) => BoxPropsMantine Box Docs
    8ModalProps | ({ row, table }) => ModalPropsMantine Modal Docs
    9SelectProps | ({ cell, column, row, table }) => SelectPropsMantine Select Docs
    10TextInputProps | ({ cell, column, row, table }) => TextInputPropsMantine TextInput Docs
    11ActionIconProps | ({ table }) => ActionIconPropsMantine ActionIcon Docs
    12ActionIconProps | ({ row, table }) => ActionIconPropsMantine ActionIcon Docs
    13AutocompleteProps | ({ column, table, rangeFilterIndex }) => AutocompletePropsMantine Autocomplete Docs
    14CheckboxProps | ({ column, table }) => CheckboxPropsMantine Checkbox Docs
    15MultiSelectProps | ({ column, table }) => MultiSelectPropsMantine MultiSelect Docs
    16RangeSliderProps | ({ column, table }) => RangeSliderPropsMantine Slider Docs
    17SelectProps | ({ column, table }) => SelectPropsMantine Select Docs
    18TextInputProps | ({ table, column, rangeFilterIndex }) => TextInputPropsMantine TextInput Docs
    19HighlightProps | ({ cell, column, row, table }) => HighlightPropsMantine Highlight Docs
    20LoadingOverlayProps | ({ table }) => LoadingOverlayPropsMantine LoadingOverlay Docs
    21PaginationProps & { rowsPerPageOptions?: string[], showRowsPerPage?: boolean; }Mantine Pagination Docs
    22PaperProps | ({ table }} => PaperPropsMantine Paper Docs
    23ProgressProps | ({ isTopToolbar, table }) => ProgressPropsMantine Progress Docs
    24ActionIconProps | ({ row, table }) => ActionIconPropsMantine ActionIcon Docs
    25TextInputProps | ({ table }) => TextInputPropsMantine TextInput Docs
    26CheckboxProps | ({ table }) => CheckboxPropsMantine Checkbox Docs
    27CheckboxProps | ({ row, table }) => CheckboxPropsMantine Checkbox Docs
    28SkeletonProps | ({ cell, column, row, table }) => SkeletonPropsMantine Skeleton Docs
    29BoxProps | ({ cell, column, row, table }) => BoxPropsMantine Box Docs
    30BoxProps | ({ table }) => BoxPropsMantine Box Docs
    31BoxProps | ({ isDetailPanel, row, table }) => BoxPropsMantine Box Docs
    32BoxProps | ({ table }) => BoxPropsMantine Box Docs
    33BoxProps| ({table, column }) => BoxPropsMantine Box Docs
    34BoxProps | ({ table }) => BoxProps);Mantine Box Docs
    35BoxProps | ({table, footerGroup}) => BoxPropsMantine Box Docs
    36BoxProps | ({ table, column }) => BoxPropsMantine Box Docs
    37BoxProps | ({ table }) => BoxPropsMantine TableHead Docs
    38BoxProps | ({ table, headerGroup}) => BoxPropsMantine Box Docs
    39TableProps | ({ table }} => TablePropsMantine Table Docs
    40BadgeProps| ({ table }} => BadgePropsMantine Chip Docs
    41AlertProps | ({ table }) => AlertPropsMantine Alert Docs
    42BoxProps | ({ table }) => BoxPropsMantine Toolbar Docs

    Relevant Column Options

    Some of the column options expose the same props as above, but on a per column basis.

    #
    Column Option
    Type
    Default Value
    More Info Links
    1ActionIconProps | ({ column, table }) => ActionIconPropsMantine ActionIcon API
    2ActionIconProps | ({ column, table }) => ActionIconPropsMantine ActionIcon API
    3UnstyledButtonProps | ({ cell, column, row, table }) => UnstyledButtonPropsMantine UnstyledButton API
    4SelectProps | ({ cell, column, row, table }) => SelectPropsMantine Select Docs
    5TextInputProps | ({ cell, column, row, table }) => TextInputPropsMantine TextInput API
    6AutocompleteProps | ({ column, table, rangeFilterIndex}) => AutocompletePropsMantine Autocomplete Docs
    7CheckboxProps | ({ column, table }) => CheckboxPropsMantine Checkbox Props
    8MultiSelectProps | ({ column, table }) => MultiSelectPropsMantine MultiSelect Docs
    9RangeSliderProps | ({ column, table }) => RangeSliderPropsMantine Slider Docs
    10SelectProps | ({ column, table }) => SelectPropsMantine Select Docs
    11TextInputProps | ({ column, rangeFilterIndex, table }) => TextInputPropsMantine TextInput Docs
    12BoxProps | ({ cell, table }) => BoxPropsMantine Box API
    13BoxProps | ({ column, table }) => BoxPropsMantine Box API
    14BoxProps | ({ column, table }) => BoxPropsMantine Box API

    Mantine Props and Types

    Each prop can either be passed as an object or as a callback function where you get access to the underlying table instance and any other relevant callback parameters, such as cell, row, column, etc. This lets you easily run conditional logic on the props you pass. Let's take a look at a few examples.

    All mantine...Props props are strongly typed and you should get ts hints as you write them. API docs are available on the Mantine website for each component.

    Static Prop Objects

    <MantineReactTable
      columns={columns}
      data={data}
      enableRowSelection
      //passing the static object variant if no dynamic logic is needed
      mantineSelectCheckboxProps={{
        color: 'violet', //makes all checkboxes use a different color other than the primaryColor
      }}
    />

    Callback Functions to Dynamically Set Prop Values

    <MantineReactTable
      columns={columns}
      data={data}
      enableRowSelection
      //passing the callback function variant. (You should get type hints for all the callback parameters available)
      mantineSelectCheckboxProps={({ row }) => ({
        color: 'violet',
        disabled: row.original.isAccountLocked, //access the row data to determine if the checkbox should be disabled
      })}
    />

    Styling Mantine Components

    Each mantine...Prop has multiple options for you to add styling to the component. You could simply pass className or style props to any mantine...Props prop, but there is also the sx prop.

    The SX Prop

    Note: Mantine V7 (coming out at the end of 2023) is getting rid of emotion and the sx prop. So MRT V2 is going to have very different advice than down below. Consider using CSS modules with the className prop instead of the sx prop. Or just using the style prop. Or consider using Tailwind. ūü§™

    The recommended way to style Mantine components in Mantine React Table will be the sx prop throughout this docs site, as it is both the most simple and the most powerful way to style Mantine components. They can work and be as simple as a style prop, but behind the scenes, they work more like emotion styled-components by using Emotion.

    Do not worry, className and style props will still work, but let's show off some of the more elegant syntax you can use with the sx prop.

    1. The sx prop can be used just a simply as a style prop by default

    <MantineReactTable
      columns={columns}
      data={data}
      mantineTableHeadCellProps={{
        //simple styling with the `sx` prop, works just like a style prop in this example
        style: {
          fontWeight: 'normal',
          fontSize: '14px',
        },
      }}
    />
    1. The sx prop gets easy access to your mantineTheme without you having to call the theme from a useMantineTheme hook.

    <MantineReactTable
      columns={columns}
      data={data}
      mantineTableHeadCellProps={{
        //no useMantineTheme hook needed, just use the `sx` prop with the theme callback
        style: (theme) => ({
          color: theme.colors.red[5],
        }),
      }}
    />
    1. The sx prop gives you a much more concise way to add media queries to your styling.

    <MantineReactTable
      columns={columns}
      data={data}
      mantineTableHeadCellProps={{
        //easier way to create media queries, no useMediaQuery hook needed.
        style: {
          fontSize: '14px',
          '@media (min-width: 600px)': {
            fontSize: '12px',
          },
        },
      }}
    />

    There are many more advantages to using the sx prop, but that is all we will discuss in these docs. You can learn more about it the official Mantine Docs.

    Mantine Theme

    Mantine React Table respects your Mantine Theme. If you have already set up Mantine and a global Mantine Theme, you should already be set. But if you have not, you should visit the official Mantine Theming Docs to learn how to set that up.

    function App() {
      //Have you setup your Mantine Theme globally in your app root?
      return (
        <ThemeProvider theme={createTheme({...})}>
          ...rest of your application
        </ThemeProvider>
      );
    }

    Customize Theme Just for your Table

    Thanks to Mantine allowing you to nest multiple Theme Providers, you can change your Mantine Theme just for the <MantineReactTable /> component by wrapping a <MantineProvider theme={{...}}> around just your table. The values in this theme will only effect the <MantineReactTable /> component, and not the rest of your site. It will also inherit values from your global theme, so you do not have to redefine everything again. You can just tweak the values you want to change.

    import { MantineProvider } from '@mantine/core';
    //in one of your normal components
    return (
      <MantineProvider
        theme={{
          primaryColor: 'blue',
          primaryShade: 8,
          colors: {
            blue: [
              //define 9 custom blue shades
            ],
          },
        }}
      >
        <MantineReactTable columns={columns} data={data} />
      </MantineProvider>
    );

    Important Theme Values used by Mantine React Table

    <MantineReactTable /> will primarily use the following values internally from your Mantine Theme by default:

    • theme.colors[theme.primaryColor[theme.primaryShade]] - used as the primary color for anything colorful in the table (primary buttons, text inputs, checkboxes, dragging borders, etc.)

    • theme.colors.gray[3, 7, 8] - used for some borders

    • theme.colors.dark[7, 8] - used as the default backgroundColor for the entire table in dark mode

    • theme.white - used as the default backgroundColor for the entire table in light mode

    • theme.black - used for some box shadows

    If you want to change some of the colors used by specific components within the table, remember that you can use the sx prop in any of the mantine...Props to override the default styles.

    Custom Mantine Theme Example

    A common use case for this could be if you want to switch your primary and secondary colors, just for this table. Let's take a look at an example that does that, along with some other styling tweaks, so that we can make an ugly table.

    First Name
    Last Name
    Address
    City
    State
    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 { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
    import { MantineProvider, useMantineTheme } from '@mantine/core';
    
    type Person = {
      firstName: string;
      lastName: string;
      address: string;
      city: string;
      state: string;
    };
    
    const columns: MRT_ColumnDef<Person>[] = [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'address',
        header: 'Address',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },
      {
        accessorKey: 'state',
        header: 'State',
      },
    ];
    
    const data = [
      {
        firstName: 'Dylan',
        lastName: 'Murray',
        address: '261 Erdman Ford',
        city: 'East Daphne',
        state: 'Kentucky',
      },
      {
        firstName: 'Raquel',
        lastName: 'Kohler',
        address: '769 Dominic Grove',
        city: 'Columbus',
        state: 'Ohio',
      },
      {
        firstName: 'Ervin',
        lastName: 'Reinger',
        address: '566 Brakus Inlet',
        city: 'South Linda',
        state: 'West Virginia',
      },
      {
        firstName: 'Brittany',
        lastName: 'McCullough',
        address: '722 Emie Stream',
        city: 'Lincoln',
        state: 'Nebraska',
      },
      {
        firstName: 'Branson',
        lastName: 'Frami',
        address: '32188 Larkin Turnpike',
        city: 'Charleston',
        state: 'South Carolina',
      },
    ];
    
    const Example = () => {
      const globalTheme = useMantineTheme(); //(optional) if you already have a theme defined in your app root, you can import here
    
      return (
        //Override theme just for this table
        <MantineProvider
          theme={{ ...globalTheme, primaryColor: 'red', primaryShade: 5 }}
        >
          <MantineReactTable
            columns={columns}
            data={data}
            enableRowSelection
            enableColumnOrdering
            enableColumnPinning
          />
        </MantineProvider>
      );
    };
    
    export default Example;

    Customize Table Paper Styling

    You can customize both the props and the styles of the internal <Paper /> component that wraps the table by passing in a mantinePaperProps prop. This is useful if you want to change the elevation of the paper, or add a border radius, or any other styling you want to do to the paper.

    <MantineReactTable
      columns={columns}
      data={data}
      mantinePaperProps={{
        shadow: 'lg', //use a larger shadow
        //customize paper styles
        style: {
          borderRadius: '0',
          border: '1px dashed #e0e0e0',
        },
      }}
    />

    Customize Table Body, Rows, Columns, and Cells

    Here are a few examples of how you can customize the table body, rows, columns, and cells.

    Stripe Rows Example

    Mantine's Table component has a striped prop that you can use to stripe the rows.

    <MantineReactTable
      columns={columns}
      data={data}
      mantineTableProps={{
        striped: true,
      }}
    />

    But if you want to stripe the rows yourself, you can do something like this:

    .striped {
      & tr:nth-of-type(odd) {
        background-color: '#f5f5f5';
      }
    }
    import classes from './styles.module.css';
    <MantineReactTable
      columns={columns}
      data={data}
      mantineTableBodyProps={{
        className: classes.striped,
      }}
    />