npm package: @oniti/datatable-material
Description: Datatable basé sur material ui
Author: BOUYER François
Latest version: 1.7.8

# Datatable Material-Ui

[![N|Solid](https://www.oniti.fr/wp-content/uploads/2018/04/Logo-Oniti.png)](https://www.oniti.fr/)

### Installation
```sh
$ npm install @oniti/datatable-material --save
```

### Exemple

```javascript
import React, {Component} from 'react';
import {DataTable, Cell} from '@oniti/datatable-material';
import {withStyles} from '@material-ui/core/styles';
import { Grid } from '@material-ui/core';

class Test extends Component {
  state = {
    datas:[
      {
        "_id": "5b1804dd6556c8a70e9198c9",
        "balance": "$1,421.97",
        "picture": "http://placehold.it/32x32",
        "age": 38,
        "name": "Moss Clemons",
        "gender": "male",
        "email": "mossclemons@earthplex.com",
        "phone": "+1 (863) 517-3635"
      },
      {
        "_id": "5b1804dd0dc499695c8f50a3",
        "balance": "$1,203.60",
        "picture": "http://placehold.it/32x32",
        "age": 25,
        "name": "Burton Lane",
        "gender": "male",
        "email": "burtonlane@earthplex.com",
        "phone": "+1 (838) 461-3237"
      },
      {
        "_id": "5b1804dd204f86c6f0fdbe3a",
        "balance": "$3,692.59",
        "picture": "http://placehold.it/32x32",
        "age": 34,
        "name": "Susanne Whitley",
        "gender": "female",
        "email": "susannewhitley@earthplex.com",
        "phone": "+1 (829) 551-2760"
      },
      {
        "_id": "5b1804dd3beda89b69fc0858",
        "balance": "$3,337.96",
        "picture": "http://placehold.it/32x32",
        "age": 20,
        "name": "Marquez Roman",
        "gender": "male",
        "email": "marquezroman@earthplex.com",
        "phone": "+1 (955) 542-3013"
      },
      {
        "_id": "5b1804dd111b3914d3305175",
        "balance": "$1,860.26",
        "picture": "http://placehold.it/32x32",
        "age": 30,
        "name": "Veronica Schwartz",
        "gender": "female",
        "email": "veronicaschwartz@earthplex.com",
        "phone": "+1 (825) 561-2393"
      }
    ]
  }

  formatPicture(user){
    return <img src={user.picture} alt={user.name} />;
  }
  render() {
    const {classes} = this.props

    return (
      <div className={classes.root}>
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <DataTable
            datas={this.state.datas}
            showPagination={true}
            showSearch={true}
            defaultSort="name"

            >
              <Cell
                title="Picture"
                format={this.formatPicture}
              />
              <Cell
              datakey="name"
              title="Name"
              sortable={true}
              searchable={true}
              />
              <Cell
              datakey="gender"
              title="Gender"
              sortable={true}
              searchable={true}
              />
              <Cell
              datakey="email"
              title="Email"
              sortable={true}
              searchable={true}
              />

            </DataTable>
          </Grid>
        </Grid>
      </div>
    );
  }
}
const style = theme => ({
  root: {
    flexGrow: 1
  },
})
export default withStyles()(Test)

```

### Props

#### DataTable
| Name | Type | Description |
| ------ | ------ | ------ |
| datas | Array
| showPagination | Bool |  Show pagination
| showSearch | Bool | Show search input
| sortType | String | 'asc' or 'desc'
| defaultSort | String | defaut key for sorting
| searchlabel | String | Label for search input, default : "Rechercher"
| nodatalabel | String | text for no data , default : "Aucune donnée"
| className | String |
| labelRowsPerPage | String | text before select row per page, default : "Lignes par page"
| labelDisplayedRows | Func | function for pagination information, (data) => return data.from + ' - ' + data.to + ' sur ' + data.count
| rowsPerPageOptions | Array | default [5, 10, 25]
| rowsPerPage | Int | default select rowsPerPageOptions
| getStateOnUnmount | Func | callback function call on componentWillUnmount return datatable state
| initialValues | Object | initial value to initialize datatable (previous state)
| extraNodes | Array | Element to insert ex : [{ element: this.getBtnAdd(),  position: 'top-right'}], positions aviables 'top-right', 'top-left'
| rowClassName | Func | Function to return className (obj, key) => className
| cancelUpdateCheck | Bool | Cancel shouldUpdate verification
| asynchrone | Bool | Switch to Async mode
| updateDataAsync   | Func | Async mode - Call to update data should return a promise
| totalAsyncResult  | Number | Async mode - Total of result
| loading           | Bool  | Async mode - loading


#### Cell
| Name | Type | Description |
| ------ | ------ | ------ |
| datakey | String | key of object
| title | String | Title of collumn
| format | Func | function to render Cell (obj, key) =>
| sortable | Bool | Col sortable
| searchable | Bool | Col searchable
| isDate | Bool | Value is a date
| className | String |
| useDataKeyOnSearch | Bool | To search with datakey value

License
----

MIT