Material React Table

Introduction to Material React Table

Are you looking for a powerful and flexible solution for creating data tables in your React applications? Look no further! The Material React Table(MRT) is a fully-featured data grid/table component library for React with rich customization options.

❗️ MRT is built on top of TanStack Table V8's powerful API.

In this guide, we'll take a deep dive into the features and functionality of the Material React Table library, empowering you to leverage its full potential in your projects. Whether you're a beginner or an experienced React developer, you'll find valuable insights and practical examples to expand your table-building skills.

Installation and Setup

You can install MRT in two ways. Quick Installation which only install the main library to start building your data girds and Complete Installation which installs all the required peer dependencies so you have maximum flexibility building and customizing you tables.

✅ In this guid we use the second option.

Run these command in you development environment based on your package manager:

# npm

npm i material-react-table @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled

# yarn
yarn add material-react-table @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled

Basic Usage

Now that we have Material React Table installed and set up in our project, let's dive into its basic usage. Creating a simple table with Material React Table is straightforward and requires minimal configuration.

Creating a Simple Table

To create a basic table, you need to define the columns and data for the table object. Let's start with a simple example:

// styles
import "./App.css";

// react imports
import { useMemo } from "react";

// MRT imports
import {
  MaterialReactTable,
  useMaterialReactTable,
} from "material-react-table";

function App() {
  // define data which will be passed to table object
  const data = useMemo(
    () => [
      {
        product: "USB Type C Charger",
        price: "$39.99",
      },
      {
        product: "USB Lightning",
        price: "$45.99",
      },
    ],
    []
  );

  // define columns as desired
  const columns = useMemo(
    () => [
      {
        accessorKey: "product",
        header: "Product",
        muiTableHeadCellProps: { sx: { color: "green" } },
        // style the rendered cell value as desired
        Cell: ({ renderedCellValue }) => <strong>{renderedCellValue}</strong>,
      },
      {
        // you can also use a function to render the cell data
        accessorFn: (row) => row.price,
        id: "price",
        header: "Price",
        Header: <i style={{ color: "red" }}>Price</i>,
      },
    ],
    []
  );

  // define table object with data and columns passed to it
  const table = useMaterialReactTable({
    data,
    columns,
    enableRowNumbers: true,
  });
  const content = (
    <>
      <h4>MRT Example</h4>
      <MaterialReactTable table={table} />
    </>
  );

  return content;
}

export default App;

Output :

Customization Options

Material React Table provides a wide range of customization options to tailor the appearance and behavior of your tables according to your needs. Let's explore some of the key customization features:

Styling the Table

You can customize the styling of your table using CSS within the useMaterialReactTable hook like so:

// styles
import "./App.css";

// react imports
import { useMemo } from "react";

// MRT imports
import {
  MaterialReactTable,
  useMaterialReactTable,
} from "material-react-table";

// import themes from mui
import { darken, lighten, useTheme } from "@mui/material";

function App() {
  // access the theme using the useTheme hook
  const theme = useTheme();

  // define background color according to your needs
  const baseBackgroundColor =
    theme.palette.mode === "dark"
      ? "rgba(3, 44, 43, 1)"
      : "rgba(244, 255, 233, 1)";

  // define data which will be passed to table object
  const data = useMemo(
    () => [
      {
        product: "USB Type C Charger",
        price: "$39.99",
      },
      {
        product: "USB Lightning",
        price: "$45.99",
      },
      {
        product: "32GB Flash Drive",
        price: "$22.99",
      },
      {
        product: "Black Earphones",
        price: "$25.99",
      },
    ],
    []
  );

  // define columns as desired
  const columns = useMemo(
    () => [
      {
        accessorKey: "product",
        header: "Product",
        muiTableHeadCellProps: { sx: { color: "green" } },
        // style the rendered cell value as desired
        Cell: ({ renderedCellValue }) => <strong>{renderedCellValue}</strong>,
      },
      {
        // you can also use a function to render the cell data
        accessorFn: (row) => row.price,
        id: "price",
        header: "Price",
        Header: <i style={{ color: "red" }}>Price</i>,
      },
    ],
    []
  );

  // define table object with data and columns passed to it
  const table = useMaterialReactTable({
    data,
    columns,
    enableRowNumbers: true,
    muiTablePaperProps: {
      elevation: 0,
      sx: {
        borderRadius: "0",
      },
    },
    muiTableBodyCellProps: {
      sx: (theme) => ({
        color: theme.palette.mode === "dark" ? "white" : "black",
      }),
    },
    muiTableBodyProps: {
      sx: () => ({
        '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]) > td':
          {
            backgroundColor: darken(baseBackgroundColor, 0.1),
          },
        '& tr:nth-of-type(odd):not([data-selected="true"]):not([data-pinned="true"]):hover > td':
          {
            backgroundColor: darken(baseBackgroundColor, 0.2),
          },
        '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]) > td':
          {
            backgroundColor: lighten(baseBackgroundColor, 0.1),
          },
        '& tr:nth-of-type(even):not([data-selected="true"]):not([data-pinned="true"]):hover > td':
          {
            backgroundColor: darken(baseBackgroundColor, 0.2),
          },
      }),
    },
    mrtTheme: (theme) => ({
      baseBackgroundColor: baseBackgroundColor,
      draggingBorderColor: theme.palette.secondary.main,
    }),
  });
  const content = (
    <>
      <h4>MRT Example</h4>
      <MaterialReactTable table={table} />
    </>
  );

  return content;
}

export default App;

Output:

❗️ Note that there a wide range of customization options both in styling and table behaviors which you can easily find out using the MRT official docs

👉 Stay tuned for updates on this post. I will update this blog weekly and add more features and guide. Do not forget to share this blog to keep us motivated for the future guides 😇