MRT logoMaterial React Table

On This Page

    Customize (Style) 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.

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

    Relevant Table Options

    All props labeled mui...Props 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.

    1
    BoxProps | ({ table }) => BoxProps
    Material UI Box Props
    2
    IconButtonProps | (({table, column}) => IconButtonProps);
    Material UI IconButton Props
    3
    IconButtonProps | ({table, column}) => IconButtonProps
    Material UI IconButton Props
    4
    ButtonProps | ({ cell, column, row, table }) => ButtonProps
    Material UI Button Props
    5
    TableCellProps | ({ row, table }) => TableCellProps
    Material UI TableCell Props
    6
    IconButtonProps | ({ table }) => IconButtonProps
    Material UI Dialog Props
    7
    TextFieldProps | ({ cell, column, row, table }) => TextFieldProps
    Material UI TextField Props
    8
    IconButtonProps | ({ table }) => IconButtonProps
    Material UI IconButton Props
    9
    IconButtonProps | ({ row, table }) => IconButtonProps
    Material UI IconButton Props
    10
    AutocompleteProps | ({ column, rangeFilterIndex, table }) => AutocompleteProps
    Material UI Autocomplete Props
    11
    CheckboxProps | ({ column, table}) => CheckboxProps
    Material UI Checkbox Props
    12
    DatePickerProps | ({ column, rangeFilterIndex, table }) => DatePickerProps
    MUI X DatePicker Props
    13
    SliderProps | ({ column, table}) => SliderProps
    Material UI Slider Props
    14
    TextFieldProps | ({ table, column, rangeFilterIndex}) => TextFieldProps
    Material UI TextField Props
    15
    LinearProgressProps | ({ isTopToolbar, table }) => LinearProgressProps
    Material UI LinearProgress Props
    16
    Partial<PaginationProps> | ({ table }) => Partial<PaginationProps>
    Material UI TablePagination Props
    17
    IconButtonProps | ({ row, table }) => IconButtonProps
    Material UI IconButton Props
    18
    TextFieldProps | ({ table }) => TextFieldProps
    Material UI TextField Props
    19
    CheckboxProps | ({ table }) => CheckboxProps
    Material UI Checkbox Props
    20
    CheckboxProps | ({ row, table }) => CheckboxProps
    Material UI Checkbox Props
    21
    SkeletonProps | ({ cell, column, row, table }) => SkeletonProps
    Material UI Skeleton Props
    22
    TableCellProps | ({ cell, column, row, table }) => TableCellProps
    Material UI TableCell Props
    23
    TableBodyProps | ({ table }) => TableBodyProps
    Material UI TableBody Props
    24
    TableRowProps | ({ isDetailPanel, row, table }) => TableRowProps
    { hover: true }
    Material UI TableRow Props
    25
    TableContainerProps | ({ table }) => TableContainerProps
    Material UI TableContainer Props
    26
    TableCellProps| ({table, column}) => TableCellProps
    Material UI TableCell Props
    27
    TableFooterProps | ({ table }) => TableFooterProps);
    Material UI TableFooter Props
    28
    TableRowProps | ({table, footerGroup}) => TableRowProps
    Material UI TableRow Props
    29
    TableCellProps | ({ table, column}) => TableCellProps
    Material UI TableCell Props
    30
    TableHeadProps | ({ table }) => TableHeadProps
    Material UI TableHead Props
    31
    TableRowProps | ({ table, headerGroup}) => TableRowProps
    Material UI TableRow Props
    32
    PaperProps | ({ table }} => PaperProps
    Material UI Paper API Docs
    33
    TableProps | ({ table }} => TableProps
    Material UI TableProps API Docs
    34
    ChipProps| ({ table }} => ChipProps
    Material UI Chip Props
    35
    AlertProps | ({ table }) => AlertProps
    Material UI Alert Props
    36
    BoxProps | ({ table }) => BoxProps
    Material UI Box Props

    Relevant Column Options

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

    1
    IconButtonProps | ({ column, table }) => IconButtonProps
    Material UI IconButton API
    2
    ButtonProps | ({ cell, column, row, table }) => ButtonProps
    Material UI Button API
    3
    TextFieldProps | ({ cell, column, row, table }) => TextFieldProps
    Material UI TextField API
    4
    AutocompleteProps | ({ column, rangeFilterIndex, table }) => AutocompleteProps
    MUI X DatePicker Props
    5
    CheckboxProps | ({ column, table }) => CheckboxProps
    Material UI Checkbox Props
    6
    DatePickerProps | ({ column, rangeFilterIndex, table }) => DatePickerProps
    MUI X DatePicker Props
    7
    SliderProps | ({ column, table}) => SliderProps
    Material UI Slider Props
    8
    TextFieldProps | ({ column, rangeFilterIndex, table }) => TextFieldProps
    Material UI TextField Props
    9
    TableCellProps | ({ cell, table }) => TableCellProps
    Material UI TableCell API
    10
    TableCellProps | ({ column, table }) => TableCellProps
    Material UI TableCell API
    11
    TableCellProps | ({ column, table }) => TableCellProps
    Material UI TableCell API

    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 lets 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

    const table = useMaterialReactTable({
    columns,
    data,
    enableRowSelection: true,
    //passing the static object variant if no dynamic logic is needed
    muiSelectCheckboxProps: {
    color: 'secondary', //makes all checkboxes use the secondary color
    },
    });
    return <MaterialReactTable table={table} />;

    Callback Functions to Dynamically Set Prop Values

    const table = useMaterialReactTable({
    columns,
    data,
    enableRowSelection: true,
    //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
    }),
    });
    return <MaterialReactTable table={table} />;

    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 table option, which is the recommended way to style Material UI components in Material React Table.

    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 table option.

    1. The sx prop can be used just as simply as a style prop by default (though it applies CSS classes using Emotion under the hood).

    const table = useMaterialReactTable({
    columns,
    data,
    muiTableHeadCellProps: {
    //simple styling with the `sx` prop, works just like a style prop in this example
    sx: {
    fontWeight: 'normal',
    fontSize: '14px',
    },
    },
    });
    return <MaterialReactTable table={table} />;
    1. The sx prop gets easy access to your muiTheme without you having to call the theme from a useTheme hook.

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

    const table = useMaterialReactTable({
    columns,
    data,
    muiTableHeadCellProps: {
    //easier way to create media queries, no useMediaQuery hook needed.
    sx: {
    fontSize: {
    xs: '10px',
    sm: '11px',
    md: '12px',
    lg: '13px',
    xl: '14px',
    },
    },
    },
    });
    return <MaterialReactTable table={table} />;
    1. The sx prop still let's you use the & syntax to target nested elements.

    const table = useMaterialReactTable({
    columns,
    data,
    muiTableHeadCellProps: {
    sx: {
    //use the `&` syntax to target nested elements by their class
    '& .Mui-TableHeadCell-Content': {
    padding: '0',
    },
    //use the `&` syntax to target hover state
    '&:hover': {
    fontWeight: 'bold',
    },
    },
    },
    });

    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 Material UI Docs.

    Conditional Styling

    Using the sx, style, or className props and the parameters from the callback functions (cell, column, row, table instance APIs, etc.), you can easily add conditional styling to your Material UI components. Here's a few examples

    Style Selected Rows

    const table = useMaterialReactTable({
    muiTableBodyRowProps: ({ row }) => ({
    //conditionally style selected rows
    sx: {
    fontWeight: row.getIsSelected() ? 'bold' : 'normal',
    },
    }),
    });

    Style Expanded Rows

    const table = useMaterialReactTable({
    muiTableBodyRowProps: ({ row }) => ({
    //conditionally style expanded rows
    sx: {
    fontWeight: row.getIsExpanded() ? 'bold' : 'normal',
    },
    }),
    });

    Style Pinned Columns

    const table = useMaterialReactTable({
    muiTableHeadCellProps: ({ column }) => ({
    //conditionally style pinned columns
    sx: {
    backgroundColor: column.getIsPinned() ? '#f5f5f5' : 'inherit',
    },
    }),
    muiTableBodyCellProps: ({ column }) => ({
    //conditionally style pinned columns
    sx: {
    fontWeight: column.getIsPinned() ? 'bold' : 'normal',
    },
    }),
    });

    There are hundreds of table, column, header, row, and cell instance APIs that you can use for conditional styling and other logic. See the Table Instance APIs, Column Instance APIs, Row Instance APIs, and Cell Instance APIs docs for more info.

    Material UI Theme

    Material React Table respects your Material UI Theme. If you have already set up Material UI and a global Material UI Theme, you should already be set. But if you have not, you should visit the official 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 Material UI 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 do not 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 table={table} />
    </ThemeProvider>
    );

    Custom Material UI Theme Example

    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 { MaterialReactTable, type 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 = () => {
    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 enableColumnPinning
    131 />
    132 </ThemeProvider>
    133 );
    134};
    135
    136export default Example;
    137

    MRT Theme Values

    New in V2

    Material React Table has a new mrtTheme table option where you can change a few of the default color values used by Material React Table.

    The default background color of the table toolbars and table are controlled by the mrtTheme.baseBackgroundColor value. Dragging borders, selected or pinned rows, and filter match highlighting are also configurable in the mrtTheme object.

    Here is the default mrtTheme object used internally if not overridden:

    const baseBackgroundColor =
    themeOverrides?.baseBackgroundColor ??
    (theme.palette.mode === 'dark'
    ? lighten(theme.palette.background.default, 0.05)
    : theme.palette.background.default);
    return {
    baseBackgroundColor,
    draggingBorderColor: theme.palette.primary.main,
    matchHighlightColor:
    theme.palette.mode === 'dark'
    ? darken(theme.palette.warning.dark, 0.25)
    : lighten(theme.palette.warning.light, 0.5),
    menuBackgroundColor: lighten(baseBackgroundColor, 0.07),
    pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1),
    selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2),
    };

    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 muiTablePaperProps table option. 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.

    const table = useMaterialReactTable({
    columns,
    data,
    muiTablePaperProps: {
    elevation: 0, //change the mui box shadow
    //customize paper styles
    sx: {
    borderRadius: '0',
    border: '1px dashed #e0e0e0',
    },
    },
    });
    return <MaterialReactTable table={table} />;

    Customize Table Body, Rows, Columns, and Cells

    Stripe Rows Example

    If you need to style many of the rows or columns in a consistent manner, it usually makes sense to style the <TableBody /> component itself. For example if you want to stripe the rows, you can do something like this:

    const table = useMaterialReactTable({
    columns,
    data,
    muiTableBodyProps: {
    sx: {
    //stripe the rows, make odd rows a darker color
    '& tr:nth-of-type(odd) > td': {
    backgroundColor: '#f5f5f5',
    },
    },
    },
    });
    return <MaterialReactTable table={table} />;

    Stripe Columns Example

    Similarly, if you want to stripe the columns, you can do something like this:

    const table = useMaterialReactTable({
    columns,
    data,
    muiTableBodyProps: {
    sx: {
    //stripe the rows, make odd rows a darker color
    '& td:nth-of-type(odd)': {
    backgroundColor: '#f5f5f5',
    },
    },
    },
    muiTableBodyCellProps: {
    sx: {
    borderRight: '2px solid #e0e0e0', //add a border between columns
    },
    },
    });

    Demo








    1DylanSprouseMurray261 Erdman FordEast DaphneKentucky
    2RaquelHakeemKohler769 Dominic GroveColumbusOhio
    3ErvinKrisReinger566 Brakus InletSouth LindaWest Virginia
    4BrittanyKathrynMcCullough722 Emie StreamLincolnNebraska
    5BransonJohnFrami32188 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';
    8import { darken, lighten, useTheme } from '@mui/material';
    9
    10const Example = () => {
    11 const theme = useTheme();
    12
    13 //light or dark green
    14 const baseBackgroundColor =
    15 theme.palette.mode === 'dark'
    16 ? 'rgba(3, 44, 43, 1)'
    17 : 'rgba(244, 255, 233, 1)';
    18
    19 const columns = useMemo<MRT_ColumnDef<Person>[]>(
    20 //column definitions...
    57 );
    58
    59 const table = useMaterialReactTable({
    60 columns,
    61 data,
    62 enableColumnResizing: true,
    63 enableRowPinning: true,
    64 enableRowSelection: true,
    65 muiTablePaperProps: {
    66 elevation: 0,
    67 sx: {
    68 borderRadius: '0',
    69 },
    70 },
    71 muiTableBodyProps: {
    72 sx: (theme) => ({
    73 '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]) > td':
    74 {
    75 backgroundColor: darken(baseBackgroundColor, 0.1),
    76 },
    77 '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]):hover > td':
    78 {
    79 backgroundColor: darken(baseBackgroundColor, 0.2),
    80 },
    81 '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]) > td':
    82 {
    83 backgroundColor: lighten(baseBackgroundColor, 0.1),
    84 },
    85 '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]):hover > td':
    86 {
    87 backgroundColor: darken(baseBackgroundColor, 0.2),
    88 },
    89 }),
    90 },
    91 mrtTheme: (theme) => ({
    92 baseBackgroundColor: baseBackgroundColor,
    93 draggingBorderColor: theme.palette.secondary.main,
    94 }),
    95 });
    96
    97 return <MaterialReactTable table={table} />;
    98};
    99
    100export default Example;
    101

    Customize No Rows overlay

    As part of the customization options, we allow you to override the No Records overlay.

    const table = useMaterialReactTable({
    columns,
    data,
    renderEmptyRowsFallback: ({ table }) => (
    <span>Customized No Rows Overlay</span>
    ),
    });