View the Docs Site

A work in progress fork of Material React Table

Coming soon in early 2023, but you can try out the beta now.

• 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

• < 41kb 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

1. Ensure that you have React 17 or later installed

2. Install Peer Dependencies (Mantine V6 and Tabler Icons)

npm install @mantine/core @mantine/hooks @mantine/dates @emotion/react @tabler/icons-react dayjs

3. Install mantine-react-table

npm install mantine-react-table

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

Read the full usage docs here

importReact,{useMemo,useRef,useState,useEffect}from'react';import{MantineReactTable}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: {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]);//Or, optionally, you can get a reference to the underlying table instanceconsttableInstanceRef=useRef(null);constsomeEventHandler=()=>{//read the table state during an event from the table instance refconsole.log(tableInstanceRef.current.getState().sorting);}return(<MantineReactTablecolumns={columns}data={data}enableColumnOrdering//enable some featuresenableRowSelectionenablePagination={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)tableInstanceRef={tableInstanceRef}//get a reference to the underlying table instance (optional)/>);}

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.