Material-UI React Datatablrs

| | build status | build version | downloads | | ------------ | ------------ | ------------ | ------------ | | latest | | | | | dev | | | |

MUI Datatables is a library that takes an array of json data and displays it in a simple, configurable way. This library was inspired by mui-datatables however I plan to address many of the shortcomings of this library in my own implementation such as: a footer row to be used for totals, multi-sorting of columns, key-driven configuration (vs index-based), and more to come.

Getting Started

Installation

npm install mui-react-datatables

or

yarn add mui-react-datatables

Using the table

import MUIDatatable from 'mui-react-datatables'

Table Options

const options = {
	fillEmptyRows: true,
	rowsPerPage: 10,
}

Column Options

const columns = [
    {
        title: "Name",
        Cell: item => `${item.name.first} ${item.name.last}`
    },
    {
        title: "Company",
        accessor: "company",
    },
    {
        title: "Age",
        accessor: "age",
    },
    {
        title: "Phone",
        accessor: "phone",
        sortValue: item => parseInt(item.phone.replace(/[^0-9]+/g,"")),
    },
    {
        title: "Balance",
        accessor: "balance",
        sortValue: item => parseFloat(item.balance.replace(/[^0-9.-]+/g,"")),
    },
    {
        title: "Picture",
        Cell: (item) => <img src={item.picture} style={{width: 32, height: 32}} />,
        visible: false,
    },
]

Optional Refs

const [filters, setFilters] = useState([])
const [sorts, setSorts] = useState([])

Implementation

<MUIDatatable
	title={"My Table"}
	data={data}
	columns={columns}
	options={options}
	filtersRef={setFilters}
	sortsRef={setSorts}
/>

API

<MUIDatatable />

The component accepts the following props:

|Name|Type|Default|Required|Description |:--:|:-----|:-----|:-----|:-----| |title|string|""|false|Title of the table |options|object|{}|true|Options to be supplied to table. |columns|[object]|[]|true|Columns to be displayed in the table. |data|[object]|[]|true|Data to be supplied to table. |filtersRef|function||false|Accessor for filters array. (filters) => {} |sortsRef|function||false|Accessor for sorts array. (sorts) => {} |filteredDataRef|function||false|Accessor for filtered data. (filteredData) => {}

options:

|Name|Type|Default|Required|Description |:--:|:-----|:--|:-----|:-----| |fillEmptyRows|bool|false|false|Should the table fill empty rows with blanks. |rowsPerPage|number|10|false|Number of rows displayed on a page. |csvExport|boolean|true|false|Display CSV export button. |csvFilename|string|title || "table"|false|Filename for CSV export. |initialSorts|[object]|[]|false|Initial sorting list. |initialFilters|[object]|[]|false|Initial filtering list. |onRowClick|function||false|Function call when row is clicked. (row, event) => {} |maxRowHeight|number|null|false|Max height of a row. |footerRow|[object]|[]|false|Should the footer row be displayed. |highlightedRowId|number|null|false|id of row to highlight. |loading|boolean|false|false|Should table display loading cell. |LoadingCell|function||false|Component to render when loading is true |NoRowsCell|function||false|Component to render when data.length is 0

columns[]:

|Name|Type|Default|Required|Description |:--:|:-----|:--|:-----|:-----| |id|string|index|false|Unique identifier. Used for reference in initialSorts and initialFilters |title|string||true|Title of the column |accessor|string||true*|Key of value in row to display.*not required if using Cell |Cell|function||false|Render function of the cell. Overrides accessor (value, row) => {} |LoadingCell|component||false|Loading component of the cell. Overrides accessor |Footer|function||false|Render function of the cell footer. (data, column) => {} |sortable|bool|true|false|Can this column be sorted using column headers. |sortValue|function||false|Custom sort value. Defaults to accessor then Cell. (value, row) => {} |filterable|bool|true|false|Can this column be filtered / searched on. Applies to both column filters and global search. |filterValue|function||false|Custom filter value. Defaults to accessor then Cell. (value, row) => {} |filterType|string|select|false|select: dropdown based on available valuestext: free textfield inputnumeric: comparison operations + numeric input |hideable|bool|true|false|Can the column be hidden / unhidden |visible|bool|true|false|Is the column visible by default. User can unhide if hideable is set to true |csvHeader|string|title|false|Header for the column. |csvValue|string||false|Value to be exported for cell. Default is what renders to the table. (value, row) => {}