react-component-data-table

Screen Shot

Install

$ npm i react-component-data-table --save

Import

//如果需要自定义样式,请替换为自己的样式文件即可
import 'react-component-data-table/asstes/css/data-table.css'
import {DataTable,Pagination,DataTableWithPagination} from 'react-component-data-table'

Change Log

1.3.1

• 调整了自带样式,所有的组件在使用的时候必须指定对应样式

1.3.0

• 优化bodyHeight的计算,当fixedHead=true时
• 调整了部分样式
• 添加排序

1.2.0

• 添加了属性fixedHead,是否固定head,默认是不固定.如果为true,body的高度有容器的高度计算得出,不需要指定body的高度
• 调整了默认样式

API

DataTable

Extends PureComponent

DataTable - 数据表

Parameters

• props

Examples

Simple

class SimpleDataTableDemo extends React.PureComponent{
render(){
    const dataSource=[
        {name:"name1",sex:"male"},
        {name:"name2",sex:"female"}
    ];
    const columns=[
        {name:"Name",render:rowData=>rowData['name']},
        {name:"Sex",render:rowData=>rowData['sex']},
    ];
    return <DataTable columns={columns} dataSource={dataSource}></DataTable>
}
}

Empty

class EmptyDataTableDemo extends React.PureComponent{
render(){
    const dataSource=[];
    const columns=[
        {name:"Name",render:rowData=>rowData['name']},
        {name:"Sex",render:rowData=>rowData['sex']},
    ];
    return <DataTable columns={columns} dataSource={dataSource}></DataTable>
}
}

Radio DataTable

class RadioDataTableDemo extends React.PureComponent{
render(){
    const dataSource=[
        {name:"name1",sex:"male"},
        {name:"name2",sex:"female"}
    ];
    const columns=[
        {name:"",render:rowData=>{
            return <input type="radio" value={rowData['name']} name="radio-data-table"/>
        }},
        {name:"Name",render:rowData=>rowData['name']},
        {name:"Sex",render:rowData=>rowData['sex']},
    ];
    return <DataTable columns={columns} dataSource={dataSource}></DataTable>
}
}

Checkbox DataTable

class CheckboxDataTableDemo extends React.PureComponent{
render(){
    const dataSource=[
        {name:"name1",sex:"male"},
        {name:"name2",sex:"female"}
    ];
    const columns=[
        {name:"",render:rowData=>{
            return <input type="checkbox" value={rowData['name']}/>
        }},
        {name:"Name",render:rowData=>rowData['name']},
        {name:"Sex",render:rowData=>rowData['sex']},
    ];
    return <DataTable columns={columns} dataSource={dataSource}></DataTable>
}
}

Sort DataTable

class SortDataTable extends React.PureComponent {
 	...
 	onSortChange(sort) {
        if (sort) {
            let ds = [...this.state.dataSource];
            ds.sort((a, b)=> {
                if (sort.type === 'asc') {
                    if (a[sort.field] < b[sort.field]) {
                        return 1;
                    }
                    return 0;
                }
                else if (sort.type === 'desc') {
                    if (a[sort.field] > b[sort.field]) {
                        return 1;
                    }
                    return 0;
                }
                else {
                    //nothing
                }
            });
            this.setState(
                Object.assign({}, this.state, {
                    dataSource: ds
                })
            )
        }
    }
    render() {
        return (
            <div
                style={{height:300}}>
                <DataTable
                    dataSource={this.state.dataSource}
                    renderDataEmpty={()=>''}
                    onSortChange={this.onSortChange.bind(this)}
                    columns={[{
                        name:"Name",
                        render:rowData=>rowData['name']
                     },{
                        name:"Age",
                        render:rowData=>rowData['age'],
                        sort:{
                            field:'age',
                        }
                     }]}></DataTable>
            </div>
        );
    }
 	...
 }

propTypes

Properties

• columns Array<Object>
  • columns[].name String
  • columns[].className String?
  • columns[].style Object?
  • columns[].render Function
  • columns[].sort Object?
    • columns[].sort.field String
    • columns[].sort.defaultType String? value is one of the none,asc,desc
• dataSource Array? [ [] ]
• style Object?
• className String? [ data-table ] - data-table是DataTable的默认className,样式定义在/css/DataTable.css.如果要使用默认样式需要引用默认的样式文件import 'css/DataTable.css'
• renderDataEmpty Function? [ (definedColumn)=>(<td colSpan={definedColumn.length} style={{textAlign:"center"}}>NO DATA) ]
• fixedHead Boolean? [false] - 是否固定head
• onSortChange Function? [()=>null] - 当sort变化时调用

DataTableWithPagination

Extends PureComponent

带分页的DataTable,由DataTable和Pagination组合的复合组件

getGlobalRowIndex

获取DataTable全局数据索引

Parameters

• localRowIndex Number 当前分页中的数据索引

Returns Number 全局数据索引

refresh

刷新当前页数据

Returns void

propTypes

...DataTable.propTypes ...Pagination.propTypes

Properties

• style Object?
• className String?
• dataTableStyle Object? DataTable样式
• dataTableClassName String? DataTable css class
• paginationStyle Object? Pagination 样式
• paginationClassName String? Pagination css class
• showIndex Boolean? [ true ] - 是否显示索引列

Pagination

Extends PureComponent

Pagination - 页码

Parameters

• props

Examples

从0开始分页

<Pagination
   onPageChange={(pageInfo)=>{
                    console.log('page change',pageInfo)
                }}
     total={23}/>

从1开始分页

<Pagination
   startPageNumber={1}
   pageIndex={1}
   onPageChange={(pageInfo)=>{
    console.log('page change',pageInfo)
}}
   total={100}/>

totalPage

总页数

pageIndex

当前页码

pageSize

每页记录数

startPageNumber

起始分页页码

refresh

刷新当前页数据

Returns void

propTypes

Properties

• startPageNumber Number? [ 0 ] - 分页开始的起始页0或者1
• pageIndex Number? [ 0 ] - 当前页
• pageSize Number? [ 10 ] - 每页记录数
• onPageChange Function? [ ()=>null ] - 分页事件监听
• total Number 总记录数
• style Object? 样式
• className String [pagination] - css class样式,样式定义在css/Pagination.css
• displayPageCount Number? [5] - 最多可以显示多少页面
• renderNextPage Function? [()=>(<img style={{width:20,height:20,transform:'rotate(180deg)'}} src={require('../assets/img/angle-left.svg')}/>)] - >按钮样式
• renderPrevPage Function? [()=>(<img style={{width:20,height:20}} src={require('../assets/img/angle-left.svg')}/>)] - <按钮样式