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.
    1
    'semantic' | 'grid'
    'semantic'
    TODO
    2
    BoxProps | ({ table }) => BoxProps
    Mantine Toolbar Docs
    3
    ActionIconProps | (({table, column }) => ActionIconProps);
    Mantine ActionIcon Docs
    4
    ActionIconProps | ({table, column }) => ActionIconProps
    Mantine ActionIcon Docs
    5
    UnstyledButtonProps | ({ cell, column, row, table }) => UnstyledButtonProps
    Mantine UnstyledButton Docs
    6
    ModalProps | ({ row, table }) => ModalProps
    Mantine Modal Docs
    7
    BoxProps | ({ row, table }) => BoxProps
    Mantine Box Docs
    8
    ModalProps | ({ row, table }) => ModalProps
    Mantine Modal Docs
    9
    SelectProps | ({ cell, column, row, table }) => SelectProps
    Mantine Select Docs
    10
    TextInputProps | ({ cell, column, row, table }) => TextInputProps
    Mantine TextInput Docs
    11
    ActionIconProps | ({ table }) => ActionIconProps
    Mantine ActionIcon Docs
    12
    ActionIconProps | ({ row, table }) => ActionIconProps
    Mantine ActionIcon Docs
    13
    AutocompleteProps | ({ column, table, rangeFilterIndex }) => AutocompleteProps
    Mantine Autocomplete Docs
    14
    CheckboxProps | ({ column, table }) => CheckboxProps
    Mantine Checkbox Docs
    15
    MultiSelectProps | ({ column, table }) => MultiSelectProps
    Mantine MultiSelect Docs
    16
    RangeSliderProps | ({ column, table }) => RangeSliderProps
    Mantine Slider Docs
    17
    SelectProps | ({ column, table }) => SelectProps
    Mantine Select Docs
    18
    TextInputProps | ({ table, column, rangeFilterIndex }) => TextInputProps
    Mantine TextInput Docs
    19
    HighlightProps | ({ cell, column, row, table }) => HighlightProps
    Mantine Highlight Docs
    20
    LoadingOverlayProps | ({ table }) => LoadingOverlayProps
    Mantine LoadingOverlay Docs
    21
    PaginationProps & { rowsPerPageOptions?: string[], showRowsPerPage?: boolean; }
    Mantine Pagination Docs
    22
    PaperProps | ({ table }} => PaperProps
    Mantine Paper Docs
    23
    ProgressProps | ({ isTopToolbar, table }) => ProgressProps
    Mantine Progress Docs
    24
    ActionIconProps | ({ row, table }) => ActionIconProps
    Mantine ActionIcon Docs
    25
    TextInputProps | ({ table }) => TextInputProps
    Mantine TextInput Docs
    26
    CheckboxProps | ({ table }) => CheckboxProps
    Mantine Checkbox Docs
    27
    CheckboxProps | ({ row, table }) => CheckboxProps
    Mantine Checkbox Docs
    28
    SkeletonProps | ({ cell, column, row, table }) => SkeletonProps
    Mantine Skeleton Docs
    29
    BoxProps | ({ cell, column, row, table }) => BoxProps
    Mantine Box Docs
    30
    BoxProps | ({ table }) => BoxProps
    Mantine Box Docs
    31
    BoxProps | ({ isDetailPanel, row, staticRowIndex, table }) => BoxProps
    Mantine Box Docs
    32
    BoxProps | ({ table }) => BoxProps
    Mantine Box Docs
    33
    BoxProps| ({table, column }) => BoxProps
    Mantine Box Docs
    34
    BoxProps | ({ table }) => BoxProps);
    Mantine Box Docs
    35
    BoxProps | ({table, footerGroup}) => BoxProps
    Mantine Box Docs
    36
    BoxProps | ({ table, column }) => BoxProps
    Mantine Box Docs
    37
    BoxProps | ({ table }) => BoxProps
    Mantine TableHead Docs
    38
    BoxProps | ({ table, headerGroup}) => BoxProps
    Mantine Box Docs
    39
    TableProps | ({ table }} => TableProps
    Mantine Table Docs
    40
    BadgeProps| ({ table }} => BadgeProps
    Mantine Chip Docs
    41
    AlertProps | ({ table }) => AlertProps
    Mantine Alert Docs
    42
    BoxProps | ({ table }) => BoxProps
    Mantine Toolbar Docs

    Relevant Column Options

    Some of the column options expose the same props as above, but on a per column basis.
    1
    ActionIconProps | ({ column, table }) => ActionIconProps
    Mantine ActionIcon API
    2
    ActionIconProps | ({ column, table }) => ActionIconProps
    Mantine ActionIcon API
    3
    UnstyledButtonProps | ({ cell, column, row, table }) => UnstyledButtonProps
    Mantine UnstyledButton API
    4
    SelectProps | ({ cell, column, row, table }) => SelectProps
    Mantine Select Docs
    5
    TextInputProps | ({ cell, column, row, table }) => TextInputProps
    Mantine TextInput API
    6
    AutocompleteProps | ({ column, table, rangeFilterIndex}) => AutocompleteProps
    Mantine Autocomplete Docs
    7
    CheckboxProps | ({ column, table }) => CheckboxProps
    Mantine Checkbox Props
    8
    MultiSelectProps | ({ column, table }) => MultiSelectProps
    Mantine MultiSelect Docs
    9
    RangeSliderProps | ({ column, table }) => RangeSliderProps
    Mantine Slider Docs
    10
    SelectProps | ({ column, table }) => SelectProps
    Mantine Select Docs
    11
    TextInputProps | ({ column, rangeFilterIndex, table }) => TextInputProps
    Mantine TextInput Docs
    12
    BoxProps | ({ cell, table }) => BoxProps
    Mantine Box API
    13
    BoxProps | ({ column, table }) => BoxProps
    Mantine Box API
    14
    BoxProps | ({ column, table }) => BoxProps
    Mantine 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
    sx: {
    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
    sx: (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.
    sx: {
    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.
    DylanMurray261 Erdman FordEast DaphneKentucky
    RaquelKohler769 Dominic GroveColumbusOhio
    ErvinReinger566 Brakus InletSouth LindaWest Virginia
    BrittanyMcCullough722 Emie StreamLincolnNebraska
    BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina
    1-5 of 5
    1
    import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
    2
    import { MantineProvider, useMantineTheme } from '@mantine/core';
    3
    4
    type Person = {
    5
    firstName: string;
    6
    lastName: string;
    7
    address: string;
    8
    city: string;
    9
    state: string;
    10
    };
    11
    12
    const columns: MRT_ColumnDef<Person>[] = [
    13
    {
    14
    accessorKey: 'firstName',
    15
    header: 'First Name',
    16
    },
    17
    {
    18
    accessorKey: 'lastName',
    19
    header: 'Last Name',
    20
    },
    21
    {
    22
    accessorKey: 'address',
    23
    header: 'Address',
    24
    },
    25
    {
    26
    accessorKey: 'city',
    27
    header: 'City',
    28
    },
    29
    {
    30
    accessorKey: 'state',
    31
    header: 'State',
    32
    },
    33
    ];
    34
    35
    const data = [
    36
    {
    37
    firstName: 'Dylan',
    38
    lastName: 'Murray',
    39
    address: '261 Erdman Ford',
    40
    city: 'East Daphne',
    41
    state: 'Kentucky',
    42
    },
    43
    {
    44
    firstName: 'Raquel',
    45
    lastName: 'Kohler',
    46
    address: '769 Dominic Grove',
    47
    city: 'Columbus',
    48
    state: 'Ohio',
    49
    },
    50
    {
    51
    firstName: 'Ervin',
    52
    lastName: 'Reinger',
    53
    address: '566 Brakus Inlet',
    54
    city: 'South Linda',
    55
    state: 'West Virginia',
    56
    },
    57
    {
    58
    firstName: 'Brittany',
    59
    lastName: 'McCullough',
    60
    address: '722 Emie Stream',
    61
    city: 'Lincoln',
    62
    state: 'Nebraska',
    63
    },
    64
    {
    65
    firstName: 'Branson',
    66
    lastName: 'Frami',
    67
    address: '32188 Larkin Turnpike',
    68
    city: 'Charleston',
    69
    state: 'South Carolina',
    70
    },
    71
    ];
    72
    73
    const Example = () => {
    74
    const globalTheme = useMantineTheme(); //(optional) if you already have a theme defined in your app root, you can import here
    75
    76
    return (
    77
    //Override theme just for this table
    78
    <MantineProvider
    79
    theme={{ ...globalTheme, primaryColor: 'red', primaryShade: 5 }}
    80
    >
    81
    <MantineReactTable
    82
    columns={columns}
    83
    data={data}
    84
    enableRowSelection
    85
    enableColumnOrdering
    86
    enablePinning
    87
    />
    88
    </MantineProvider>
    89
    );
    90
    };
    91
    92
    export default Example;
    1
    import { MantineReactTable } from 'mantine-react-table';
    2
    import { MantineProvider, useMantineTheme } from '@mantine/core';
    3
    4
    const columns = [
    5
    {
    6
    accessorKey: 'firstName',
    7
    header: 'First Name',
    8
    },
    9
    {
    10
    accessorKey: 'lastName',
    11
    header: 'Last Name',
    12
    },
    13
    {
    14
    accessorKey: 'address',
    15
    header: 'Address',
    16
    },
    17
    {
    18
    accessorKey: 'city',
    19
    header: 'City',
    20
    },
    21
    {
    22
    accessorKey: 'state',
    23
    header: 'State',
    24
    },
    25
    ];
    26
    27
    const data = [
    28
    {
    29
    firstName: 'Dylan',
    30
    lastName: 'Murray',
    31
    address: '261 Erdman Ford',
    32
    city: 'East Daphne',
    33
    state: 'Kentucky',
    34
    },
    35
    {
    36
    firstName: 'Raquel',
    37
    lastName: 'Kohler',
    38
    address: '769 Dominic Grove',
    39
    city: 'Columbus',
    40
    state: 'Ohio',
    41
    },
    42
    {
    43
    firstName: 'Ervin',
    44
    lastName: 'Reinger',
    45
    address: '566 Brakus Inlet',
    46
    city: 'South Linda',
    47
    state: 'West Virginia',
    48
    },
    49
    {
    50
    firstName: 'Brittany',
    51
    lastName: 'McCullough',
    52
    address: '722 Emie Stream',
    53
    city: 'Lincoln',
    54
    state: 'Nebraska',
    55
    },
    56
    {
    57
    firstName: 'Branson',
    58
    lastName: 'Frami',
    59
    address: '32188 Larkin Turnpike',
    60
    city: 'Charleston',
    61
    state: 'South Carolina',
    62
    },
    63
    ];
    64
    65
    const Example = () => {
    66
    const globalTheme = useMantineTheme(); //(optional) if you already have a theme defined in your app root, you can import here
    67
    68
    return (
    69
    //Override theme just for this table
    70
    <MantineProvider
    71
    theme={{ ...globalTheme, primaryColor: 'red', primaryShade: 5 }}
    72
    >
    73
    <MantineReactTable
    74
    columns={columns}
    75
    data={data}
    76
    enableRowSelection
    77
    enableColumnOrdering
    78
    enablePinning
    79
    />
    80
    </MantineProvider>
    81
    );
    82
    };
    83
    84
    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
    sx: {
    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:
    <MantineReactTable
    columns={columns}
    data={data}
    mantineTableBodyProps={{
    sx: {
    //stripe the rows, make odd rows a darker color
    '& tr:nth-of-type(odd)': {
    backgroundColor: '#f5f5f5',
    },
    },
    }}
    />

    Stripe Columns Example

    Similarly, if you want to stripe the columns, you can do something like this:
    <MantineReactTable
    columns={columns}
    data={data}
    mantineTableBodyProps={{
    sx: {
    //stripe the rows, make odd rows a darker color
    '& td:nth-of-type(odd)': {
    backgroundColor: '#f5f5f5',
    },
    },
    }}
    mantineTableBodyCellProps={{
    sx: {
    borderRight: '2px solid #e0e0e0', //add a border between columns
    },
    }}
    />
    1DylanSprouseMurray261 Erdman FordEast DaphneKentucky
    2RaquelHakeemKohler769 Dominic GroveColumbusOhio
    3ErvinKrisReinger566 Brakus InletSouth LindaWest Virginia
    4BrittanyKathrynMcCullough722 Emie StreamLincolnNebraska
    5BransonJohnFrami32188 Larkin TurnpikeCharlestonSouth Carolina
    1-5 of 5
    1
    import { useMemo } from 'react';
    2
    import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
    3
    import { data, type Person } from './makeData';
    4
    5
    const Example = () => {
    6
    const columns = useMemo<MRT_ColumnDef<Person>[]>(
    7
    () => [
    8
    {
    9
    accessorKey: 'id',
    10
    header: 'ID',
    11
    size: 50,
    12
    },
    13
    {
    14
    accessorKey: 'firstName',
    15
    header: 'First Name',
    16
    },
    17
    {
    18
    accessorKey: 'middleName',
    19
    header: 'Middle Name',
    20
    },
    21
    {
    22
    accessorKey: 'lastName',
    23
    header: 'Last Name',
    24
    },
    25
    {
    26
    accessorKey: 'address',
    27
    header: 'Address',
    28
    size: 300,
    29
    },
    30
    {
    31
    accessorKey: 'city',
    32
    header: 'City',
    33
    },
    34
    35
    {
    36
    accessorKey: 'state',
    37
    header: 'State',
    38
    },
    39
    ],
    40
    [],
    41
    );
    42
    43
    return (
    44
    <MantineReactTable
    45
    columns={columns}
    46
    data={data}
    47
    mantinePaperProps={{
    48
    shadow: 'none',
    49
    sx: {
    50
    borderRadius: '0',
    51
    border: '1px dashed #e0e0e0',
    52
    },
    53
    }}
    54
    mantineTableProps={{
    55
    striped: true,
    56
    }}
    57
    />
    58
    );
    59
    };
    60
    61
    export default Example;
    1
    import { useMemo } from 'react';
    2
    import { MantineReactTable } from 'mantine-react-table';
    3
    import { data } from './makeData';
    4
    5
    const Example = () => {
    6
    const columns = useMemo(
    7
    () => [
    8
    {
    9
    accessorKey: 'id',
    10
    header: 'ID',
    11
    size: 50,
    12
    },
    13
    {
    14
    accessorKey: 'firstName',
    15
    header: 'First Name',
    16
    },
    17
    {
    18
    accessorKey: 'middleName',
    19
    header: 'Middle Name',
    20
    },
    21
    {
    22
    accessorKey: 'lastName',
    23
    header: 'Last Name',
    24
    },
    25
    {
    26
    accessorKey: 'address',
    27
    header: 'Address',
    28
    size: 300,
    29
    },
    30
    {
    31
    accessorKey: 'city',
    32
    header: 'City',
    33
    },
    34
    35
    {
    36
    accessorKey: 'state',
    37
    header: 'State',
    38
    },
    39
    ],
    40
    [],
    41
    );
    42
    43
    return (
    44
    <MantineReactTable
    45
    columns={columns}
    46
    data={data}
    47
    mantinePaperProps={{
    48
    shadow: 'none',
    49
    sx: {
    50
    borderRadius: '0',
    51
    border: '1px dashed #e0e0e0',
    52
    },
    53
    }}
    54
    mantineTableProps={{
    55
    striped: true,
    56
    }}
    57
    />
    58
    );
    59
    };
    60
    61
    export default Example;
    You can help make these docs better! PRs are Welcome
    Using Material-UI instead of Mantine?
    Check out Material React Table