Material UI DataTables for react MaterialUI ^v1 - react-mui-datatables
react-mui-datatables is table component for Material-UI V1. This version comes with search,export csv,sort,pagination,print. more options coming soon.stay with us...
Install
npm install react-mui-datatables --save
Demo
Usage
For a simple table:
;; { superprops; ApphandleClick = ApphandleClick; } { } /* * This function for handle your action button click event * if you add action button you can get your own key from array using below command * please add indexColumn key to options object. */ static { /* Your code is here.alert is the example */ ; } { const columns = label: "First Name" key: "fname" /* this value is the your array object key.if you did't add this table is not working */ sort: true /* you can set column sort true / false as your own */ label: "Last Name" key: "lname" sort: true label: "Email" key: "email" label: "Gender" key: "gender" label: "Action" key: "action" /* <-- this is required if you using customAction */ ; /* <-- Table header columns. this is required */ const action = <Button onClick=ApphandleClick>Action</Button>; /* <-- action button */ const options = hasIndex: true /* <-- use numbers for rows*/ customAction: action /* <-- use action button for row */ searchBox: true /* <-- search true or false */ csv: true /* <-- csv download true or false */ indexColumn: "fname" /* <-- add your data first unique column name for this like _id, i used fname because i don't have a _id field in my array */ ; return <div> <MuiDataTable data=data columns=columns options=options title="User Data" /> </div> ; }
API
<MuiDataTable />
This component accepts the following props:
Name | Type | Description |
---|---|---|
title |
array | Title used to caption table |
columns |
array | Columns use to describe the table.this display on the table head cells.This is required |
data |
array | Data is your data array.This is required |
options |
object | Options use to customize your table |
Options: Use these as option object key.
Name | Type | Default | Description |
---|---|---|---|
hasIndex |
bool | false | This is use for create column with your index for adding numbers for rows first column |
customAction |
string | You can add custom action button if you want.please add this as a component | |
searchBox |
bool | true | You can remove search box using this option |
csv |
bool | true | You can remove csv download using this option |
indexColumn |
string | If add custom action button please set the indexColumn as your own array key. | |
printButton |
bool | true | You can disable print button using this. |
Custom Styles
You can styles using material ui CreateMuiTheme function.
License
The files included in this repository are licensed under the MIT license.