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...
npm install react-mui-datatables --save
For a simple table:
import MuiDataTable from "react-mui-datatables"; import data from "./data"; class App extends Component { constructor(props) { super(props); App.handleClick = App.handleClick.bind(this); } componentWillMount() { } /* * 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 handleClick(e) { /* Your code is here.alert is the example */ alert("parent td#id: " + e.target.parentNode.id); } render() { 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={App.handleClick}>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> ); } }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. |
You can styles using material ui CreateMuiTheme function.
The files included in this repository are licensed under the MIT license.