MUI-Datatables - Datatables for Material-UI
MUI-Datatables is a data tables component built on Material-UI V1. It comes with features like filtering, view/hide columns, search, export to CSV download, printing, pagination, and sorting. On top of the ability to customize styling on most views, there are two responsive modes "stacked" and "scroll" for mobile/tablet devices.
Install
npm install mui-datatables --save
Demo
Usage
; const columns = "Name" "Company" "City" "State"; const data = "Joe James" "Test Corp" "Yonkers" "NY" "John Walsh" "Test Corp" "Hartford" "CT" "Bob Herm" "Test Corp" "Tampa" "FL" "James Houston" "Test Corp" "Dallas" "TX"; const options = filterType: 'checkbox'; <MUIDataTable title="Employee List" data=data columns=columns options=options /> API
<MUIDataTable />
The component accepts the following props:
| Name | Type | Description |
|---|---|---|
title |
array | Title used to caption table |
columns |
array | Columns used to describe table. Must be an array of simple strings |
data |
array | Data used to describe table. Must be an array of simple strings |
options |
object | Options used to describe table |
Options:
| Name | Type | Default | Description |
|---|---|---|---|
styles |
object | Extend or override default styling | |
filterType |
string | 'dropdown' | Choice of filtering view. Options are "checkbox" or "dropdown" |
pagination |
boolean | true | Enable/disable pagination |
caseSensitive |
boolean | false | Enable/disable case sensitivity for search |
responsive |
string | 'stacked' | Enable/disable responsive table views. Options: 'stacked', 'scroll' |
rowsPerPage |
number | 10 | Number of rows allowed per page |
rowsPerPageOptions |
array | [10,15,20] | Options to provide in pagination for number of rows a user can select |
rowHover |
boolean | true | Enable/disable hover style over rows |
sort |
boolean | true | Show/hide sort icon from toolbar |
filter |
boolean | true | Show/hide filter icon from toolbar |
search |
boolean | true | Show/hide search icon from toolbar |
print |
boolean | true | Show/hide print icon from toolbar |
download |
boolean | true | Show/hide download icon from toolbar |
Customize Styling
In the options object, you have the ability to customize styling to your liking with the 'styles' property. Here are the following sections you can customize:
Table of Contents
An example of how we would target FilterList would look like:
const options = filter: true filterType: 'checkbox' styles: filterList: root: color: "#FF0000" chip: color: "#FEFEF0" ; <MUIDataTable title="some title" data=data columns=columns options=options /> Styling Table
const options = styles: table: head: row: cell: root: sortLabel: body: row: cell: root: ; Styling Toolbar
const options = styles: toolbar: root: {} spacer: actions: titleRoot: titleText: icon: iconActive: search: searchIcon: searchText: clearIcon: ; Styling FilterList
const options = styles: filterList: root: chip: ; Styling Pagination
const options = styles: pagination: ; License
The files included in this repository are licensed under the MIT license.