useTableRowExpansion
@astryxdesign/core v0.7.1 · useTableRowExpansion
参数
useTableRowExpansion() 只有一个配置对象。用 getter 或 ref 包一层,面板才能跟着当前的展开集合走:useTableRowExpansion(() => ({ ... }))。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
expandedKeys | ReadonlySet<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' 基本只在浅色主题里有明显效果。 |
hasRowClickExpansion | boolean | false | 点整行就能切换,不只点折叠按钮。这是给指针设备加的方便,按钮仍然是键盘和辅助技术用的那个控件。点在可交互的单元格内容(按钮、链接、表单控件)上,或者正在选中文字时,不会切换;不能展开的行没有反应。 |
返回值
useTableRowExpansion() 返回一个 TablePlugin<T>,放进 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
| 字段 | 类型 | 说明 |
|---|---|---|
attrs | Record<string, string | undefined> | 展开的行带上 data-expanded。 |
class | string | 开了 hasRowClickExpansion 时是 astryx-table__clickable。 |
onClick | (event: MouseEvent) => void | 切换这一行,除非点击落在可交互元素上,或者正在选中文字。 |
menu | TableRowMenuItem[] | 只有一项,用来展开或折叠这一行,文案跟着语言走。 |
panel | TablePanelPatch | 行下面的详情面板,带 variant 和 render。只有行展开时才存在。 |