A simple and powerful Datatable for React based on [Material-UI Table](https://material-ui.com/api/table/) with many additional features.
[](http://isitmaintained.com/project/gunn4r/material-ui-advanced-table "Average time to resolve an issue")
## Demo and documentation
You can access all code examples and documentation via storybook [**https://gunn4r.github.io/material-ui-advanced-table/**](https://gunn4r.github.io/material-ui-advanced-table/).
## Prerequisites
The minimum `React` version material-ui-advanced-table supports is `^16.8.5` for hook support.
#### 2.Add material icons
There are two ways to use icons in material-ui-advanced-table either import the material icons font via html OR import material icons and use the material-ui-advanced-table `icons` prop.
##### HTML
```html
```
OR
##### Import Material icons
Icons can be imported to be used in material-ui-advanced-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 ArrowUpward from "@material-ui/icons/ArrowUpward";
```
If your environment support tree-shaking you can also import the icons this way:
```jsx
import { AddBox, ArrowUpward } 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](https://webpack.js.org/guides/tree-shaking/). It may also impact Hot Module Reload performance. Source: [@material-ui/icons](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-icons/README.md#imports)
Example
```jsx
import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
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: AddBox,
Check: Check,
Clear: Clear,
Delete: DeleteOutline,
DetailPanel: ChevronRight,
Edit: Edit,
Export: SaveAlt,
Filter: FilterList,
FirstPage: FirstPage,
LastPage: LastPage,
NextPage: ChevronRight,
PreviousPage: ChevronLeft,
ResetSearch: Clear,
Search: Search,
SortArrow: ArrowUpward,
ThirdStateCheck: Remove,
ViewColumn: ViewColumn
};
```
## Usage
Here is a basic example of using material-ui-advanced-table within a react application.
```jsx
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { AdvancedMaterialTable } from "material-ui-advanced-table";
class App extends Component {
render() {
return (
);
}
}
ReactDOM.render(, document.getElementById("react-div"));
```
## Contributing
We'd love to have your helping hand on `material-ui-advanced-table`! See [CONTRIBUTING.md](https://github.com/gunn4r/material-ui-advanced-table/blob/master/.github/CONTRIBUTING.md) for more information on what we're looking for and how to get started.
## License
This project is licensed under the terms of the [MIT license](/LICENSE).
---
_Source: https://npm.io/package/material-ui-advanced-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._