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. You can check about the component in Google's guideline.

Installation

npm install 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',
    protein: '4.0',
    sodium: '87',
    calcium: '14%',
    iron: '1%',
  }, {
    name: 'Ice cream sandwich',
    calories: '159',
    fat: '6.0',
    carbs: '24',
    protein: '4.0',
    sodium: '87',
    calcium: '14%',
    iron: '1%',
  },
  ...
];

class MyComponent extends Component {
  ...
  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'
footerToolbarStyle	object
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
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
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>
}

License

MIT

fa10/material-ui-datatables