mui-react-datatables

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 values text: free textfield input numeric: 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) => {}