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:

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>
        );
    }

}

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.