Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/KevinVandy/mantine-react-table
A fully featured Mantine V5 implementation of TanStack React Table V8, forked from Material React Table
https://github.com/KevinVandy/mantine-react-table
datagrid mantine tanstack-table
Last synced: about 1 month ago
JSON representation
A fully featured Mantine V5 implementation of TanStack React Table V8, forked from Material React Table
- Host: GitHub
- URL: https://github.com/KevinVandy/mantine-react-table
- Owner: KevinVandy
- License: mit
- Created: 2022-12-25T02:03:02.000Z (almost 2 years ago)
- Default Branch: v2
- Last Pushed: 2024-04-29T17:30:27.000Z (8 months ago)
- Last Synced: 2024-05-02T03:06:28.490Z (7 months ago)
- Topics: datagrid, mantine, tanstack-table
- Language: TypeScript
- Homepage: https://www.mantine-react-table.com/
- Size: 13.9 MB
- Stars: 704
- Watchers: 13
- Forks: 118
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-faker - mantine-react-table - A fully featured Mantine V5 implementation of TanStack React Table V8, forked from Material React Table. (Projects using `@faker-js/faker`)
README
# Mantine React Table
View the [Docs Site](https://www.mantine-react-table.com/)
A fork of [Material React Table](https://www.material-react-table.com)
V1 released July 18, 2023
## About
### _Quickly Create React Data Tables with Mantine_
### __Built with [Mantine V7](https://mantine.dev/) and [TanStack Table V8](https://tanstack.com/table/v8)__
## Learn More
- Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
- View the [Docs Website](https://www.mantine-react-table.com/)
- See all [Props, Options, and APIs](https://www.mantine-react-table.com/docs/api)
### Quick Examples
- [Basic Table](https://www.mantine-react-table.com/docs/examples/basic/) (See Default Features)
- [Minimal Table](https://www.mantine-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
- [Advanced Table](https://www.mantine-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
- [Aggregation/Grouping](https://www.mantine-react-table.com/docs/examples/aggregation-and-grouping/) (Aggregation features such as Sum, Average, Count, etc.)
- [Data Export Table](https://www.mantine-react-table.com/docs/examples/data-export/) (Export to CSV, Excel, etc.)
- [Editing CRUD Table](https://www.mantine-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
- [Remote Data](https://www.mantine-react-table.com/docs/examples/remote/) (Server-side Pagination, Sorting, and Filtering)
- [React Query](https://www.mantine-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering, simplified)
- [Virtualized Rows](https://www.mantine-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
- [Infinite Scrolling](https://www.mantine-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
- [Localization (i18n)](https://www.mantine-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)
View additional [storybook examples](https://www.mantine-react-table.dev/)
## Features
_All features can easily be enabled/disabled_
_**Fully Fleshed out [Docs](https://www.mantine-react-table.com/docs/guides#guides) are available for all features**_
- [x] < 44kb gzipped - [Bundlephobia](https://bundlephobia.com/package/mantine-react-table)
- [x] Advanced TypeScript Generics Support (TypeScript Optional)
- [x] Aggregation and Grouping (Sum, Average, Count, etc.)
- [x] Click To Copy Cell Values
- [x] Column Action Dropdown Menu
- [x] Column Hiding
- [x] Column Ordering via Drag'n'Drop
- [x] Column Pinning (Freeze Columns)
- [x] Column Resizing
- [x] Customize Icons
- [x] Customize Styling of internal Mantine Components
- [x] Data Editing (4 different editing modes)
- [x] Density Toggle
- [x] Detail Panels (Expansion)
- [x] Filtering (supports client-side and server-side)
- [x] Filter Match Highlighting
- [x] Full Screen Mode
- [x] Global Filtering (Search across all columns, rank by best match)
- [x] Header Groups & Footers
- [x] Localization (i18n) support
- [x] Manage your own state or let the table manage it internally for you
- [x] Pagination (supports client-side and server-side)
- [x] Row Actions (Your Custom Action Buttons)
- [x] Row Numbers
- [x] Row Ordering via Drag'n'Drop
- [x] Row Selection (Checkboxes)
- [x] SSR compatible
- [x] Sorting (supports client-side and server-side)
- [x] Theming (Respects your Mantine Theme)
- [x] Toolbars (Add your own action buttons)
- [x] Tree Data / Expanding Sub-rows
- [x] Virtualization (@tanstack/react-virtual)
## Getting Started
### Installation
View the full [Installation Docs](https://www.mantine-react-table.com/docs/getting-started/install)
1. Ensure that you have React 17 or later installed
2. Install Peer Dependencies (Mantine V6 and Tabler Icons)
```bash
npm install @mantine/core @mantine/hooks @mantine/dates @emotion/react @tabler/icons-react dayjs
```
3. Install mantine-react-table
```bash
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.
### Usage
> Read the full usage docs [here](https://www.mantine-react-table.com/docs/getting-started/usage/)
```jsx
import { useMemo, useState, useEffect } from 'react';
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
const data = [
{
name: 'John',
age: 30,
},
{
name: 'Sara',
age: 25,
},
]
export default function App() {
const columns = useMemo(
() => [
{
accessorKey: 'name', //simple recommended way to define a column
header: 'Name',
mantineTableHeadCellProps: { style: { color: 'green' } }, //optional custom props
Cell: ({ cell }) => {cell.getValue()}, //optional custom cell render
},
{
accessorFn: (row) => row.age, //alternate way
id: 'age', //id required if you use accessorFn instead of accessorKey
header: 'Age',
Header: () => Age, //optional custom header render
},
],
[],
);
//optionally, you can manage any/all of the table state yourself
const [rowSelection, setRowSelection] = useState({});
useEffect(() => {
//do something when the row selection changes
}, [rowSelection]);
const table = useMantineReactTable({
columns,
data,
enableColumnOrdering: true, //enable some features
enableRowSelection: true,
enablePagination: false, //disable a default feature
onRowSelectionChange: setRowSelection, //hoist row selection state to your state
state: { rowSelection },
});
return ;
}
```
_Open in [Code Sandbox](https://codesandbox.io/s/simple-mantine-react-table-example-t5c3ji)_
## Contributors
PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/mantine-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first if it is a large change!
Read the [Contributing Guide](https://github.com/KevinVandy/mantine-react-table/blob/v2/CONTRIBUTING.md) to learn how to run this project locally.