TablePc Table

Display row and column data.

When to use

• Table is responsible for presenting data as highly customizable and accessible HTML tables, its core function is to display structured data using tabular format;
• Various parameters can be used to add features to the table, such as sorting, filtering, scrolling, column locking, etc.

Component Example

Component Properties

属性	说明	类型	默认值
actionBar	Set top action - action bar	array	[{title: {zh_CN: 'Action 1',en_US: 'Action 1',type: 'i18n'},option: 'callback'}]
actionFixed	Set action column fixed	string	'none'
actionHidden	Set whether action column is hidden	boolean	false
actionTitle	Set action column title	string	'Action'
actionType	Set action column button type	string	'link'
actionWidth	Set action column width	number	0
cellProps	Set style and appearance - cell split and merge	(rowIndex: number,colIndex: number,dataIndex: number,record: object)=>void	-
columnProps	Set row selector - selection column properties	() => void	-
columns	Data columns can be set by binding data source	TableColumn[]	-
data	Data source	any[]	-
dataSourceType	Data source type	'data' | 'url'	'data'
device	Set action item - display on specific device	string	-
emptyContent	Set style and appearance - empty data rendering	() => ReactNode	-
expandedRowIndent	Set collapsible/tree table - enable collapse, additional rendering row indentation	array	[]
expandedRowRender	Set collapsible/tree table - enable collapse, additional rendering row render function	(record: object, index: number) => ReactNode	-
fixedHeader	Set style and appearance - whether header is fixed	boolean	true
getExpandedColProps	Set collapsible/tree table - enable collapse, set additional rendering row properties	(record: object, index: number) => ReactNode	-
getProps	Set row selector - selector properties	(rowData: object, index: number) => void	-
hasExpandedRowCtrl	Set collapsible/tree table - enable collapse, collapse button	boolean	true
hasHeader	Set style and appearance - show header	boolean	true
isDisabled	Set top action - action bar page navigation, whether disabled	boolean	-
isExpand	Set collapsible/tree table - enable collapse	boolean	false
isPagination	Pagination settings - use pagination	boolean	true
isPagination	Pagination settings - when pagination count is 1, whether to hide pagination	boolean	false
isTree	Set collapsible/tree table - enable tree	boolean	false
loading	Whether it is in loading state	boolean	false
loadingComponent	Set style and appearance - set loading component	()=>ReactNode	-
maxBodyHeight	Set style and appearance - whether header is fixed, maximum content area height	number	0
maxWebShownActionCount	Set maximum display count	number	3
mobileActionsStyle	Mobile specific configuration - set expand method, action style	string	-
mobileDefaultCardColumns	Mobile specific configuration - expand method, default field count	string	4
mobileExpanViewMode	Mobile specific configuration - expand method	string	normal
mobileMargin	Mobile specific configuration - set default margin	number	0
mobileMode	Mobile specific configuration - display style	string	normal
mode	Set action item - display in edit state	string	'VIEW'
mode	Set row selector - type	'single' | 'multiple'	'multiple'
noPadding	Advanced - set hidden padding	boolean	false
onCellDataChange	Action settings - triggered when dynamic data changes	({data: object}) => void	-
onChange	Set row selector - selection change callback	(selectedRowKeys: array,records: array)=>void	-
onColumnsChange	Set top action - column filter callback	(columns: object)=>void	-
onFetchData	Action settings - triggered on pagination, search, sort	({params: object}) => void	-
onResizeChange	Action settings - event triggered when resizing column	({dataIndex: string, value:number}) => void	-
onRowClick	Action settings - event triggered when clicking each row of table	({record: object, index:number, evt:object}) => void	-
onRowMouseEnter	Action settings - event triggered when hovering over each row of table	({record: object, index: number, evt: object}) => void	-
onRowMouseLeave	Action settings - event triggered when leaving each row of table	({record: object, index:number, evt:object}) => void	-
onRowOpen	Set collapsible/tree table - enable collapse, event triggered when expand/collapse	(openRowKeys: array, currentRowKey: string, expanded: boolean, currentRecord: object) => void	-
onSelect	Set row selector - single row selection callback	({selected: boolean,rowData: object,selectedRows: array})=>void	-
onSelectAll	Set row selector - select all callback	(selected: boolean,selectedRows: array)=>void	-
openRowKeys	Set collapsible/tree table - enable collapse, default expanded rendering rows	string[]	-
pageMode	Set top action - action bar page navigation, associated page state	string	-
pageShowCount	Pagination settings - page number display count	number	5
pageSize	Pagination settings - pageSize	number	10
pageSizeList	Pagination settings - per page display selector available values	array	[5,10,20]
pageSizePosition	Pagination settings - per page display selector position in component	string	'end'
pageSizeSelector	Pagination settings - per page display selector type	boolean	false
pagination	Pagination settings - pagination position	string	'right'
primaryKey	Set data primary key, the primary key is used to distinguish different rows in the data, is very important for row selection and row editing functions, different row primary key values cannot be repeated, generally uses the auto-increment ID field in the database	string	'id'
render	Set action item - custom rendering	(title: object,rowData: object)=>{title}	-
rowProps	Set style and appearance - cell row property configuration	(record: object,index: number)=>void	-
searchBarPlaceholder	Set top action - show search bar placeholder	string	'Please search'
selectedRowKeys	Set row selector - selected rows	string[]	-
setEmptyContent	Set style and appearance - custom empty data rendering	boolean	false
setLoadingComponent	Set style and appearance - custom loading component	boolean	false
shape	Pagination settings - previous/next button style	string	arrow-only
showActionBar	Set top action - show action bar	boolean	true
showCustomBarItem	Set top action - show custom area	boolean	false
showCustomCoulmn	Set top action - show column filter	boolean	false
showCustomCoulmn	Set top action - custom area rendering	()=>void	-
showLinkBar	Set top action - whether to show external link bar	boolean	true
showMiniPager	Pagination settings - whether to show top mini pagination (only effective for PC rendering)	boolean	false
showRowSelector	Set row selector - whether to show	boolean	false
showSearch	Set top action - show search bar	boolean	true
size	Pagination settings - pagination size	string	'medium'
stickyHeader	Set style and appearance - whether header is sticky	boolean	false
theme	Set style and appearance - theme	string	'split'
title	Set action item - title	string	'Details'
title	Set top action - action bar title	string	'Action'
title	Set top action - external link action bar, external link action title	string	'External Link Action'
titleAddons	Set row selector - selection column title elements	(rowData: object,index: number) => ReactNode	-
titleProps	Set row selector - selection column title properties	(rowData: object, index: number) => void	-
type	Pagination settings - pagination type	string	'normal'
useStickyLock	Advanced - set column fixed optimization	boolean	false
useVirtual	Set style and appearance - virtual scrolling	boolean	false