Datatable Material-Ui

Installation

$ npm install @oniti/datatable-material --save

Exemple

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": "[email protected]",
        "phone": "+1 (863) 517-3635"
      },
      {
        "_id": "5b1804dd0dc499695c8f50a3",
        "balance": "$1,203.60",
        "picture": "http://placehold.it/32x32",
        "age": 25,
        "name": "Burton Lane",
        "gender": "male",
        "email": "[email protected]",
        "phone": "+1 (838) 461-3237"
      },
      {
        "_id": "5b1804dd204f86c6f0fdbe3a",
        "balance": "$3,692.59",
        "picture": "http://placehold.it/32x32",
        "age": 34,
        "name": "Susanne Whitley",
        "gender": "female",
        "email": "[email protected]",
        "phone": "+1 (829) 551-2760"
      },
      {
        "_id": "5b1804dd3beda89b69fc0858",
        "balance": "$3,337.96",
        "picture": "http://placehold.it/32x32",
        "age": 20,
        "name": "Marquez Roman",
        "gender": "male",
        "email": "[email protected]",
        "phone": "+1 (955) 542-3013"
      },
      {
        "_id": "5b1804dd111b3914d3305175",
        "balance": "$1,860.26",
        "picture": "http://placehold.it/32x32",
        "age": 30,
        "name": "Veronica Schwartz",
        "gender": "female",
        "email": "[email protected]",
        "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