Published on

Material React Table Template: Quick Setup Guide

Authors
  • Name
    Ripal & Zalak
    Twitter

Material React Table Template: Quick Setup Guide

Setting up a functional and efficient data table can be a complex task. Material React Table (MRT) simplifies this process by providing a robust foundation for creating interactive and feature-rich tables. In this guide, we’ll provide a ready-to-use template to help you kickstart your project with Material React Table.

Why Choose Material React Table?

Material React Table offers numerous benefits, including:

  • Highly Customizable: Modify styles, features, and behavior to suit your project needs.
  • Built-In Features: Includes pagination, sorting, filtering, and more out of the box.
  • Scalable: Supports client-side and server-side data management for large datasets.
  • Material Design Integration: Provides a modern UI consistent with Material Design principles.

Prerequisites

Before you begin, ensure you have the following:

  1. A React project set up with Create React App or a similar tool.
  2. Installed dependencies:
    • material-react-table
    • @mui/material
    • @mui/icons-material

Install these packages using npm or yarn:

npm install material-react-table @mui/material @mui/icons-material

Example Template

Here’s a complete template to get started with Material React Table:

import { useMemo } from 'react';
import {
  MaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';

// Example data type
type Person = {
  name: {
    firstName: string;
    lastName: string;
  };
  address: string;
  city: string;
  state: string;
};

// Sample data
const data: Person[] = [
  {
    name: {
      firstName: 'John',
      lastName: 'Doe',
    },
    address: '261 Erdman Ford',
    city: 'East Daphne',
    state: 'Kentucky',
  },
  {
    name: {
      firstName: 'Jane',
      lastName: 'Doe',
    },
    address: '769 Dominic Grove',
    city: 'Columbus',
    state: 'Ohio',
  },
  {
    name: {
      firstName: 'Joe',
      lastName: 'Doe',
    },
    address: '566 Brakus Inlet',
    city: 'South Linda',
    state: 'West Virginia',
  },
  {
    name: {
      firstName: 'Kevin',
      lastName: 'Vandy',
    },
    address: '722 Emie Stream',
    city: 'Lincoln',
    state: 'Nebraska',
  },
  {
    name: {
      firstName: 'Joshua',
      lastName: 'Rolluffs',
    },
    address: '32188 Larkin Turnpike',
    city: 'Omaha',
    state: 'Nebraska',
  },
];

const ExampleTable = () => {
  // Memoized columns
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'name.firstName',
        header: 'First Name',
        size: 150,
      },
      {
        accessorKey: 'name.lastName',
        header: 'Last Name',
        size: 150,
      },
      {
        accessorKey: 'address',
        header: 'Address',
        size: 200,
      },
      {
        accessorKey: 'city',
        header: 'City',
        size: 150,
      },
      {
        accessorKey: 'state',
        header: 'State',
        size: 150,
      },
    ],
    []
  );

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      muiTableProps={{
        sx: { border: '1px solid #ccc', borderRadius: '4px' },
      }}
      muiPaginationProps={{
        rowsPerPageOptions: [5, 10, 20],
      }}
    />
  );
};

export default ExampleTable;

Features Highlighted in the Template

  1. Nested Data Handling: Access nested object properties with dot notation, such as name.firstName.
  2. Column Customization: Define headers, sizes, and accessors for each column.
  3. Pagination: Built-in pagination with configurable rows per page.
  4. Styling: Apply custom styles using Material-UI’s sx prop.

Conclusion

This template provides an excellent starting point for creating interactive and efficient data tables in your React projects using Material React Table. With built-in features and easy customization, you can focus on building robust applications with minimal effort.

Key Takeaways

  • Ready-to-Use: Quickly integrate the provided template into your project.
  • Customizable: Adjust columns, data, and styles as needed.
  • Scalable: Handle small and large datasets effectively.

Start building your interactive data tables with Material React Table today!