Skip to content

nwaywood/react-material-table

Repository files navigation

react-material-table

npm package

Contents

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} />