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

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

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

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

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

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

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

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