示例
直接操作示例，查看组件在具体任务中的状态与反馈。
质量复核队列
空结果对照
版本列表
空结果
加载中
自动
固定
使用建议
保持原生表格层级
Caption、Header、Body、Footer、Row、Head 与 Cell 应按 HTML table 结构嵌套；不要为了视觉布局把行列拆成无语义的 div。
排序完全由宿主持有
sortable、sortDirection 与 onSort 只建立表头交互合同；实际比较、升降序切换、清空恢复、服务端请求和 URL 同步都由宿主完成。
让数据、空态和加载态互斥
BaseTableEmpty 只在结果集合确实为空时替换数据行；BaseTableLoading 应在等待期间替换 Body 中的真实行，不能与数据行或 Empty 同时混排。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import {
BaseTable,
BaseTableBody,
BaseTableCaption,
BaseTableCell,
BaseTableContainer,
BaseTableEmpty,
BaseTableFooter,
BaseTableHead,
BaseTableHeader,
BaseTableLoading,
BaseTableRow,
} from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Table 不是数据网格引擎，不负责查询、筛选、排序算法、分页、选择模型、虚拟滚动或请求状态；这些都由宿主管理。
- T17 尚缺 manual screen-reader、native-table selection guidance、RTL、narrow/mobile、long-content、deterministic visual 与最终 packed React 18/19 证据。
- Manual screen-reader, native-table selection guidance, HTML drag-and-drop fallback, RTL, narrow/mobile, and long-content review remains pending.
- Deterministic visual evidence and final T17/T23 packed React 18/19 and hydration checks remain pending.
API
BaseTable
查看组件源码export interface BaseTableProps
extends Omit<TableHTMLAttributes<HTMLTableElement>, 'className' | 'style'>,
BaseTableColumnInteractionOptions {
layout?: BaseTableLayout;
columns?: BaseTableColumnDefinition[];
bodyMaxHeight?: number | string;
bodyClassName?: string;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTableClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
layout | 表格采用自动列宽还是固定列布局。 | BaseTableLayout | 'native' |
columns | 列定义或列数量；具体结构以当前组件的 Props 类型为准。 | BaseTableColumnDefinition[] | — |
bodyMaxHeight | 表格主体滚动区域允许使用的最大高度。 | number | string | — |
bodyClassName | 追加到表格主体滚动区域的 CSS 类名。 | string | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTableClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseTableBody
查看组件源码export interface BaseTableBodyProps
extends Omit<HTMLAttributes<HTMLTableSectionElement>, 'className' | 'style'> {
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTableSectionClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTableSectionClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseTableCaption
查看组件源码export interface BaseTableCaptionProps
extends Omit<HTMLAttributes<HTMLTableCaptionElement>, 'className' | 'style'> {
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTableCaptionClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTableCaptionClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseTableCell
查看组件源码export interface BaseTableCellProps
extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align' | 'className' | 'style'> {
align?: BaseTableAlign;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTableCellClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
align | 内容在对应轴线或单元格中的对齐方式。 | BaseTableAlign | 'left' |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTableCellClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseTableContainer
查看组件源码export interface BaseTableContainerProps
extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
appearance?: BaseAppearance;
attachedFooter?: boolean;
className?: string;
classNames?: BaseTableContainerClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
attachedFooter | 是否为贴合式底部栏预留边界与圆角关系。 | boolean | false |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTableContainerClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseTableEmpty
查看组件源码export interface BaseTableEmptyProps
extends Omit<HTMLAttributes<HTMLTableRowElement>, 'children' | 'className' | 'style' | 'title'> {
colSpan: number;
icon?: ReactNode;
title?: ReactNode;
description?: ReactNode;
actions?: ReactNode;
children?: ReactNode;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTableEmptyClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
colSpan必填 | 空状态单元格横跨的表格列数。 | number | — |
icon | 显示在主要内容旁的图标。 | ReactNode | — |
title | 表格空状态显示的主标题。 | ReactNode | — |
description | 用于补充标题或标签含义的说明内容。 | ReactNode | — |
actions | 在主要内容旁呈现的一组操作。 | ReactNode | — |
children | 在 BaseTableEmpty 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTableEmptyClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseTableFooter
查看组件源码export interface BaseTableFooterProps
extends Omit<HTMLAttributes<HTMLTableSectionElement>, 'className' | 'style'> {
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTableSectionClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTableSectionClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseTableHead
查看组件源码export interface BaseTableHeadProps
extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'className' | 'style'> {
columnId?: string;
align?: BaseTableAlign;
verticalAlign?: BaseTableVerticalAlign;
icon?: ReactNode;
label?: ReactNode;
description?: ReactNode;
meta?: ReactNode;
actions?: ReactNode;
trailing?: ReactNode;
sortable?: boolean;
sortDirection?: BaseTableSortDirection;
sortLabel?: string;
onSort?: (columnId?: string) => void;
draggable?: boolean;
dragLabel?: string;
resizable?: boolean;
resizeLabel?: string;
width?: number | string;
minWidth?: number;
maxWidth?: number;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTableHeadClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
columnId | 用于排序、拖拽和尺寸变更的稳定列标识。 | string | — |
align | 内容在对应轴线或单元格中的对齐方式。 | BaseTableAlign | — |
verticalAlign | 表头内容在单元格内的垂直对齐方式。 | BaseTableVerticalAlign | — |
icon | 显示在主要内容旁的图标。 | ReactNode | — |
label | 表头显示的列名称。 | ReactNode | — |
description | 用于补充标题或标签含义的说明内容。 | ReactNode | — |
meta | 显示在表头标签旁的补充信息。 | ReactNode | — |
actions | 在主要内容旁呈现的一组操作。 | ReactNode | — |
trailing | 显示在主要内容末尾的附加内容。 | ReactNode | — |
sortable | 当前表头是否提供排序交互。 | boolean | — |
sortDirection | 当前列已应用的排序方向。 | BaseTableSortDirection | 'none' |
sortLabel | 排序按钮的可访问名称。 | string | — |
onSort | 用户请求按当前列排序时调用的回调。 | (columnId?: string) => void | — |
draggable | 是否允许通过拖动调整列顺序。 | boolean | — |
dragLabel | 列拖动控件的可访问名称。 | string | — |
resizable | 是否允许用户调整对应区域的尺寸。 | boolean | — |
resizeLabel | 提供给尺寸调整控件的可访问名称。 | string | — |
width | 表格列使用的明确宽度。 | number | string | — |
minWidth | 表格列允许使用的最小宽度。 | number | — |
maxWidth | 组件或内容区域允许使用的最大宽度。 | number | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTableHeadClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseTableHeader
查看组件源码export interface BaseTableHeaderProps
extends Omit<HTMLAttributes<HTMLTableSectionElement>, 'className' | 'style'> {
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTableSectionClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTableSectionClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseTableLoading
查看组件源码export interface BaseTableLoadingProps {
rows?: number;
columns: number;
columnWidths?: Array<number | string | undefined>;
animated?: boolean;
rowLabel?: string;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTableLoadingClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
rows | 加载状态中生成的骨架行数。 | number | 3 |
columns必填 | 列定义或列数量；具体结构以当前组件的 Props 类型为准。 | number | — |
columnWidths | 加载骨架各列使用的宽度列表。 | Array<number | string | undefined> | [] |
animated | 是否播放加载或状态变化动画。 | boolean | true |
rowLabel | 加载骨架行的可访问名称。 | string | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTableLoadingClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
BaseTableRow
查看组件源码export interface BaseTableRowProps
extends Omit<HTMLAttributes<HTMLTableRowElement>, 'className' | 'style'> {
interactive?: boolean;
selected?: boolean;
disabled?: boolean;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTableRowClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
interactive | 表格行是否使用可点击、可聚焦的交互样式。 | boolean | — |
selected | 表格行是否以已选中状态呈现。 | boolean | — |
disabled | 是否禁用该组件及其可交互行为。 | boolean | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTableRowClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |