Material-UI-Datatables

An another React Data tables component.
Material-UI-Datatables is a custom React component using awesome Material-UI. It provides filter and column sort and pagination features to display data mostly in desktop applications. You can check about the component in Google's guideline.

Installation

npm install material-ui-datatables

Demo

Status

Work in progress

Properties

Name	Type	Default	Description
columns	array
count	number	0
data	array
enableSelectAll	bool	false
filterHintText	string	'Search'
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
showCheckboxes	bool	false
showHeaderToolbar	bool	false
summaryLabelTemplate	function
title	string		Should set 'showHeaderToolbar' to true first
toolbarIconRight	node		Can be an array of IconButton nodes

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}
      />
    );
  }
}

License

MIT