react-component-data-table

react-component-data-table

Screen Shot

Install

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

Import

import {DataTable,Pagination,DataTableWithPagination} from 'react-component-data-table'

TODO

• DataTable
• Pagination
• Pagination - 自定义上下页翻页样式
• Pagination - 自定义页码样式
• DataTableWithPagination
• DataTableWithPagination 添加索引显示

API

DataTable

Extends PureComponent

DataTable - 数据表

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>
}
}

propTypes

Properties

• columns Array<Object>
  • columns[].name String
  • columns[].className String?
  • columns[].style Object?
  • columns[].render Function
• 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) ]

DataTableWithPagination

Extends PureComponent

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

getGlobalRowIndex

获取DataTable全局数据索引

Parameters

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

Returns Number 全局数据索引

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

起始分页页码

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? [ ()=>(">") ] - >按钮样式
• renderPrevPage Function? [ ()=>("<") ] - <按钮样式