Material React Table
Amin Fallahzadeh
Posted on May 4, 2024
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 😇
Posted on May 4, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related