eo-next-table

<eo-next-table>

大型表格

Examples

Basic

Playground

Fixed & Scroll & useBrick

Playground

Front Search

Playground

Row Selection

Playground

Expandable

Playground

Bordered

Playground

Size

Playground

Draggable

Playground

RowSpan & ColSpan

Playground

Tree

设置 childrenColumnName 来指定树形结构的列名，展开功能的配置可以使用 expandable。目前树形结构暂不支持拖拽。

Playground

With Row Selection

设置 rowSelection.checkStrictly 来控制父子数据选中状态是否关联。注意，关联的时候，节点勾选传导策略为【只勾选可触达的可勾选节点】

Playground

With Front Search

Playground

Dynamic Columns

Playground

Cell status

Playground

Theme variant Elevo

Playground

Properties

Name	Description	Type	Default	Required
rowKey	指定表格行的 key	string	"key"
columns	列定义	Column[]
cell	单元格	CellConfig
dataSource	数据源	DataSource
frontSearch	是否前端搜索	boolean
pagination	分页配置	PaginationType
loading	显示加载中状态	boolean
multiSort	是否支持多列排序，前端搜索时需设置 column.sortPriority 优先级	boolean
sort	排序信息	Sort | Sort[]
rowSelection	表格行可选择配置	RowSelectionType
selectedRowKeys	选中项的 key	(string | number)[]
hiddenColumns	隐藏的列（输入对应的 column.key）	(string | number)[]
expandable	表格行展开配置	ExpandableType
expandedRowKeys	展开项的 key	(string | number)[]
childrenColumnName	树形结构的列名	string	"children"
rowDraggable	表格行拖拽配置	boolean
rowClickable	表格行可点击（激活鼠标手势）	boolean
searchFields	进行前端搜索的字段，支持嵌套的写法。不配置的时候默认为对所有 column.dataIndex 进行前端搜索	(string | string[])[]
size	表格大小	TableProps<RecordType>["size"]	"large"
showHeader	是否显示表头	boolean	true
bordered	是否显示边框	boolean
scrollConfig	滚动配置	TableScroll	{ x: true }
optimizedColumns	优化渲染的列（输入对应的 column.key）	(string | number)[]
themeVariant	主题变体	"default" | "elevo"

Events

Name	Description	Event Detail
page.change	page 或 pageSize 改变的回调	PageOrPageSizeChangeEventDetail - 改变后的页码及每页条数
page.size.change	pageSize 变化的回调	PageOrPageSizeChangeEventDetail - 改变后的页码及每页条数
sort.change	排序变化的回调	Sort | Sort[] | undefined - 当前排序的信息
row.click	行点击时的回调	RecordType - 被点击的行数据
row.select	行选中项发生变化时的回调	RowSelectEventDetail - 改变后的 rowKey 及行数据
row.select.v2	行选中项发生变化时的回调（v2 版本）	RecordType[] - 改变后的行数据
row.expand	点击展开图标时触发	RowExpandEventDetail - 当前行的展开情况及数据
expanded.rows.change	展开的行变化时触发	(string | number)[] - 所有展开行的 key
row.drag	表格行拖拽结束发生的事件	RowDragEventDetail - 重新排序的行数据、拖拽的行数据、放下位置的行数据

Methods

Name	Description	Params	Returns
search	前端搜索	params: { q: string }

Type references

Column

extends Pick<ColumnType<RecordType>, "align" | "colSpan" | "dataIndex" | "ellipsis" | "fixed" | "rowScope" | "showSorterTooltip" | "sortDirections" | "title" | "width">, ColumnProp

Name	Description	Type	Default	Required

ColumnProp

Name	Description	Type	Default	Required
key		string | number
headerBrick	表头自定义展示构件	WithUseBrick
useBrick	内容自定义展示构件	UseBrickConf
cellColSpanKey	记录表格列合并的值的 key	string
cellRowSpanKey	记录表格行合并的值的 key	string
sortable	是否可排序	boolean
sortPriority	前端搜索时，多列排序优先级，数字越大优先级越高	number
verticalAlign	垂直对齐方式	CSSProperties["verticalAlign"]
cellStyle	单元格样式	CSSProperties
headerStyle	头部单元格样式	CSSProperties
cellStatus		CellStatus

WithUseBrick

Name	Description	Type	Default	Required
useBrick		UseBrickConf

CellStatus

Name	Description	Type	Default	Required
dataIndex		string
mapping		CellStatusMap[]		✅

CellStatusMap

Name	Description	Type	Default	Required
value		unknown		✅
leftBorderColor		string		✅

CellConfig

extends WithUseBrick

Name	Description	Type	Default	Required
header		WithUseBrick

DataSource

Name	Description	Type	Default	Required
list		RecordType[]
total		number
page		number
pageSize		number

PaginationConfig

extends Pick<TablePaginationConfig, "disabled" | "hideOnSinglePage" | "pageSizeOptions" | "responsive" | "showLessItems" | "showQuickJumper" | "showSizeChanger" | "showTitle" | "simple" | "size">

Name	Description	Type	Default	Required
showTotal		boolean

Sort

Name	Description	Type	Default	Required
columnKey		string | number
order		SortOrder

RowSelectionConfig

extends Pick<TableRowSelection<RecordType>, "columnWidth" | "fixed" | "hideSelectAll" | "preserveSelectedRowKeys" | "type" | "checkStrictly">

Name	Description	Type	Default	Required
showSelectInfo		boolean
rowDisabled		string | boolean

ExpandableConfig

extends Pick<TableExpandableConfig<RecordType>, "columnWidth" | "expandRowByClick" | "defaultExpandAllRows" | "fixed" | "showExpandColumn">

Name	Description	Type	Default	Required
expandIconBrick		{ useBrick: UseBrickConf }
expandedRowBrick		{ useBrick: UseBrickConf }
rowExpandable		string | boolean

PageOrPageSizeChangeEventDetail

Name	Description	Type	Default	Required
page		number		✅
pageSize		number		✅

RowSelectEventDetail

Name	Description	Type	Default	Required
keys		(string | number)[]		✅
rows		RecordType[]		✅
info		{ type: RowSelectMethod }		✅

RowExpandEventDetail

Name	Description	Type	Default	Required
expanded		boolean		✅
record		RecordType		✅

RowDragEventDetail

Name	Description	Type	Default	Required
list		RecordType[]		✅
active		RecordType		✅
over		RecordType		✅

RecordType

Record<string, any>

PaginationType

false | PaginationConfig | undefined

RowSelectionType

boolean | RowSelectionConfig | undefined

ExpandableType

boolean | ExpandableConfig | undefined

TableScroll

TableProps<RecordType>["scroll"] | false