TableFooterBar 表格外接底栏

在表格外部组织摘要、每页数量、分页和批量操作等宿主控件。

Beta

示例

直接操作示例，查看组件在具体任务中的状态与反馈。

交互示例 · 本地数据

TableFooterBar 本地分页控制示例

展示表格外部底栏中的本地摘要、每页数量和翻页边界。

外接底栏只组织摘要、每页数量和翻页操作；分页状态与业务文案始终由宿主持有。
表格外部的本地分页工具
交互示例 · 本地数据

TableFooterBar 批量选择

选择摘要与批量动作在表格下方保持同一操作上下文。

选择摘要与批量动作在表格下方保持同一操作上下文。
批量工具
已选择 3 项
可对当前选择执行批量操作
交互示例 · 本地数据

TableFooterBar 连接方式

连接式底栏承接表格边界，独立式底栏可放在其他内容附近。

连接式底栏承接表格边界，独立式底栏可放在其他内容附近。
连接表格
24 条记录
每页 10 条
独立工具
3 项已选
批量操作

使用建议

把外接底栏与 tfoot 分开

TableFooterBar 固定渲染为 table 外部的 div，适合承载摘要与操作；需要表内汇总行时应使用 BaseTableFooter，并保持原生 tfoot 层级。

成对声明视觉接缝

底栏紧邻表格时，为 BaseTableContainer 设置 attachedFooter 并保留 TableFooterBar 默认 attached；独立使用时设置 attached=false，避免错误的连接外观。

分页状态与可访问语义由宿主持有

宿主负责页码、每页数量、请求、禁用边界、可见标签、状态播报和业务 i18n；Provider 只统一 appearance、方向与组件属性。

引入方式

从已验证的公开子路径导入组件；全局样式接入方式见安装指南。

import { BaseTableFooterBar } from '@inf-monkeys-tech/monkeys-design/components/base';

当前限制

  • TableFooterBar 只提供外接 flex chrome，不请求数据、不计算分页、不管理批量选择，也不会持久化每页数量或生成控件文案。
  • 根节点是 div，不是 tfoot 或内置 navigation；attached 只调整视觉边界，宿主必须按用途提供 role、可访问名称、状态播报以及与表格的邻近关系。
  • T17 尚缺 manual RTL、wrapping、focus-order、screen-reader、mobile、deterministic visual、hydration 与最终 packed React 18/19 证据。
  • Manual RTL, wrapping, focus-order, screen-reader, and mobile review remains pending.
  • Deterministic visual evidence and final T17/T23 packed React 18/19 and hydration checks remain pending.
查看组件源码
export interface BaseTableFooterBarProps
  extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
  appearance?: BaseAppearance;
  leading?: ReactNode;
  actions?: ReactNode;
  attached?: boolean;
  className?: string;
  classNames?: BaseTableFooterBarClassNames;
  style?: CSSProperties;
}
属性说明类型默认值
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance—
leading显示在底部栏起始位置的内容。ReactNode—
actions在主要内容旁呈现的一组操作。ReactNode—
attached是否以贴合相邻表格或容器的样式呈现。booleantrue
className追加到组件根元素的 CSS 类名。string—
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseTableFooterBarClassNames—
style追加到组件根元素的内联样式。CSSProperties—