View the Docs Site
A fork of Material React Table. This project aims be be an active community fork.
V1 released July 18, 2023
Built with Mantine V7 and TanStack Table V8
- Join the Discord server to join in on the development discussion or ask questions
- View the Docs Website
- See all Props, Options, and APIs
- Basic Table (See Default Features)
- Minimal Table (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
- Advanced Table (See some of the Advanced Features)
- Aggregation/Grouping (Aggregation features such as Sum, Average, Count, etc.)
- Data Export Table (Export to CSV, Excel, etc.)
- Editing CRUD Table (Create, Edit, and Delete Rows)
- Remote Data (Server-side Pagination, Sorting, and Filtering)
- React Query (Server-side Pagination, Sorting, and Filtering, simplified)
- Virtualized Rows (10,000 rows at once!)
- Infinite Scrolling (Fetch data as you scroll)
- Localization (i18n) (Over a dozen languages built-in)
View additional storybook examples
All features can easily be enabled/disabled
Fully Fleshed out Docs are available for all features
- < 44kb gzipped - Bundlephobia
- Advanced TypeScript Generics Support (TypeScript Optional)
- Aggregation and Grouping (Sum, Average, Count, etc.)
- 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 Mantine Components
- Data Editing (4 different editing modes)
- Density Toggle
- Detail Panels (Expansion)
- 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 Selection (Checkboxes)
- SSR compatible
- Sorting (supports client-side and server-side)
- Theming (Respects your Mantine Theme)
- Toolbars (Add your own action buttons)
- Tree Data / Expanding Sub-rows
- Virtualization (@tanstack/react-virtual)
View the full Installation Docs
Ensure that you have React 17 or later installed
Install Peer Dependencies (Mantine V6 and Tabler Icons)
npm install @mantine/core @mantine/hooks @mantine/dates @emotion/react @tabler/icons-react dayjs- Install mantine-react-table
npm install mantine-react-table
@tanstack/react-table,@tanstack/react-virtual,@tanstack/match-sorter-utils, are internal dependencies, so you do NOT need to install them yourself.
Read the full usage docs here
import{useMemo,useState,useEffect}from'react';import{MantineReactTable,useMantineReactTable}from'mantine-react-table';constdata=[{name: 'John',age: 30,},{name: 'Sara',age: 25,},]exportdefaultfunctionApp(){constcolumns=useMemo(()=>[{accessorKey: 'name',//simple recommended way to define a columnheader: 'Name',mantineTableHeadCellProps: {style: {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=useMantineReactTable({
columns,
data,enableColumnOrdering: true,//enable some featuresenableRowSelection: true,enablePagination: false,//disable a default featureonRowSelectionChange: setRowSelection,//hoist row selection state to your statestate: { rowSelection },});return<MantineReactTabletable={table}/>;}Open in Code Sandbox
PRs are Welcome, but please discuss in GitHub Discussions or the Discord Server first if it is a large change!
Read the Contributing Guide to learn how to run this project locally.