MRT logoMaterial React Table

    Customizing Components Guide

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

    Also down below, you will learn how to customize and use a MUI Theme to customize colors, typography, or an other default CSS that is used by Material React Table.

    Relevant Props

    All of the props labeled mui...Props are props that get forwarded to Material UI 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

    No Description Provided... Yet...

    2
    IconButtonProps | ({ table }) => IconButtonProps
    Material UI IconButton Props

    No Description Provided... Yet...

    3
    IconButtonProps | ({ row, table }) => IconButtonProps
    Material UI IconButton Props

    No Description Provided... Yet...

    4
    LinearProgressProps | ({ isTopToolbar, table }) => LinearProgressProps
    Material UI LinearProgress Props

    No Description Provided... Yet...

    5
    TextFieldProps | ({ table }) => TextFieldProps
    Material UI TextField Props

    No Description Provided... Yet...

    6
    CheckboxProps | ({ table }) => CheckboxProps
    Material UI Checkbox Props

    No Description Provided... Yet...

    7
    CheckboxProps | ({ row, table }) => CheckboxProps
    Material UI Checkbox Props

    No Description Provided... Yet...

    8
    ButtonProps | ({ cell, column, row, table }) => ButtonProps
    Material UI Button Props

    No Description Provided... Yet...

    9
    TextFieldProps | ({ cell, column, row, table }) => TextFieldProps
    Material UI TextField Props

    No Description Provided... Yet...

    10
    TableCellProps | ({ cell, column, row, table }) => TableCellProps
    Material UI TableCell Props

    No Description Provided... Yet...

    11
    SkeletonProps | ({ cell, column, row, table }) => SkeletonProps
    Material UI Skeleton Props

    No Description Provided... Yet...

    12
    Material UI TableBody Props

    No Description Provided... Yet...

    13

    No Description Provided... Yet...

    14

    No Description Provided... Yet...

    15

    No Description Provided... Yet...

    16

    No Description Provided... Yet...

    17

    No Description Provided... Yet...

    18

    No Description Provided... Yet...

    19

    No Description Provided... Yet...

    20

    No Description Provided... Yet...

    21

    No Description Provided... Yet...

    22

    No Description Provided... Yet...

    23

    No Description Provided... Yet...

    24

    No Description Provided... Yet...

    25

    No Description Provided... Yet...

    26

    No Description Provided... Yet...

    27
    MUI Paper API Docs

    No Description Provided... Yet...

    28
    TableProps
    MUI TableProps API Docs

    No Description Provided... Yet...

    29

    No Description Provided... Yet...

    30

    No Description Provided... Yet...

    31

    No Description Provided... Yet...

    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
    1
    ButtonProps | ({ cell, column, row, table }) => ButtonProps
    Material UI Button API

    No Description Provided... Yet...

    2
    TextFieldProps | ({ cell, column, row, table }) => TextFieldProps
    Material UI TextField API

    No Description Provided... Yet...

    3
    TableCellProps | ({ cell, table }) => TableCellProps
    Material UI TableCell API

    No Description Provided... Yet...

    4
    TableCellProps | ({ column, table }) => TableCellProps
    Material UI TableCell API

    No Description Provided... Yet...

    5
    IconButtonProps | ({ column, table }) => IconButtonProps
    Material UI IconButton API

    No Description Provided... Yet...

    6
    TextFieldProps | ({ column, rangeFilterIndex, table }) => TextFieldProps
    Material UI TextField Props

    No Description Provided... Yet...

    7
    TableCellProps | ({ column, table }) => TableCellProps
    Material UI TableCell API

    No Description Provided... Yet...

    Material UI 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 let's you easily run conditional logic on the props you pass. Let's take a look at a few examples.

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

    Static Prop Objects

    <MaterialReactTable
    columns={columns}
    data={data}
    enableRowSelection
    //passing the static object variant if no dynamic logic is needed
    muiSelectCheckboxProps={{
    color: 'secondary', //makes all checkboxes use the secondary color
    }}
    />

    Callback Functions to Dynamically Set Prop Values

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

    Styling Material UI Components

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

    Hint: You should just use the sx prop for all styling instead of className or style props.

    The SX Prop

    The recommended way to style Material UI components in Material 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 Material UI components as of Material UI V5. They can work and be as simple as a style prop, but behind the scenes, they work more like emotion styled-components by using mui/system.

    Don't 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

    <MaterialReactTable
    columns={columns}
    data={data}
    muiTableHeadCellProps={{
    //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 muiTheme without you having to call the theme from a useTheme hook.

    <MaterialReactTable
    columns={columns}
    data={data}
    muiTableHeadCellProps={{
    //no useTheme hook needed, just use the `sx` prop with the theme callback
    sx: (theme) => ({
    color: theme.palette.text.secondary,
    }),
    }}
    />
    1. The sx prop gives you a much more concise way to add media queries to your styling.

    <MaterialReactTable
    columns={columns}
    data={data}
    muiTableHeadCellProps={{
    //easier way to create media queries, no useMediaQuery hook needed.
    sx: {
    fontSize: {
    xs: '10px',
    sm: '11px',
    md: '12px',
    lg: '13px',
    xl: '14px',
    },
    },
    }}
    />

    There are a lot 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 Material UI Docs.

    Material UI Theme

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

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

    Customize Theme Just for your Table

    Thanks to Material UI allowing you to nest multiple Theme Providers, you can change your MUI Theme just for the <MaterialReactTable /> component by wrapping a <ThemeProvider theme={createTheme(...)}> around just your table. The values in this theme will only effect the <MaterialReactTable /> component, and not the rest of your site. It will also inherit values from your global theme, so you don't have to redefine everything again. You can just tweak the values you want to change.

    import { createTheme, ThemeProvider } from '@mui/material';
    //in one of your normal components
    return (
    <ThemeProvider theme={createTheme({...})}>
    <MaterialReactTable columns={columns} data={data} />
    </ThemeProvider>
    );

    Important Theme Values used by Material React Table

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

    • theme.palette.background.default - used as the background color for most table components by default

    • theme.palette.divider - used in dividers in menus, and for the column resizing handle

    • theme.palette.info.main - used in the Toolbar Alert Banner and the Toolbar DropZone component

    • theme.palette.primary.main - used as the primary color for anything colorful in the table (input fields, checkboxes, dragging borders, etc)

    Notice that by default, the secondary color isn't used at all. Remember though, that you can always override which color a component uses by passing in a mui...Props prop, like how we changed checkboxes to use the secondary color in the example above.

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


    Demo

    Open Code SandboxOpen on GitHub
    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

    Source Code

    1import React, { FC, useMemo } from 'react';
    2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
    3import { createTheme, ThemeProvider, useTheme } from '@mui/material';
    4
    5type Person = {
    6 firstName: string;
    7 lastName: string;
    8 address: string;
    9 city: string;
    10 state: string;
    11};
    12
    13//column definitions...
    37
    38//data definitions...
    77
    78const Example: FC = () => {
    79 const globalTheme = useTheme(); //(optional) if you already have a theme defined in your app root, you can import here
    80
    81 const tableTheme = useMemo(
    82 () =>
    83 createTheme({
    84 palette: {
    85 mode: globalTheme.palette.mode, //let's use the same dark/light mode as the global theme
    86 primary: globalTheme.palette.secondary, //swap in the secondary color as the primary for the table
    87 info: {
    88 main: 'rgb(255,122,0)', //add in a custom color for the toolbar alert background stuff
    89 },
    90 background: {
    91 default:
    92 globalTheme.palette.mode === 'light'
    93 ? 'rgb(254,255,244)' //random light yellow color for the background in light mode
    94 : '#000', //pure black table in dark mode for fun
    95 },
    96 },
    97 typography: {
    98 button: {
    99 textTransform: 'none', //customize typography styles for all buttons in table by default
    100 fontSize: '1.2rem',
    101 },
    102 },
    103 components: {
    104 MuiTooltip: {
    105 styleOverrides: {
    106 tooltip: {
    107 fontSize: '1.1rem', //override to make tooltip font size larger
    108 },
    109 },
    110 },
    111 MuiSwitch: {
    112 styleOverrides: {
    113 thumb: {
    114 color: 'pink', //change the color of the switch thumb in the columns show/hide menu to pink
    115 },
    116 },
    117 },
    118 },
    119 }),
    120 [globalTheme],
    121 );
    122
    123 return (
    124 <ThemeProvider theme={tableTheme}>
    125 <MaterialReactTable
    126 columns={columns}
    127 data={data}
    128 enableRowSelection
    129 enableColumnOrdering
    130 enablePinning
    131 />
    132 </ThemeProvider>
    133 );
    134};
    135
    136export default Example;
    137