import Table from './index.js'
const col = [{
title: '标题',
dataIndex: 'name'
}, {
title: '价格',
dataIndex: 'value'
}]
let data = [{
name: 'test',
value: '1000'
}, {
name: 'test',
value: '1000'
}] <
<Table columns = {col} data = {data} />
Property | Type (Default) |
Description |
---|---|---|
affixHeader | boolean, number | fixed header (top is the postion) |
autoHeight | boolean | autoHeight |
bodyRef | (ref: HTMLElement) => void | A ref |
bordered | boolean | Show border |
data | object[] | Tabledata |
columns | object[] | columns config |
headerHeight | number (40) |
Table Header Height |
height | number (200) |
Table height |
hover | boolean (true) |
The row of the table has a mouseover effect |
loading | boolean | Show loading |
locale | object: { emptyMessage: ('No data') , loading: ('Loading...') } |
Messages for empty data and loading states |
minHeight | number (0) |
Minimum height |
onRowClick | (rowData:object, event: SyntheticEvent)=>void | Click the callback function after the row and return to rowDate |
onScroll | (scrollX:object, scrollY:object)=>void | Callback function for scroll bar scrolling |
onSortColumn | (dataKey:string, sortType:string)=>void | Click the callback function of the sort sequence to return the value sortColumn , sortType |
renderEmpty | (info: React. ReactNode) => React. ReactNode | Customized data is empty display content |
renderLoading | (loading: React. ReactNode) => React. ReactNode | Customize the display content in the data load |
rowClassName | string , (rowData:object)=>string | Add an optional extra class name to row |
rowHeight | number (46) , (rowData: object) => number |
Row height |
rowKey | string ('key') |
Each row corresponds to the unique key in data |
showHeader | boolean (true) |
Display header |
virtualized | boolean | virtualized render large data |
width | number | Table width |
hideShadow | boolean | hide the shadow of table cell |
Property | Type (Default) |
Description |
---|---|---|
title | string | the title of table header |
key | string | the unique key of each column, you can ignore it when you set dataIndex |
dataIndex | string | Display field of the data record |
align | enum: 'left', 'center', 'right' (left) |
The specify which way that column is aligned |
verticalAlign | enum: 'top', 'middle', 'bottom' (middle) |
Vertical alignment |
sortable | boolean | which can sort |
minWidth | number | minimum width |
fixed | enum: 'left', 'right' | Fixed column |
flexGrow | number | Set the column width automatically adjusts, when you don't want you table scroll you can use it |
type | enum:'string','number' | format data |