@oniti/datatable-material NPM

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": "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