Material Table React Tutorial With Examples

Why Material React Table for Modern React Applications

Material React Table represents a significant evolution in React table libraries, combining the flexibility of TanStack Table's headless architecture with the polished aesthetics and accessibility of Material UI components. This combination delivers tables that are both highly customizable and immediately usable with professional styling out of the box.

Key advantages include:

• Architecture built on TanStack Table v8 -- Inherits powerful columnar architecture and headless design philosophy
• Material UI integration -- Consistent styling aligned with Material Design principles
• Headless flexibility -- Pre-built components without being locked into a specific visual style
• Enterprise-grade features -- Sorting, filtering, pagination, and row selection included by default
• Strong TypeScript support -- Full type safety for reliable development

The library addresses common pain points: no need to build complex table functionality from scratch, consistent styling that matches your application, and extensive customization options through MUI theming. For teams building React-based web applications, Material React Table accelerates development while maintaining code quality.

Installation and Setup

Setting up Material React Table requires installing the library along with its Material UI dependencies. The library offers two installation approaches:

Quick Installation (if MUI already installed)

npm install material-react-table

Complete Installation (recommended for new projects)

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

For Yarn Users

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

Required Dependencies:

• @mui/material -- Material UI component library
• @mui/x-date-pickers -- Date picker components
• @mui/icons-material -- Material Design icons
• @emotion/react & @emotion/styled -- CSS-in-JS styling engine

After installation, ensure your application uses MUI's ThemeProvider at the root level for proper styling.

Creating Your First Table

Building a basic table involves three key steps: defining your data, defining column configurations, and creating the table instance using the useMaterialReactTable hook.

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

function ProductTable() {
 // Define data with useMemo for performance
 const data = useMemo(
 () => [
 { product: 'USB Type C Charger', price: '$39.99', category: 'Accessories' },
 { product: 'USB Lightning Cable', price: '$45.99', category: 'Accessories' },
 { product: '32GB Flash Drive', price: '$22.99', category: 'Storage' },
 { product: 'Wireless Mouse', price: '$29.99', category: 'Accessories' },
 ],
 []
 );

 // Define columns with accessorKey and header
 const columns = useMemo(
 () => [
 {
 accessorKey: 'product',
 header: 'Product',
 muiTableHeadCellProps: { sx: { color: 'green' } },
 },
 {
 accessorFn: (row) => row.price,
 id: 'price',
 header: 'Price',
 muiTableHeadCellProps: { sx: { color: 'red' } },
 },
 {
 accessorKey: 'category',
 header: 'Category',
 },
 ],
 []
 );

 // Create table instance
 const table = useMaterialReactTable({
 data,
 columns,
 enableRowNumbers: true,
 });

 return <MaterialReactTable table={table} />;
}

Key concepts:

• accessorKey -- Maps directly to data object properties
• accessorFn -- For computed or transformed values
• muiTableHeadCellProps -- Customize header styling
• Cell -- Custom cell rendering (advanced)

Core Features: Sorting, Filtering, and Pagination

Sorting

Enable sorting with enableSorting for single-column sorting or enableMultiSort for multi-column sorting (Shift+click).

const table = useMaterialReactTable({
 data,
 columns,
 enableSorting: true,
 enableMultiSort: true,
});

Filtering

Enable column filters and global search with enableColumnFilters and enableGlobalFilter.

const table = useMaterialReactTable({
 data,
 columns,
 enableColumnFilters: true,
 enableGlobalFilter: true,
});

Pagination

Configure pagination with page size options and navigation controls.

const table = useMaterialReactTable({
 data,
 columns,
 enablePagination: true,
 initialState: {
 pagination: { pageSize: 10, pageIndex: 0 },
 },
 muiPaginationProps: {
 rowsPerPageOptions: [5, 10, 20, 50],
 showFirstButton: true,
 showLastButton: true,
 },
});

Client-side vs Server-side:

• Client-side pagination works for datasets that fit in memory
• Server-side pagination integrates with your data fetching logic

Advanced Features: Editing, Selection, and Column Management

Inline Editing

Enable inline editing with enableEditing and handle save/cancel events.

const table = useMaterialReactTable({
 data,
 columns,
 enableEditing: true,
 onEditingRowSave: ({ table, row, values }) => {
 // Handle data update
 console.log('Saved:', row.original.name, values);
 },
 onEditingRowCancel: () => {
 // Handle cancel
 },
 editDisplayMode: 'row', // 'cell' | 'table' | 'custom'
});

Row Selection

Enable row selection for bulk operations on selected data.

const table = useMaterialReactTable({
 data,
 columns,
 enableRowSelection: true,
 enableSelectAll: true,
 onRowSelectionChange: (selection) => {
 console.log('Selected:', selection);
 },
});

Column Hiding and Ordering

Allow users to customize their view with column management.

const table = useMaterialReactTable({
 data,
 columns,
 enableColumnOrdering: true,
 enableHiding: true,
 initialState: {
 columnOrder: ['mrt-row-select', 'product', 'price', 'category'],
 columnVisibility: { category: false },
 },
});

Performance Optimization Techniques

Memoization Strategies

Use useMemo for data and columns to prevent unnecessary recalculations:

const data = useMemo(() => expensiveDataFetch(), [filterParams]);
const columns = useMemo(() => [
 {
 accessorKey: 'value',
 Cell: memoized(CurrencyFormatter),
 },
], []);

Virtualization for Large Datasets

Render only visible rows with row virtualization:

const table = useMaterialReactTable({
 data,
 columns,
 enableRowVirtualization: true,
 muiTableContainerProps: {
 sx: { maxHeight: '600px' },
 },
});

Virtualization benefits:

• Renders only rows in viewport (+ buffer)
• Maintains smooth scrolling regardless of dataset size
• Works with sorting and filtering

Performance Checklist

• Use useMemo for data and column definitions
• Memoize expensive cell renderers
• Enable virtualization for 1000+ rows
• Debounce filter inputs
• Use server-side pagination for very large datasets

Customization and Theming

Material React Table integrates with MUI theming for automatic styling consistency.

MUI Theme Integration

const table = useMaterialReactTable({
 data,
 columns,
 muiTablePaperProps: {
 elevation: 0,
 sx: {
 borderRadius: '0',
 border: '1px solid #e0e0e0',
 },
 },
 muiTableHeadCellProps: {
 sx: {
 fontWeight: 'bold',
 backgroundColor: '#f5f5f5',
 },
 },
});

Dark Mode Support

The table automatically adapts to MUI's dark mode theming. Your theme configuration controls colors, spacing, and typography across the table.

Custom Cell Rendering

const columns = useMemo(
 () => [
 {
 accessorKey: 'status',
 header: 'Status',
 Cell: ({ cell }) => (
 <Chip 
 label={cell.getValue()} 
 color={cell.getValue() === 'active' ? 'success' : 'default'}
 />
 ),
 },
 ],
 []
);

Exporting Data from Tables

Material React Table supports exporting data in CSV, Excel, and PDF formats.

import { MRT_ExportIcon } from 'material-react-table';

const table = useMaterialReactTable({
 data,
 columns,
 renderTopToolbarCustomActions: ({ table }) => (
 <Button
 onClick={() => handleExportData(
 table.getPrePaginationRowModel().rows
 )}
 startIcon={<MRT_ExportIcon />}
 >
 Export Data
 </Button>
 ),
});

Export features:

• Exports currently filtered and sorted data
• Customizable column selection
• Filename configuration
• Extensible for custom formats

Best Practices for Production Applications

TypeScript Integration

Define interfaces for type safety. Leveraging TypeScript in your React projects helps catch errors early and improve code maintainability:

interface Product {
 id: string;
 product: string;
 price: number;
 category: string;
}

interface ColumnDef {
 accessorKey: keyof Product;
 header: string;
}

Error Handling

Handle edge cases:

• Empty datasets (use enableEmptyDataAlert)
• Loading states during data fetch
• API failures with error boundaries

Accessibility

• Keyboard navigation is built-in
• ARIA labels on custom interactive elements
• Screen reader support for all features

Testing Strategy

• Unit tests for component rendering
• Integration tests for user workflows
• Test sorting, filtering, and pagination interactions

Production Checklist

• TypeScript interfaces for data structures
• Error handling for empty/loading states
• Accessibility compliance
• Unit and integration tests
• Performance testing with realistic data sizes
• Dark mode visual testing

Conclusion

Material React Table provides a comprehensive solution for building professional data tables in React applications. Its foundation on TanStack Table v8 delivers powerful data processing capabilities, while Material UI integration ensures polished, accessible interfaces.

Key takeaways:

1. Start simple -- Begin with basic configuration and add features incrementally
2. Use memoization -- Prevent performance issues with useMemo for data and columns
3. Enable virtualization -- For datasets over 1000 rows
4. Customize through theming -- Use MUI theme for consistent styling
5. Test thoroughly -- Cover sorting, filtering, pagination, and editing

The extensive documentation and active community provide resources for addressing any challenges. Implement production-ready tables that deliver excellent user experiences while maintaining code quality.

---

Related Topics:

• React Higher Order Components
• Optional Chaining and Nullish Coalescing in TypeScript
• Understanding Vue Refs

Sources

1. Material React Table Documentation
2. LogRocket: Material Table React Tutorial
3. DEV Community: Material React Table Guide
4. Material React Table GitHub Repository
5. TanStack Table v8 Documentation