React Templates & Themes Logo React Templates & Themes
Material React Table screenshot

Material React Table

Author Avatar Theme by Kevinvandy
Updated: 1 Mar 2025
1657 Stars

A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript

Github Live Preview

Categories

Material ui

Overview:

The Material React Table V2 is a library that allows developers to quickly create data tables with a material design. It is built with Material UI V5 and TanStack Table V8. It offers a wide range of features and customization options to suit different table requirements.

Features:

  • Advanced TypeScript Generics Support
  • Aggregation and Grouping
  • Click To Copy Cell Values
  • Column Action Dropdown Menu
  • Column Hiding
  • Column Ordering via Drag’n’Drop
  • Column Pinning (Freeze Columns)
  • Column Resizing
  • Customize Icons
  • Customize Styling of internal Mui Components
  • Data Editing (4 different editing modes)
  • Density Toggle
  • Detail Panels (Expansion)
  • Faceted Value Generation for Filter Options
  • Filtering (supports client-side and server-side)
  • Filter Match Highlighting
  • Full Screen Mode
  • Global Filtering (Search across all columns, rank by best match)
  • Header Groups & Footers
  • Localization (i18n) support
  • Manage your own state or let the table manage it internally for you
  • Pagination (supports client-side and server-side)
  • Row Actions (Your Custom Action Buttons)
  • Row Numbers
  • Row Ordering via Drag’n’Drop
  • Row Pinning
  • Row Selection (Checkboxes)
  • SSR compatible
  • Sorting (supports client-side and server-side)
  • Theming (Respects your Material UI Theme)
  • Toolbars (Add your own action buttons)
  • Tree Data / Expanding Sub-rows
  • Virtualization (@tanstack/react-virtual)

Installation:

To install the Material React Table V2, follow these steps:

  1. Ensure that you have React 18 or later installed.
  2. Install the peer dependencies (Material UI V5).
npm install @mui/material @emotion/react @emotion/styled
  1. Install the Material React Table V2 and its internal dependencies.
npm install material-react-table@tanstack/react-table @tanstack/react-virtual @tanstack/match-sorter-utils
  1. You are now ready to use the library in your project.

Summary:

The Material React Table V2 is a powerful library for creating data tables in React with Material Design. It offers a wide range of features and customization options, including sorting, filtering, pagination, and editing. With its support for TypeScript and theming, it provides a flexible and efficient solution for managing and displaying tabular data in a user-friendly manner.