Skip to content

useTableRowExpansion

@astryxdesign/core v0.7.1 · useTableRowExpansion

参数 ​

useTableRowExpansion() 只有一个配置对象。用 getter 或 ref 包一层,面板才能跟着当前的展开集合走:useTableRowExpansion(() => ({ ... }))。

名称类型默认值说明
expandedKeysReadonlySet<string>—必填。当前展开了的行 key 集合,由你保存。
onToggle(key: string) => void—必填。一行的展开状态切换时调用,传入行 key。折叠按钮和右键菜单都会触发。
getRowKey(item: T) => string—必填。从一行的数据算出稳定、唯一的 key。
renderExpanded(item: T) => VNodeChild—必填。画出展开后那一整行详情面板里的内容,参数是这一行的数据。
getIsItemExpandable(item: T) => boolean—决定哪些行能展开。不能展开的行不显示折叠按钮、右键菜单里没有这一项,也永远不会画面板。默认所有行都能展开。
panelVariant'muted' | 'transparent''transparent'详情面板的底色。'transparent' 什么都不画:面板是这一行的延续,用表格所在的表面,所以 Card 能透出来,斑马纹也照旧。'muted' 会铺一层,表示它是注解而不是又一行数据——只有裸表格、没有卡片、分隔线和斑马纹时才需要它。这层是很低透明度的近黑色,在深色卡片上几乎看不见,所以 'muted' 基本只在浅色主题里有明显效果。
hasRowClickExpansionbooleanfalse点整行就能切换,不只点折叠按钮。这是给指针设备加的方便,按钮仍然是键盘和辅助技术用的那个控件。点在可交互的单元格内容(按钮、链接、表单控件)上,或者正在选中文字时,不会切换;不能展开的行没有反应。

返回值 ​

useTableRowExpansion() 返回一个 TablePlugin&lt;T&gt;,放进 Table 的 plugins 里。它填的是插件协议上的三个字段:

字段类型说明
transformColumns(columns: TableColumn<T>[]) => TableColumn<T>[]在最前面插入带折叠按钮的 __expansion 列。
rowPatch(row: T, index: number, columnCount: number) => TableRowPatch | null给这一行的右键菜单加上展开项、接上可选的整行点击,并在展开时挂上面板。不能展开的行返回 null。
cellPatch(input: TableCellPatchInput<T>) => TableCellPatch | null给折叠按钮那两个单元格加上 astryx-table__expansion 类名,保住 40px 的宽度。

TableRowPatch ​

字段类型说明
attrsRecord<string, string | undefined>展开的行带上 data-expanded。
classstring开了 hasRowClickExpansion 时是 astryx-table__clickable。
onClick(event: MouseEvent) => void切换这一行,除非点击落在可交互元素上,或者正在选中文字。
menuTableRowMenuItem[]只有一项,用来展开或折叠这一行,文案跟着语言走。
panelTablePanelPatch行下面的详情面板,带 variant 和 render。只有行展开时才存在。