## 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. ![Material React Table Advanced Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r17strbzwm4jqd13we9q.png) 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: ```javascript // 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 }) => {renderedCellValue}, }, { // you can also use a function to render the cell data accessorFn: (row) => row.price, id: "price", header: "Price", Header: Price, }, ], [] ); // define table object with data and columns passed to it const table = useMaterialReactTable({ data, columns, enableRowNumbers: true, }); const content = ( <>

MRT Example

); return content; } export default App; ``` #### Output : ![MRT Basic Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjk5br4airisy0qy1xby.png) ## 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: ```javascript // 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 }) => {renderedCellValue}, }, { // you can also use a function to render the cell data accessorFn: (row) => row.price, id: "price", header: "Price", Header: Price, }, ], [] ); // 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 = ( <>

MRT Example

); return content; } export default App; ``` #### Output: ![Themed MRT Table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8u8x8ajlrddu06385is.png) ❗️ 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](https://www.material-react-table.com/) 👉 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 😇

aminfallahzadeh

Material React Table

Join Our Newsletter. No Spam, Only the good stuff.