> :warning: Please do not create pull requests that contains a lot of change. Because we are working on refactoring and testing. Just pull requests that fixes a bug with a few line changes.

material-table

Roadmap

- More on our roadmap can be found here

Key features

- Actions
- Component overriding
- Custom column rendering
- Detail Panel
- Editable
- Export
- Filtering
- Grouping
- Localization
- Remote Data
- Search
- Selection
- Sorting
- Styling
- Tree Data
- and more

Demo and documentation

You can access all code examples and documentation on our site material-table.com.

Support material-table

To support material-table visit SUPPORT page.

Issue Prioritizing

Issues would be prioritized according reactions count. is:issue is:open sort:reactions-+1-desc filter would be use.

List issues according to reaction score

Prerequisites

The minimum React version material-table supports is ^16.8.5 since material-table v1.36.1. This is due to utilising react-beautiful-dnd for drag & drop functionality which uses hooks.

If you use an older version of react we suggest to upgrade your dependencies or use material-table 1.36.0.

Installation

#### 1.Install package

To install material-table with npm:

npm install material-table @material-ui/core --save

To install material-table with yarn:

yarn add material-table @material-ui/core

#### 2.Add material icons

There are two ways to use icons in material-table either import the material icons font via html OR import material icons and use the material-table icons prop.

##### HTML

``html
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
`

OR

##### Import Material icons

Icons can be imported to be used in material-table offering more flexibility for customising the look and feel of material table over using a font library.

To install @material-ui/icons with npm:

npm install @material-ui/icons --save

To install @material-ui/icons with yarn:

yarn add @material-ui/icons

If your environment doesn't support tree-shaking, the recommended way to import the icons is the following:

`jsx
import AddBox from "@material-ui/icons/AddBox";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
`

If your environment support tree-shaking you can also import the icons this way:

`jsx
import { AddBox, ArrowDownward } from "@material-ui/icons";
`

Note: Importing named exports in this way will result in the code for _every icon_ being included in your project, so is not recommended unless you configure tree-shaking. It may also impact Hot Module Reload performance. Source: @material-ui/icons

Example

`jsx
import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const tableIcons = {
Add: forwardRef((props, ref) => ),
Check: forwardRef((props, ref) => ),
Clear: forwardRef((props, ref) => ),
Delete: forwardRef((props, ref) => ),
DetailPanel: forwardRef((props, ref) => ),
Edit: forwardRef((props, ref) => ),
Export: forwardRef((props, ref) => ),
Filter: forwardRef((props, ref) => ),
FirstPage: forwardRef((props, ref) => ),
LastPage: forwardRef((props, ref) => ),
NextPage: forwardRef((props, ref) => ),
PreviousPage: forwardRef((props, ref) => ),
ResetSearch: forwardRef((props, ref) => ),
Search: forwardRef((props, ref) =>