react-material-table

Contents

• Installation
• Usage
• Why another table?
• Features
• API
• Styling

Installation

npm install --save react-material-table

Usage

Basic Example:

import React from "react"
import Table from "react-material-table"

const data = [
    {
        name: "Alice",
        age: 25
    },
    {
        name: "Bob",
        age: 42
    }
]

// columns defines all the behavior of each column. In this basic example it
// just defines the columns title and what data should be displayed
const columns = [
    {
        title: "Name",
        dataName: "name"
    },
    {
        title: "Age",
        dataName: "age"
    }
]

const MyUserTable = () => <Table data={data} columns={columns} />

For a more advanced example, refer to the codesandbox, https://codesandbox.io/s/kx3wzqk2m5

Why another table?

If you google react table looking for a table component to include in your react application, you will find a lot of options. So why did we bother creating another one?

During our research searching for a table component we found two different types of tables:

• Full featured, "heavyweight" tables, which could functionally do everything we required but with complex API's that weren't very user friendly
• Or comparatively basic components with nice, simple API's but lack all the features we required

This table is definitely more on the basic side of the spectrum, but contains all the features that we typically require (which is hopefully the set of features you need as well!)

Features

• Click handlers for rows
• Accordions
• Local sorting (alphanumeric by default if a date object is supplied it will compare by date. A custom comparator function can also be supplied)
• Remote sorting (via use of sortCallback)
• Optional render props for cell values
• "No Data" and "Loading" states are handled
• Material Design styling out-of-the-box
• All styling is fully customisable

API

Props:

| Name | Type | Default | Description | | -------------------- | ----------------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | data | Array<Object> | | Array of data to be populated in the table | | columns | Array<Column> | | Specify the details of the columns in the table (see column object structure below) | | onRowSelection? | ({rowData: Object, toggleAccordion: Function }) | null | Function to be called when a row is clicked | | accordion? | (rowData: Object) => Element | null | Function that returns what to render when a row accordion is opened | | className? | string | "" | Entrypoint for overriding styles, will work with any styling solution that supports nested selectors, CSS-in-JS, less, SASS etc (see below for class names) | | loading? | boolean | false | When true, shows a loading spinner in the table body | | defaultSort? | { dataName: string, order?: "asc" | "desc" } | null | Column to be sorted by default | | sortCallback? | ({dataName: string, order?: "asc" | "desc" }) => any | null | Should only be used if you want complete control of sorting (e.g. for remote sorting). For local sorting use the sort property in Column | | header? | string | "" | Displays header for table | | headerCustomContent? | Element | null | Custom JSX that will be rendered in the header row, useful for table actions like filter | | noData? | Element | string | "No Data" | Content to be rendered in the table body when data is empty | | defaultMinColWidth? | number | null | Minimum width (in pixels) for each columns. Can be overridden on a per column basis with minWidth in the Column object |

Column object:

| Name | Type | Default | Description | | ------------------- | ------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | title | string | | The column header title | | dataName | string | | dataName is the name of the field in data to display in this column, this field is also used for sorting and therefore is required even if cellValue is provided | | cellValue? | ({rowData: Object, toggleAccordion: Function, isOpen: boolean }) => string | Element | null | cellValue is a render prop that lets you customise what is rendered for the data in a specific column | | colWidthProportion? | number | 1 | Sizing the columns of the table is done with colWidthProportion | | minWidth? | number | null | minWidth of the column, will override `defaultMinColWidth if it is supplied | | sort? | boolean | (a: Object, b: Object) => number | null | Determines whether the column is sortable or not, if a boolean is supplied then the column is sorted alphanumerically. Alternatively, a custom sort comparator function can also be supplied |

Styling

All of the key UI elements of the table have class names to allow for custom styling. The complete list of class names are:

• table-div
• table-title-row
• table-title-div
• table-header-row
• table-header-cell
• table-row
• table-cell

and applying styling at the root level

For example, using the emotion (version 9) css function:

import { css } from "emotion"

const tableStyle = {
    ".table-div": {
        backgroundColor: "grey"
    },
    ".table-cell": {
        padding: "0px"
    }
}

const MyTable = () => <Table data={data} columns={columns} className={css(tableStyle)} />

or using the emotion (version 10) css function:

import { css } from "@emotion/core"

const tableStyle = {
    ".table-div": {
        backgroundColor: "grey"
    },
    ".table-cell": {
        padding: "0px"
    }
}

const MyTable = () => <Table data={data} columns={columns} css={tableStyle} />