Home

Awesome

Material-UI-Datatables

npm Build Status Coverage Status

An another React Data tables component.
Material-UI-Datatables is a custom React component using awesome Material-UI. It provides rendering data and emitting events such as filter and column sort and pagination which may help you dealing with your data. But it doesn't provide features all done within the component. Most parts of this component are stateless, which means you need to implement your logic for the events.

Now material-ui provides example code of data tables component with it's v1.0.0 package

Installation

npm install material-ui-datatables

or

yarn add material-ui-datatables

Demo

Demo

Status

Work in progress

Usage

import React, {Component} from 'react';
import DataTables from 'material-ui-datatables';

const TABLE_COLUMNS = [
  {
    key: 'name',
    label: 'Dessert (100g serving)',
  }, {
    key: 'calories',
    label: 'Calories',
  },
  ...
];

const TABLE_DATA = [
  {
    name: 'Frozen yogurt',
    calories: '159',
    fat: '6.0',
    carbs: '24',
    ...
  }, {
    name: 'Ice cream sandwich',
    calories: '159',
    fat: '6.0',
    carbs: '24',
    ...
  },
  ...
];

class MyComponent extends Component {
  ...
  handleFilterValueChange = (value) => {
    // your filter logic
  }

  handleSortOrderChange = (key, order) => {
    // your sort logic
  }

  render() {
    return (
      <DataTables
        height={'auto'}
        selectable={false}
        showRowHover={true}
        columns={TABLE_COLUMNS}
        data={TABLE_DATA}
        showCheckboxes={false}
        onCellClick={this.handleCellClick}
        onCellDoubleClick={this.handleCellDoubleClick}
        onFilterValueChange={this.handleFilterValueChange}
        onSortOrderChange={this.handleSortOrderChange}
        page={1}
        count={100}
      />
    );
  }
}

Properties

NameTypeDefaultDescription
columnsarrayArray of column settings object
countnumber0
dataarray
enableSelectAllboolfalse
filterHintTextstring'Search'
filterValuestring''
footerToolbarStyleobject
headerToolbarModestring'default''default' or 'filter'
heightstring'inherit'
initialSortobject{column: 'column key', order: 'asc or desc'}
multiSelectableboolfalse
onCellClickfunction
onCellDoubleClickfunction
onFilterValueChangefunctionShould set 'showHeaderToolbar' to true first
onNextPageClickfunction
onPreviousPageClickfunction
onRowSelectionfunction
onRowSizeChangefunction
onSortOrderChangefunction
pagenumber1
rowSizenumber10
rowSizeLabelstring'Rows per page:'
rowSizeListarray[10, 30, 50, 100]
selectableboolfalse
selectedRowsarray[]
showCheckboxesboolfalse
showFooterToolbarbooltrue
showHeaderToolbarboolfalse
showHeaderToolbarFilterIconbooltrue
showRowHoverboolfalse
showRowSizeControlsboolfalse
summaryLabelTemplatefunction
tableBodyStyleobject
tableHeaderColumnStyleobject
tableHeaderStyleobject
tableRowColumnStyleobject
tableRowStyleobject
tableStyleobject
tableWrapperStyleobject
titlestringShould set 'showHeaderToolbar' to true first
titleStyleobjectShould set 'showHeaderToolbar' to true first
toolbarIconRightnodeCan be an array of IconButton nodes

Column settings

NameTypeDefaultDescription
keystring
labelstring
sortableboolfalse
tooltipstring
classNamestring
renderfunction
alignRightbool
styleobjectInline column styles

Setting example

{
  key: 'name',
  label: 'Dessert (100g serving)',
  sortable: true,
  tooltip: 'Dessert (100g serving)',
  className: 'important-column',
  style: {
    width: 250,
  },
  render: (name, all) => <p>{name}</p>
}

License

MIT