README.md · anydev/material-react-table

# Material React Table

View [Documentation](https://www.material-react-table.com/)

## About

### _Quickly Create React Data Tables with Material Design_

### __Built with [Material UI V5](https://mui.com) and [TanStack Table V8](https://tanstack.com/table/v8)__

> Want to use Mantine instead of Material UI? Check out [Mantine React Table](https://www.mantine-react-table.com)

## 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.material-react-table.com/)
- See all [Props, Options, and APIs](https://www.material-react-table.com/docs/api)

### Quick Examples

- [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
 - [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
 - [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
 - [Aggregation/Grouping](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Aggregation features such as Sum, Average, Count, etc.)
 - [Data Export Table](https://www.material-react-table.com/docs/examples/data-export/) (Export to CSV, Excel, etc.)
 - [Editing CRUD Table](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
 - [Remote Data](https://www.material-react-table.com/docs/examples/remote/) (Server-side Pagination, Sorting, and Filtering)
 - [React Query](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering, simplified)
 - [Virtualized Rows](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
 - [Infinite Scrolling](https://www.material-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
 - [Localization (i18n)](https://www.material-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)

View additional [storybook examples](https://www.material-react-table.dev/)

## Features

_All features can easily be enabled/disabled_

_**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_

- [x] < 47kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-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 Mui Components
- [x] Data Editing (4 different editing modes)
- [x] Density Toggle
- [x] Detail Panels (Expansion)
- [x] Faceted Value Generation for Filter Options
- [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 Material UI 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.material-react-table.com/docs/getting-started/install)

1. Ensure that you have React 17 or later installed (Material UI V5 requires React 17 or 18)

2. Install Peer Dependencies (Material UI V5)

```bash
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
```

3. Install material-react-table

```bash
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 docs [here](https://www.material-react-table.com/docs/getting-started/usage/)

```jsx
import React, { useMemo, useRef, useState, useEffect } from 'react';
import { MaterialReactTable } from 'material-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',
 muiTableHeadCellProps: { sx: { 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]);

//Or, optionally, you can get a reference to the underlying table instance
  const tableInstanceRef = useRef(null);

const someEventHandler = () => {
    //read the table state during an event from the table instance ref
    console.log(tableInstanceRef.current.getState().sorting);
  }

return (
 <MaterialReactTable 
 columns={columns} 
 data={data} 
 enableColumnOrdering //enable some features
 enableRowSelection 
 enablePagination={false} //disable a default feature
 onRowSelectionChange={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](https://codesandbox.io/s/simple-material-react-table-example-t5c3ji)_

## Contributors

PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-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/material-react-table/blob/v1/CONTRIBUTING.md) to learn how to run this project locally.

anydev/material-react-table

简介

发行版

贡献者

近期动态

anydev/material-react-table .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

anydev/material-react-table