Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

License

NotificationsYou must be signed in to change notification settings

KevinVandy/material-react-table

Repository files navigation

ViewDocumentation

About

Quickly Create React Data Tables with Material Design

MRT

Want to use Mantine instead of Material UI? Check outMantine React Table

Learn More

Quick Examples

View additionalstorybook examples

Features

All features can easily be enabled/disabled

Fully Fleshed outDocs are available for all features

  • 30-56kb gzipped -Bundlephobia
  • Advanced TypeScript Generics Support (TypeScript Optional)
  • Aggregation and Grouping (Sum, Average, Count, etc.)
  • Cell Actions (Right-click Context Menu)
  • 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 and Creating (5 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)

Getting Started

Installation

View the fullInstallation Docs

  1. Ensure that you have React 18 or later installed

  2. Install Peer Dependencies (Material UI V6)

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

@tanstack/react-table,@tanstack/react-virtual, and@tanstack/match-sorter-utils are internal dependencies, so you do NOT need to install them yourself.

Usage

Read the full usage docshere

import{useMemo,useState,useEffect}from'react';import{MaterialReactTable,useMaterialReactTable,}from'material-react-table';//data must be stable reference (useState, useMemo, useQuery, defined outside of component, etc.)constdata=[{name:'John',age:30,},{name:'Sara',age:25,},];exportdefaultfunctionApp(){constcolumns=useMemo(()=>[{accessorKey:'name',//simple recommended way to define a columnheader:'Name',muiTableHeadCellProps:{sx:{color:'green'}},//optional custom propsCell:({ cell})=><span>{cell.getValue()}</span>,//optional custom cell render},{accessorFn:(row)=>row.age,//alternate wayid:'age',//id required if you use accessorFn instead of accessorKeyheader:'Age',Header:()=><i>Age</i>,//optional custom header render},],[],);//optionally, you can manage any/all of the table state yourselfconst[rowSelection,setRowSelection]=useState({});useEffect(()=>{//do something when the row selection changes},[rowSelection]);consttable=useMaterialReactTable({    columns,    data,enableColumnOrdering:true,//enable some featuresenableRowSelection:true,enablePagination:false,//disable a default featureonRowSelectionChange:setRowSelection,//hoist internal state to your own state (optional)state:{ rowSelection},//manage your own state, pass it back to the table (optional)});constsomeEventHandler=()=>{//read the table state during an event from the table instanceconsole.log(table.getState().sorting);};return(<MaterialReactTabletable={table}/>//other more lightweight MRT sub components also available);}

Open inCode Sandbox

Contributors

PRs are Welcome, but please discuss inGitHub Discussions or theDiscord Server first if it is a large change!

Read theContributing Guide to learn how to run this project locally.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Contributors114


[8]ページ先頭

©2009-2025 Movatter.jp