react-component-data-table

react-component-data-table

DataTable.js

Props

columns

• required: true

• type: arrayOf shape

• shape

  • name

    • required: true
    • type: string

  • className

    • required: false
    • type: any

  • style

    • required: false
    • type: object

  • render

    • required: true
    • type: func

dataSource

• required: false

• type: array

• defaultValue: []

style

• required: false

• type: object

• defaultValue: { width: "100%" }

className

• required: false

• type: any

• defaultValue: 'pure-table pure-table-striped'

renderDataEmpty

• required: false

• type: func

• defaultValue: (definedColumn)=>(<tr> <td colSpan={definedColumn.length} style={{textAlign:"center"}}>NO DATA</td> </tr>)

API

DataTable

Extends PureComponent

数据Table

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

columns

定义数据列

dataSource

数据源

style

样式

className

css class

renderDataEmpty

定义没有数据时的样式