npm.io
1.9.0 • Published yesterday

@oniti/datatable-material

Licence
MIT
Version
1.9.0
Deps
4
Size
88 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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
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
search String Controlled search - valeur de recherche pilotée par l'hôte. Dès qu'elle est fournie, la recherche passe en mode "controlled" : la DataTable l'utilise partout (dont oniti_filter en async) au lieu de son état interne. Permet de rendre son propre champ de recherche ailleurs (souvent avec showSearch={false}).
onSearchChange Func Controlled search - (value) => void, appelé quand le champ intégré est modifié. Utile uniquement si showSearch reste actif en mode controlled.
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

Keywords

react-componentdatatablematerial-ui