@oniti/datatable-material

Datatable basé sur material ui

Usage no npm install needed!

<script type="module">
  import onitiDatatableMaterial from 'https://cdn.skypack.dev/@oniti/datatable-material';
</script>

README

Datatable Material-Ui

N|Solid

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

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