项目作者: hyojin

项目描述 :
An another React Data tables component.
高级语言: JavaScript
项目地址: git://github.com/hyojin/material-ui-datatables.git
创建时间: 2016-11-08T08:36:28Z
项目社区:https://github.com/hyojin/material-ui-datatables

开源协议:MIT License

下载


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

  1. npm install material-ui-datatables

or

  1. yarn add material-ui-datatables

Demo

Demo

Status

Work in progress

Usage

  1. import React, {Component} from 'react';
  2. import DataTables from 'material-ui-datatables';
  3. const TABLE_COLUMNS = [
  4. {
  5. key: 'name',
  6. label: 'Dessert (100g serving)',
  7. }, {
  8. key: 'calories',
  9. label: 'Calories',
  10. },
  11. ...
  12. ];
  13. const TABLE_DATA = [
  14. {
  15. name: 'Frozen yogurt',
  16. calories: '159',
  17. fat: '6.0',
  18. carbs: '24',
  19. ...
  20. }, {
  21. name: 'Ice cream sandwich',
  22. calories: '159',
  23. fat: '6.0',
  24. carbs: '24',
  25. ...
  26. },
  27. ...
  28. ];
  29. class MyComponent extends Component {
  30. ...
  31. handleFilterValueChange = (value) => {
  32. // your filter logic
  33. }
  34. handleSortOrderChange = (key, order) => {
  35. // your sort logic
  36. }
  37. render() {
  38. return (
  39. <DataTables
  40. height={'auto'}
  41. selectable={false}
  42. showRowHover={true}
  43. columns={TABLE_COLUMNS}
  44. data={TABLE_DATA}
  45. showCheckboxes={false}
  46. onCellClick={this.handleCellClick}
  47. onCellDoubleClick={this.handleCellDoubleClick}
  48. onFilterValueChange={this.handleFilterValueChange}
  49. onSortOrderChange={this.handleSortOrderChange}
  50. page={1}
  51. count={100}
  52. ></DataTables>
  53. );
  54. }
  55. }

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

  1. {
  2. key: 'name',
  3. label: 'Dessert (100g serving)',
  4. sortable: true,
  5. tooltip: 'Dessert (100g serving)',
  6. className: 'important-column',
  7. style: {
  8. width: 250,
  9. },
  10. render: (name, all) => <p>{name}</p>
  11. }

License

MIT