mui-react-datatables v0.0.14

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:

options:

columns[]: