Material-ui-datatables NPM

Material-UI-Datatables

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

yarn add material-ui-datatables

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

Name	Type	Default	Description
columns	array		Array of column settings object
count	number	0
data	array
enableSelectAll	bool	false
filterHintText	string	'Search'
filterValue	string	''
footerToolbarStyle	object
headerToolbarMode	string	'default'	'default' or 'filter'
height	string	'inherit'
initialSort	object		{column: 'column key', order: 'asc or desc'}
multiSelectable	bool	false
onCellClick	function
onCellDoubleClick	function
onFilterValueChange	function		Should set 'showHeaderToolbar' to true first
onNextPageClick	function
onPreviousPageClick	function
onRowSelection	function
onRowSizeChange	function
onSortOrderChange	function
page	number	1
rowSize	number	10
rowSizeLabel	string	'Rows per page:'
rowSizeList	array	10, 30, 50, 100
selectable	bool	false
selectedRows	array	[]
showCheckboxes	bool	false
showFooterToolbar	bool	true
showHeaderToolbar	bool	false
showHeaderToolbarFilterIcon	bool	true
showRowHover	bool	false
showRowSizeControls	bool	false
summaryLabelTemplate	function
tableBodyStyle	object
tableHeaderColumnStyle	object
tableHeaderStyle	object
tableRowColumnStyle	object
tableRowStyle	object
tableStyle	object
tableWrapperStyle	object
title	string		Should set 'showHeaderToolbar' to true first
titleStyle	object		Should set 'showHeaderToolbar' to true first
toolbarIconRight	node		Can be an array of IconButton nodes

Column settings

Name	Type	Default	Description
key	string
label	string
sortable	bool	false
tooltip	string
className	string
render	function
alignRight	bool
style	object		Inline 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>
}