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

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'
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
showHeaderToolbar	bool	false
summaryLabelTemplate	function
tableBodyStyle	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
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,
  },
}

License

MIT