: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

1<link
2  rel="stylesheet"
3  href="https://fonts.googleapis.com/icon?family=Material+Icons"
4/>

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:

1import AddBox from "@material-ui/icons/AddBox";
2import ArrowDownward from "@material-ui/icons/ArrowDownward";

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

1import { 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

1import { forwardRef } from 'react';
2
3import AddBox from '@material-ui/icons/AddBox';
4import ArrowDownward from '@material-ui/icons/ArrowDownward';
5import Check from '@material-ui/icons/Check';
6import ChevronLeft from '@material-ui/icons/ChevronLeft';
7import ChevronRight from '@material-ui/icons/ChevronRight';
8import Clear from '@material-ui/icons/Clear';
9import DeleteOutline from '@material-ui/icons/DeleteOutline';
10import Edit from '@material-ui/icons/Edit';
11import FilterList from '@material-ui/icons/FilterList';
12import FirstPage from '@material-ui/icons/FirstPage';
13import LastPage from '@material-ui/icons/LastPage';
14import Remove from '@material-ui/icons/Remove';
15import SaveAlt from '@material-ui/icons/SaveAlt';
16import Search from '@material-ui/icons/Search';
17import ViewColumn from '@material-ui/icons/ViewColumn';
18
19const tableIcons = {
20    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
21    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
22    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
23    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
24    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
25    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
26    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
27    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
28    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
29    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
30    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
31    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
32    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
33    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
34    SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
35    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
36    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
37  };
38
39<MaterialTable
40  icons={tableIcons}
41  ...
42/>

Usage

Here is a basic example of using material-table within a react application.

1import React, { Component } from "react";
2import ReactDOM from "react-dom";
3import MaterialTable from "material-table";
4
5class App extends Component {
6  render() {
7    return (
8      <div style={{ maxWidth: "100%" }}>
9        <MaterialTable
10          columns={[
11            { title: "Adı", field: "name" },
12            { title: "Soyadı", field: "surname" },
13            { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
14            {
15              title: "Doğum Yeri",
16              field: "birthCity",
17              lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
18            },
19          ]}
20          data={[
21            {
22              name: "Mehmet",
23              surname: "Baran",
24              birthYear: 1987,
25              birthCity: 63,
26            },
27          ]}
28          title="Demo Title"
29        />
30      </div>
31    );
32  }
33}
34
35ReactDOM.render(<App />, document.getElementById("react-div"));

Contributing

We'd love to have your helping hand on material-table! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

If you have any sort of doubt, idea or just want to talk about the project, feel free to join our chat on Gitter :)

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

This project is licensed under the terms of the MIT license.