# react-mui-datatables

> Material UI v1 DataTable for React.it comes with features like sort,search,export csv,pagination.more options comming soon...

Latest version **1.1.2** (published 2018-08-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-mui-datatables
pnpm add react-mui-datatables
yarn add react-mui-datatables
bun add react-mui-datatables
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2018-08-29 |
| First published | 2018-08-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 30.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Gihan Rangana |
| Maintainers | gihan.rangana |
| Keywords | react, material-ui, mui-datatables, reactjs, material-design, datatable, react-material |

## Links

- npm: https://www.npmjs.com/package/react-mui-datatables
- Repository: https://github.com/GihanRangana/react-mui-datatables
- Homepage: https://gihanrangana.github.io/react-mui-datatables/
- Issues: https://github.com/GihanRangana/react-mui-datatables/issues
- npm.io page: https://npm.io/package/react-mui-datatables

## Dependencies (6)

- [react-csv](https://npm.io/package/react-csv.md) ^1.0.14
- [react-jss](https://npm.io/package/react-jss.md) ^8.6.1
- [react-to-print](https://npm.io/package/react-to-print.md) ^2.0.0-alpha-2
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^1.4.3
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^2.0.1
- [react-excel-workbook](https://npm.io/package/react-excel-workbook.md) 0.0.4

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2018-08-29
- 1.1.1 — 2018-08-17
- 1.1.0 — 2018-08-15
- 1.0.4 — 2018-08-13
- 1.0.3 — 2018-08-13
- 1.0.2 — 2018-08-13
- 1.0.1 — 2018-08-13
- 1.0.0 — 2018-08-12

## README

# Material UI DataTables for react MaterialUI ^v1 - react-mui-datatables

[![npm version](https://badge.fury.io/js/react-mui-datatables.svg)](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

[![Edit 0qx6yljwlv](https://codesandbox.io/static/img/play-codesandbox.svg)](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 = <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


#### &lt;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.

---
_Source: https://npm.io/package/react-mui-datatables · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._