README

React Material Table

Introduction

@trautmann.dev/react-material-table is a simple and powerful Datatable for React based on Material-UI Table inspired from material-table with some additional features. Despite there is already a popular package material-table our there, why this package also released? Well, material-table does a good job, but

material-table does not follow material design guidelines strictly.
In material-table, some components can be overridden, but others cannot be.
Filtering in material-table does not follow Google Material Desing guidelines. Besides, e.g. You cannot hide and then filter for a hidden column.
Adding/Updating in the material-table table also suffers from the issue above. E.g. You have readonly columns at left, screen is not wide enough to hold all columns. Cells expecting input are not shown, at a glance, user see a blank row and should scroll till to reach input fields.

Goal of @trautmann.dev/react-material-table is to solve the problems above with a better and more Google Material Design conform UX:

Besides, replacing the standard filter with a custom one, @trautmann.dev/react-material-table also offer a variety of built-in filters.
No in table add/edit/delete operations, but pop-up a dialog with form containing all necessary fields for add/edit operations. Hiding columns or white space because of the read-only cells is not a problem anymore.
Well, not Google Material Design guideline, but a long waited feature - responsive rows that transform table rows into boxes containing header/cell value pair for each column as rows in a box. Explore it in "Responsive Design Row Transformation" part of the "Features" documentation.
- Desktop
- Mobile
and more cool features.

Documentation and Demo

Storybook: https://react-material-table.trautmann.dev

Support

You can support @trautmann.dev/react-material-table with

Installation

Before starting with coding, please consider that this package has peer dependencies depending on what you are going to use.

You have to install following dependencies:

"@material-ui/core": "^4.12.3"
"@material-ui/icons": "^4.11.2"
"@material-ui/lab": "^4.0.0-alpha.60"
"react": "^17.0.2"
"react-beautiful-dnd": "^13.1.0"
"react-dom": "^17.0.2"
"react-table": "^7.7.0"

If you are going to use export feature to generate PDF/CSV files from tables:

"filefy": "^0.1.11"
"jspdf": "^2.4.0"
"jspdf-autotable": "^3.5.20"

If your table has `date`, `datetime` or `time` type columns:

"@material-ui/pickers": "^3.3.10"

"@material-ui/pickers": "^3.3.10" also has dependencies, please follow their instructions on https://material-ui-pickers.dev/getting-started/installation On Demos "date-fns" Date/Time library is used.

Complete installation:

npm

npm i "@trautmann.dev/react-material-table" @material-ui/core @material-ui/icons @material-ui/lab @material-ui/pickers react react-beautiful-dnd react-dom react-table filefy jspdf jspdf-autotable date-fns @date-io/date-fns@1.3.13

yarn

yarn add "@trautmann.dev/react-material-table" @material-ui/core @material-ui/icons @material-ui/lab @material-ui/pickers react react-beautiful-dnd react-dom react-table filefy jspdf jspdf-autotable date-fns @date-io/date-fns@1.3.13

Usage

Please have a look into the storybook for more detailed usage examples and documentation.

import ReactDOM from "react-dom";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import { ReactMaterialTable } from "@trautmann.dev/react-material-table";

const rootElement = document.getElementById("root");
ReactDOM.render(
  // We have date/time/date-time type columns, so MUI Picker Utils Provider is needed.
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <ReactMaterialTable
      columns={[
        { title: "Dessert (100g serving)", field: "name", type: "string" },
        { title: "Calories", field: "calories", type: "numeric", numberSettings: { locale: "en-US" } },
        { title: "Fat (g)", field: "fat", type: "numeric", numberSettings: { locale: "en-US" } },
        { title: "Carbs (g)", field: "carbs", type: "numeric", numberSettings: { locale: "en-US" } },
        { title: "Protein (g)", field: "protein", type: "numeric", numberSettings: { locale: "en-US" } },
        { title: "Date", field: "date", type: "date", dateSetting: { locale: "en-US" } },
        { title: "Time", field: "time", type: "time", dateSetting: { locale: "en-US" } },
        { title: "Date & Time", field: "datetime", type: "datetime", dateSetting: { locale: "en-US" } },
        { title: "Recommended", field: "recommended", type: "boolean" },
        { title: "Price", field: "price", type: "currency", currencySetting: { locale: "en-US", formatOptions: { currency: "USD" } } }
      ]}
      data={[
        {
          name: "Frozen yoghurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          date: new Date(2021, 3, 5, 15, 15, 5, 200),
          time: new Date(2021, 3, 5, 15, 15, 5, 200),
          datetime: new Date(2021, 3, 5, 15, 15, 5, 200),
          recommended: true,
          price: 2.99
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          date: new Date(2021, 3, 1, 0, 15, 15, 100),
          time: new Date(2021, 3, 1, 0, 15, 15, 100),
          datetime: new Date(2021, 3, 1, 0, 15, 15, 100),
          recommended: true,
          price: 5.99
        }
      ]}
      options={{}}
    />
  </MuiPickersUtilsProvider>,
  rootElement
);

Current state

Currently, grouping and tree-date features provided by material-table are not supported in this package, because latter features are not included or supported by Google Material Design Guidelines. Currently, no plans for adding those two features. If there would be a huge demand for those features, we would add them.

Usage no npm install needed!