https://github.com/gihanrangana/react-mui-datatables
Material UI v1 DataTable for React.
https://github.com/gihanrangana/react-mui-datatables
material material-design material-ui mui-datatables react react-data-table react-mui-datatables
Last synced: 5 months ago
JSON representation
Material UI v1 DataTable for React.
- Host: GitHub
- URL: https://github.com/gihanrangana/react-mui-datatables
- Owner: gihanrangana
- License: mit
- Created: 2018-08-13T18:23:29.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-29T07:38:44.000Z (almost 8 years ago)
- Last Synced: 2025-10-12T19:45:11.138Z (8 months ago)
- Topics: material, material-design, material-ui, mui-datatables, react, react-data-table, react-mui-datatables
- Language: JavaScript
- Homepage: https://sl-codeblaster.github.io/react-mui-datatables/
- Size: 964 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Material UI DataTables for react MaterialUI ^v1 - react-mui-datatables
[](https://badge.fury.io/js/react-mui-datatables)
react-mui-datatables is table component for [Material-UI V1](https://www.material-ui.com). 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
[](https://codesandbox.io/s/0qx6yljwlv)
## Usage
For a simple table:
```js
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 = Action; /* <-- 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 (
);
}
}
```
## 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.