{"meta":"

Guide #

\n

Table are responsible for presenting data as highly customizable and accessible HTML table whose core function is to present structured data in a tabular manner. Then you can use various parameters to add some features to the table, such as sorting, filtering, scrolling, lock columns, and so on.

\n

Basic Usage #

\n

The basic Table contains rows and columns, use Table.Column to define the column, use the dataSource property passed to create rows.

\n

The following code will create a two-column data table:

\n
import { Table } from '@alifd/next';\n\nconst dataSource = [{id: 1, time: '2016'}];\nReactDOM.render(\n    <Table dataSource={dataSource}>\n        <Table.Column title="Id" dataIndex="id"/>\n        <Table.Column title="Time" dataIndex="time"/>\n    </Table>, mountNode);\n
\n

Column Configuration

\n

Table.Column provides a lot of configuration properties for custom columns, the most common is the use of cell custom cell rendering. Other configurations can refer to the following Table.Column API.

\n

The following code will make cells render different views based on values:

\n
import { Table } from '@alifd/next';\n\nconst dataSource = [{id: 1, time: '2016'}];\nconst renderTime = value => {\n    if (value === '2016') {\n        return 'this year';\n    }\n    return value;\n};\nReactDOM.render(\n    <Table dataSource={dataSource}>\n        <Table.Column title="Id" dataIndex="id"/>\n        <Table.Column title="Time" dataIndex="time" cell={renderTime}/>\n    </Table>, mountNode);\n
\n

Multiple Table Header

\n

Use Table.ColumnGroup to wrap Table.Column to create a table with multiple headers:

\n
import { Table } from '@alifd/next';\n\nconst dataSource = [{id: 1, time: '2016'}];\nReactDOM.render(\n    <Table dataSource={dataSource}>\n        <Table.ColumnGroup>\n            <Table.Column title="Id" dataIndex="id"/>\n            <Table.Column title="Time" dataIndex="time"/>\n        </Table.ColumnGroup>\n        <Table.ColumnGroup>\n            <Table.Column title="Id" dataIndex="id"/>\n        </Table.ColumnGroup>\n    </Table>, mountNode);\n
\n

Know Issues #

\n

Group Table does not support displaying background color in hover state and selected state, unable to merge cells

\n

Table can not merge cell if enable locking column

\n","api":"

API #

\n

Table #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
tableLayouttable-layout attribute of table element

options:
'fixed', 'auto'		Enum-
tableWidthtotoal width of tableNumber-
dataSourcedata source shown in the tableArray[]
onRowClickcallback triggered when click each row

signatures:
Function(record: Object, index: Number, e: Event) => void
params:
record: {Object} the data corresponding to the row
index: {Number} the index corresponding to the row
e: {Event} event object		Function() => { }
onRowMouseEntercallback triggered when mouse enter each row

signatures:
Function(record: Object, index: Number, e: Event) => void
params:
record: {Object} the data corresponding to the row
index: {Number} the index corresponding to the row
e: {Event} event object		Function() => { }
onRowMouseLeavecallback triggered when mouse leave each row

signatures:
Function(record: Object, index: Number, e: Event) => void
params:
record: {Object} the data corresponding to the row
index: {Number} the index corresponding to the row
e: {Event} event object		Function() => { }
onSortcallback triggered when sort

signatures:
Function(dataIndex: String, order: String) => void
params:
dataIndex: {String} the specified sorted field
order: {String} order, whether is 'desc' or 'asc'		Function() => { }
onFiltercallback triggered when click filter confirmation button

signatures:
Function(filterParams: Object) => void
params:
filterParams: {Object} filter params		Function() => { }
onResizeChangecallback triggered when resize column

signatures:
Function(dataIndex: String, value: Number) => void
params:
dataIndex: {String} the specify resize field
value: {Number} column width variation		Function() => { }
rowPropsget the properties of row, the return value will not work if it is in conflict with other properties

signatures:
Function(record: Object, index: Number) => Object
params:
record: {Object} the data corresponding to the row
index: {Number} the index corresponding to the row
returns:
{Object} properties of Row
Function() => { }
getCellPropsget the properties of cell, through which you can merge cells

signatures:
Function(rowIndex: Number, colIndex: Number, dataIndex: String, record: Object) => Object
params:
rowIndex: {Number} the index corresponding to the row
colIndex: {Number} the index corresponding to the column
dataIndex: {String} the field corresponding to the column
record: {Object} the record corresponding to the row
returns:
{Object} properties of td
Function() => { }
hasBorderwhether the table has a borderBooleantrue
hasHeaderwhether the table has headerBooleantrue
isZebrawhether the table has zebra styleBooleanfalse
loadingwhether data is loadingBooleanfalse
loadingComponentcustomized Loading component

signatures:
(props: LoadingProps) => React.ReactNode		Function-
filterParamscurrently filtered keys, use this property to control which menu in the table's header filtering options is selected, in the format {dataIndex: {selectedKeys:[]}}
Example:
Suppose you want to control dataIndex as Select
<Table filterParams={{id: {selectedKeys: ['one']}}}/> for the menu item whose key is one in the filtering menu of the id column.		Object-
sortthe currently sorted field, use this property to control the sorting of the table's fields in the format {dataIndex: 'asc'}Object-
sortIconscustomize sortIcons, to set top and bottom layout e.g.{desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size="small" />, asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size="small" />}Object-
columnsequals to Table.Column, but Table.Column has a higher priorityArray-
emptyContentcontent when the table is emptyReactNode-
primaryKeythe primary key of data in the dataSource, if the attribute in the given data source does not contain the primary key, it will cause selecting allString'id'
expandedRowRenderrendering function for expanded row

signatures:
Function(record: Object, index: Number) => Element
params:
record: {Object} the record corresponding to the row
index: {Number} the index corresponding to the row
returns:
{Element} render content
Function-
rowExpandablerow can expand or not

signatures:
Function(record: Object, index: Number) => Boolean
params:
record: {Object} the record corresponding to the row
index: {Number} the index corresponding to the row
returns:
{Boolean} expandable
Function-
expandedRowIndentindent of expanded rowArray-
openRowKeys(under control)keys of expanded row, usually used with onRowOpenArray-
onRowOpencallback triggered when expand row

signatures:
Function(openRowKeys: Array, currentRowKey: String, expanded: Boolean, currentRecord: Object) => void
params:
openRowKeys: {Array} key of expanded row
currentRowKey: {String} key of current clicked row
expanded: {Boolean} whether is expanded
currentRecord: {Object} the data corresponding to the current clicked row		Function-
hasExpandedRowCtrlwhether to show the + button that clicks to expand additional rowBoolean-
getExpandedColPropsget properties of expanded row

signatures:
(record: any, index: number) => object | Record<string | number, any>		Function-
fixedHeaderwhether the table header is fixed, this property is used with maxBodyHeight. When the height of the content area exceeds maxBodyHeight, a scroll bar appears in the content area.Boolean-
maxBodyHeightthe height of the largest content area, when fixedHeader is true, scroll bars will appear above this heightNumber/String-
rowSelectionwhether to enable selection mode

properties:
getProps: {Function} Function(record, index)=>Object get default attributes of selection
onChange: {Function} Function(selectedRowKeys:Array, records:Array) callback triggered when selection change, Note: where records only contains the data of the current dataSource, it is likely to be less than the length of the selectedRowKeys.
onSelect: {Function} Function(selected:Boolean, record:Object, records:Array) callback triggered when user select
onSelectAll: {Function} Function(selected:Boolean, records:Array) callback triggered when user select all
selectedRowKeys: {Array} if this property is set, the rowSelection is controlled, and the received value is the value of the primaryKey of the row's data.
mode: {String} the mode of selection, the optional value is single, multiple, the default is multiple
columnProps: {Function} Function()=>Object props of checkbox columns which inherit from Table.Column
titleProps: {Function} Function()=>Object props of checkbox columns header, works only in multiple mode
titleAddons: {Function} Function()=>Node element added to checkbox columns header, works in both single and multiple mode		Object-
stickyHeaderwhether the table header is stickyBoolean-
offsetTopaffix triggered after the distance top reaches the specified offsetNumber-
affixPropsproperties of AffixObject-
indentindented in tree mode, work only when isTree is trueNumber-
isTreeenable the tree mode of Table, the received data format contains children and renders it into a tree table.Boolean-
useVirtualwhether use virtual scrollBoolean-
onBodyScrollcallback triggered when body scroll

signatures:
Function(start: Number) => void
properties:
start:{Number} The current number of lines scrolled to		Function-
crosslineshow corssline when hover，which is suitable for the scene where the header is complex and needs to be classifiedBooleanfalse
\n

Table.Column #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
dataIndexspecify the column corresponding field, support the fast value of a.b formatString-
cellcell rendering logic
Function(value, index, record) => Element		ReactElement/ReactNode/Function(value) => value
titlecontent of table headerReactElement/ReactNode/Function-
htmlTitlethe props of title, which will be writen on header cells' domString-
sortablewhether to support sortingBoolean-
widthwidth of column，width needs to be set in lock styleNumber/String-
alignalignment of cell

options:
'left', 'center', 'right'		Enum-
alignHeaderalignment of header cell, value of align by default

options:
'left', 'center', 'right'		Enum-
filtersgenerates a title filter menu in the format [{label:'xxx', value:'xxx'}]Array<Object>-
filterModewhether the filtering mode is single or multiple selection

options:
'single', 'multiple'		Enum'multiple'
filterMenuPropsthe props passed to Menu in filter mode, extend Menu's API

options:
subMenuSelectable: {Boolean} default false subMenu can be selected or not
isSelectIconRight: {Boolean} default false select icon in right or not. (icon on SubMenu always in left)		Object{ subMenuSelectable: false }
lockwhether the lock column is supported, the options are left, right, trueBoolean/String-
resizablewhether to support column resizing, when this value is set to true, the layout of the table will be modified to fixedBooleanfalse
asyncResizablewhether to support async column resizing, when this value is set to true, the layout of the table will be modified to fixedBooleanfalse
colSpantheader can merge cell by this API, 0 means no th of this columnNumber-
\n

Table.ColumnGroup #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
titlecontent of table headerReactElement/ReactNode/Function'column-group'
\n

Table.GroupHeader #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
cellcell rendering logicReactElement/ReactNode/Function() => ''
hasChildrenSelectionwhether to render selection on ChildrenBooleanfalse
hasSelectionwhether to render selection on GroupHeaderBooleantrue
useFirstLevelDataWhenNoChildrenuse the first level data when there is no children in dataSouceBooleanfalse
\n

Table.GroupFooter #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
cellcell rendering logicReactElement/ReactNode/Function() => ''
\n"}