material-ui-datatables, 另一个响应数据表组件

分享于 

5分钟阅读

GitHub

  繁體 雙語
An another React Data tables component.
  • 源代码名称:material-ui-datatables
  • 源代码网址:http://www.github.com/hyojin/material-ui-datatables
  • material-ui-datatables源代码文档
  • material-ui-datatables源代码下载
  • Git URL:
    git://www.github.com/hyojin/material-ui-datatables.git
    Git Clone代码到本地:
    git clone http://www.github.com/hyojin/material-ui-datatables
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/hyojin/material-ui-datatables
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Material-UI-Datatables

    npmBuild StatusCoverage Status

    另一个响应数据表组件。
    Material-UI-Datatables是一个使用出色的材质ui组件的定制的响应组件。 它提供呈现数据和发出诸如筛选器和列排序和分页这样的事件,可以帮助你处理数据。 但它并没有提供所有在组件中完成的功能。 组件的大部分是无状态的,这意味着你需要为事件实现你的逻辑。

    现在材料ui提供了示例代码示例代码表component它是v1.0.0包

    安装

    
    
    
    
    npm install material-ui-datatables
    
    
    
    

    或者

    
    
    
    
    yarn add material-ui-datatables
    
    
    
    

    演示

    演示工具

    状态

    进行工作

    用法

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

    属性

    名称类型默认说明
    array列设置的array: 对象
    计数数号码0
    数据array
    enableSelectAllboolfalse
    filterHintText字符串''搜索'
    filterValue字符串''''
    footerToolbarStyle对象
    headerToolbarMode字符串'默认'''默认'或者或或者'筛选器"'
    高度字符串''继承"'
    initialSort对象{column:'列关键字',顺序:'asc或者 desc'}
    multiSelectableboolfalse
    onCellClick函数
    onCellDoubleClick函数
    onFilterValueChange函数应首先将'showheadertoolbar'设置为 true
    onNextPageClick函数
    onPreviousPageClick函数
    onRowSelection函数
    onRowSizeChange函数
    onSortOrderChange函数
    页面号码1
    rowSize号码10
    rowSizeLabel字符串'Rows行:''
    rowSizeListarray[10, 30, 50, 100 ]
    可选boolfalse
    selectedRowsarray[ ]
    showCheckboxesboolfalse
    showFooterToolbarbooltrue
    showHeaderToolbarboolfalse
    showHeaderToolbarFilterIconbooltrue
    showRowHoverboolfalse
    showRowSizeControlsboolfalse
    summaryLabelTemplate函数
    tableBodyStyle对象
    tableHeaderColumnStyle对象
    tableHeaderStyle对象
    tableRowColumnStyle对象
    tableRowStyle对象
    tableStyle对象
    tableWrapperStyle对象
    标题字符串应首先将'showheadertoolbar'设置为 true
    titleStyle对象应首先将'showheadertoolbar'设置为 true
    toolbarIconRightnode可以是IconButton节点的array

    列设置

    名称类型默认说明
    密钥字符串
    标签字符串
    可以排序boolfalse
    工具提示字符串
    类名字符串
    呈现函数
    alignRightbool
    样式对象内联列样式

    设置示例

    
    
    
    
    {
    
    
     key: 'name',
    
    
     label: 'Dessert (100g serving)',
    
    
     sortable: true,
    
    
     tooltip: 'Dessert (100g serving)',
    
    
     className: 'important-column',
    
    
     style: {
    
    
     width: 250,
    
    
     },
    
    
     render: (name, all) => <p>{name}</p>
    
    
    }
    
    
    
    

    许可证

    MIT


    COM  数据  react  tab  component    
    相关文章