Mastering Material React Table: Styling and Customization Guide

Material React Table (MRT) is a powerful and flexible library for creating interactive and customizable data tables in React applications. This blog post will guide you through its usage, showcasing examples, customization options, and best practices for styling. We’ll also use an SEO-optimized structure to ensure this content reaches the right audience.

What is Material React Table?

Material React Table is built on top of Material-UI, a popular React component library. MRT provides advanced features like row selection, column pinning, custom theming, and responsive design out of the box.

Key Features of Material React Table

1. Row and Column Customization
2. Advanced Styling Options
3. Responsive Design
4. Integration with Material-UI Themes
5. Support for Hooks and Callbacks

Setting Up Material React Table

Installation

To use Material React Table, you need to install the following packages:

npm install material-react-table @mui/material @emotion/react @emotion/styled

Examples of Using Material React Table

Basic Table with Row Selection

Here’s how to create a simple table with row selection:

import { useMaterialReactTable } from 'material-react-table'

const columns = [
  { accessorKey: 'firstName', header: 'First Name' },
  { accessorKey: 'lastName', header: 'Last Name' },
  { accessorKey: 'address', header: 'Address' },
]

const data = [
  { firstName: 'John', lastName: 'Doe', address: '123 Main St' },
  { firstName: 'Jane', lastName: 'Smith', address: '456 Oak St' },
]

const table = useMaterialReactTable({
  columns,
  data,
  enableRowSelection: true,
  muiSelectCheckboxProps: { color: 'secondary' },
})

return <MaterialReactTable table={table} />

Conditional Checkbox Styling

You can conditionally disable checkboxes based on row data:

const table = useMaterialReactTable({
  columns,
  data,
  enableRowSelection: true,
  muiSelectCheckboxProps: ({ row }) => ({
    color: 'secondary',
    disabled: row.original.isDisabled,
  }),
})

return <MaterialReactTable table={table} />

Customizing Table Head Cells

Apply custom styles to the table’s header cells:

const table = useMaterialReactTable({
  columns,
  data,
  muiTableHeadCellProps: {
    sx: (theme) => ({ color: theme.palette.text.secondary }),
  },
})

return <MaterialReactTable table={table} />

Responsive Styling with Themes

Integrating Material-UI’s theming capabilities allows you to maintain consistency across your app:

import { ThemeProvider, createTheme } from '@mui/material'

const tableTheme = createTheme({
  palette: {
    mode: 'light',
    primary: { main: '#1976d2' },
  },
})

return (
  <ThemeProvider theme={tableTheme}>
    <MaterialReactTable columns={columns} data={data} enableRowSelection />
  </ThemeProvider>
)

Advanced Styling Examples

Row Stripping and Custom Borders

Enhance the table’s appearance by styling odd and even rows:

const table = useMaterialReactTable({
  columns,
  data,
  muiTableBodyProps: {
    sx: {
      '& tr:nth-of-type(odd)': { backgroundColor: '#f9f9f9' },
      '& tr:nth-of-type(even)': { backgroundColor: '#fff' },
    },
  },
  muiTableBodyCellProps: {
    sx: { borderRight: '1px solid #ccc' },
  },
})

return <MaterialReactTable table={table} />

Customizing Pinned Columns

Highlight pinned columns with distinct styles:

const table = useMaterialReactTable({
  columns,
  data,
  muiTableHeadCellProps: ({ column }) => ({
    sx: { backgroundColor: column.getIsPinned() ? '#ddd' : '#fff' },
  }),
  muiTableBodyCellProps: ({ column }) => ({
    sx: { fontWeight: column.getIsPinned() ? 'bold' : 'normal' },
  }),
})

return <MaterialReactTable table={table} />

Best Practices for Using Material React Table

1. Leverage Material-UI’s Theming: Ensure consistent styles across your app by integrating Material-UI themes.
2. Utilize Callbacks: Use callback functions to dynamically customize components based on data.
3. Optimize for Accessibility: Add ARIA attributes where necessary to enhance usability.
4. Minimize Inline Styles: Use Material-UI’s sx prop or theme overrides for cleaner code.

Conclusion

Material React Table is a versatile tool for creating dynamic and interactive data tables in React applications. By leveraging its powerful features and customization options, you can build tables that are not only functional but also visually appealing.

Implement the examples shared in this blog, and explore the official Material React Table documentation for further details. Happy coding!