# @financial-times/o-table 中文文档 规范地址：https://npmcn.com/package/%40financial-times/o-table/ 版本：10\.0\.2 npm 元数据更新时间：2026-10-06T13:39:53.680Z 中文译文更新时间：2026-11-14T18:47:11.373Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-table 原文对照：https://npmcn.com/package/%40financial-times/o-table/?lang=original 项目主页：https://registry.origami.ft.com/components/o-table ## 关键信息（来自 npm 元数据） - 包体积（解压后）：837 kB，42 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：1 个 - peer 依赖：@financial-times/math ^1\.0\.0，@financial-times/o-brand ^4\.1\.0，@financial-times/o-private-foundation ^1\.0\.0 - 首次发布：2019-02-12T21:22:29.749Z - 最新版本发布：2025-06-30T09:33:55.658Z - 近 30 天下载量：4024（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：54（近 12 个月 0 个） ## 中文简介 为跨FT产品的表格提供外观和外观. ## 安装 ```sh npm install @financial-times/o-table ``` 也可以使用：`pnpm add @financial-times/o-table`、`yarn add @financial-times/o-table`、`bun add @financial-times/o-table` ## README # ○表单 造型为桌子. - [○表单](https://npmcn.com/package/%40financial-times/o-table/#readme-o-table) - [使用量](https://npmcn.com/package/%40financial-times/o-table/#readme-usage) - [标记](https://npmcn.com/package/%40financial-times/o-table/#readme-markup) - [基本表格](https://npmcn.com/package/%40financial-times/o-table/#readme-basic-table) - [排序顺序](https://npmcn.com/package/%40financial-times/o-table/#readme-sort-order) - [禁用排序](https://npmcn.com/package/%40financial-times/o-table/#readme-disable-sort) - [响应选项](https://npmcn.com/package/%40financial-times/o-table/#readme-responsive-options) - [扩展器](https://npmcn.com/package/%40financial-times/o-table/#readme-expander) - [其他标记](https://npmcn.com/package/%40financial-times/o-table/#readme-additional-markup) - [萨斯](https://npmcn.com/package/%40financial-times/o-table/#readme-sass) - [Java 脚本](https://npmcn.com/package/%40financial-times/o-table/#readme-javascript) - [过滤](https://npmcn.com/package/%40financial-times/o-table/#readme-filtering) - [过滤器( 声明)](https://npmcn.com/package/%40financial-times/o-table/#readme-filter-declarative) - [过滤器( 强制)](https://npmcn.com/package/%40financial-times/o-table/#readme-filter-imperative) - [排序](https://npmcn.com/package/%40financial-times/o-table/#readme-sorting) - [自定义排序( 声明)](https://npmcn.com/package/%40financial-times/o-table/#readme-custom-sort-declarative) - [自定义排序( 简单)](https://npmcn.com/package/%40financial-times/o-table/#readme-custom-sort-imperative) - [动态行](https://npmcn.com/package/%40financial-times/o-table/#readme-dynamic-rows) - [活动](https://npmcn.com/package/%40financial-times/o-table/#readme-events) - [准备](https://npmcn.com/package/%40financial-times/o-table/#readme-otableready) - [o表. 排序](https://npmcn.com/package/%40financial-times/o-table/#readme-otablesorted) - [o表. 排序](https://npmcn.com/package/%40financial-times/o-table/#readme-otablesorting) - [从排序事件获取排序的列标题](https://npmcn.com/package/%40financial-times/o-table/#readme-get-the-sorted-column-heading-from-a-sort-event) - [移徙](https://npmcn.com/package/%40financial-times/o-table/#readme-migration) - [联系人](https://npmcn.com/package/%40financial-times/o-table/#readme-contact) - [许可证](https://npmcn.com/package/%40financial-times/o-table/#readme-licence) ## 使用量 检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) 开始 `o-table`。 。 。 . ## 标记 ### 基本表格 添加一个 `o-table` 分类到任何要应用样式的表格: ```html ...
``` 表格标题`th`)用作行标题, `scope="row"` 属性必须设置在 `th`数字 : ```html ...
Item Holiday Lunch
Cost £123.45 £7
``` 这张桌子 `caption` 元素应包括表格上下文的适当级别和样式的页眉. ```html ... ... ...

My Table Caption
``` 桌子的脚印 `tfoot` 元素可能使用助手类 `o-table-footnote` 以显示来源、免责声明等. ```html ... ...
Source: The Origami team.
``` ### 排序顺序 当可排序的表格列被点击时,默认应用了升序排序。 如果再次点击, 排序顺序会切换为下移排序 。 设置首选排序属性 `data-o-table-preferred-sort-order="descending"` 以倒转,所以在第一次点击时应用了下行排序. ```html
``` ### 禁用排序 表格列默认可以排序,但可以通过添加来禁用 `data-o-table-sortable="false"` 到桌子边. ```html
``` 或禁用每个表格列的排序,请添加 `data-o-table-heading-disable-sort` 改为栏 `th` 键. ```html
Heading One Actions
Item One edit
``` ### 响应选项 表格不适合的小取景口有三种选择. 1. [溢出额](https://registry.origami.ft.com/components/o-table#demo-responsive-overflow) - 横向滚动整个表格,包括标题。 此选项还支持 [扩展器](https://npmcn.com/package/%40financial-times/o-table/#readme-expander)。 。 。 . 2. [滚动](https://registry.origami.ft.com/components/o-table#demo-responsive-scroll) - 翻转表格,使标题在第一栏并粘上,数据可横向滚动. 3. [平顶](https://registry.origami.ft.com/components/o-table#demo-responsive-flat) - 将每行分为一行,重复标题. 要启用这些集 `data-o-table-responsive` 改为所希望的应答表格类型,并添加该类型表格的类别。 然后把桌子包起来 `o-table-container`, (中文(简体) ), `o-table-overlay-wrapper`, (中文(简体) ), `o-table-scroll-wrapper`. 例如,“流出”表: ```html
...
``` 如果您的项目不使用构建服务, 您可能需要指定一个 [额外 Sass 选项](https://npmcn.com/package/%40financial-times/o-table/#readme-sass) 用于响应特性和地址 [o- table Java 脚本](https://npmcn.com/package/%40financial-times/o-table/#readme-JavaScript)。 。 。 . 更多实例见 [登记册](https://registry.origami.ft.com/components/o-table)。 。 。 . ### 扩展器 反应表的"流出"风格([见上文](https://npmcn.com/package/%40financial-times/o-table/#readme-responsive-options))支持扩展器来隐藏行并提供一个"显示更多"/"显示更少"的按钮. 要启用此特性集 `data-o-table-expanded="false"` 到桌子边 表格不扩展时要显示的行数可以配置 `data-o-table-minimum-row-count="20"` _(默认:20)_。 。 。 . ```html
...
``` 在可扩展的表格中添加一个脚注,例如有免责词或来源,在集装箱中添加脚注,并在表格中加一个编号和 `aria-describedby` 属性。 如果不在可扩展的桌子上工作, [使用该 `tfoot` 元素替换为](https://npmcn.com/package/%40financial-times/o-table/#readme-basic-table)。 。 。 . ```diff
+ ...
+
+ Source: The Origami team's love of fruit. +
``` ### 其他标记 - `o-table--compact` - 在桌子上应用更小的打字和贴纸. - `o-table--row-stripes` - 在桌子上应用交替的条纹. - `o-table-footnote` - 样式a `tfoot` 用于源、免责声明等. - `o-table__cell--numeric` - 应用到数字单元格,使内容与右边对齐. - `o-table__cell--vertically-center` - 应用到垂直中心的细胞. 详见登记册: [表格演示](https://registry.origami.ft.com/components/o-table)。 。 。 . ## 萨斯 使用 `@include oTable()` 以包含所有表格特性的样式。 或者,也可以用颗粒法将样式包括进去 `$opts` 地图. 包含所有表格特性 : ```scss @include oTable(); ``` 或者包括只有选定可选特性的基础样式。 例如,只包括表格行的“多流”响应表和样式: ```scss @include oTable( $opts: ( 'responsive-overflow', 'lines', ) ); ``` | 特性 | 说明 | 品牌支持 | | :-: | :-: | :-: | | 反应流量 | 见 [响应选项](https://npmcn.com/package/%40financial-times/o-table/#readme-responsive-options)。 。 。 . | 核心、内部、白色标签 | | 响应平面 | 见 [响应选项](https://npmcn.com/package/%40financial-times/o-table/#readme-responsive-options)。 。 。 . | 核心、内部、白色标签 | | 响应-滚动 | 见 [响应选项](https://npmcn.com/package/%40financial-times/o-table/#readme-responsive-options)。 。 。 . | 核心、内部、白色标签 | | 线条 | 水平线和垂直线的样式,加上边框. | 核心、内部、白色标签 | | 紧凑 | 一张带有更小的打字和贴纸的桌子. | 核心、内部、白色标签 | | 条纹 | 换行条纹样式. | 核心、内部 | | 行头 | 行行行行行行行作行行行行相. | 内部 | ## Java 脚本 手动即时 `o-table`数字 : ```js import OTable from '@financial-times/o-table'; OTable.init(); ``` 或者说 ```js import OTable from '@financial-times/o-table'; oTable = new OTable(document.body); ``` 这会回击一个实例 `BasicTable` (违约), `OverflowTable`, (中文(简体) ), `FlatTable`,或 `ScrollTable` 取决于 `data-o-table-responsive`所有四种表格类型 `BaseTable`。 。 。 . 证据会在所有表格中添加列排序。 它还将添加滚动控件,如果配置的话,将添加 [扩展器](https://npmcn.com/package/%40financial-times/o-table/#readme-expander) 对任意 `OverflowTable`。这些可以配置 [数据属性](https://npmcn.com/package/%40financial-times/o-table/#readme-disable-sort) 或绝对带有选项对象: ```js import OTable from '@financial-times/o-table'; OTable.init(document.body, { sortable: true, expanded: true, preferredSortOrder: 'ascending', minimumRowCount: 10, }); ``` ### 过滤 全体 `o-table` 实例支持在一个单列上过滤。 过滤器可以在 HTML 中宣告或调用 `o-table` Java 脚本方法 `filter`。 。 。 . 用于过滤表格的形式元素的样式不由 `o-table`然而,我们建议使用 [o-形式](https://registry.origami.ft.com/components/o-forms) 样式,用于过滤 `o-table`,例如 `input` 或者说 `select` 要素。 见 [o表过滤演示](https://registry.origami.ft.com/components/o-table#demo-filter) 使用 `o-forms` 样式. #### 过滤器( 声明) 声明式过滤器是案例不敏感并进行部分匹配,例如"金道姆"的过滤器会揭示出"英国". 启用声明表过滤器 `data-o-table-filter-id` 财务报告和审定财务报表 `data-o-table-filter-column` 到窗体输入。 何处 `data-o-table-filter-id` 与 `id` 要过滤的表格和 `data-o-table-filter-column` 是要过滤的列的数值索引(从 0 开始). 例如,要过滤基于用户选中选项的表格: ```html
``` 或根据用户选择的选项过滤表格 : ```html
``` #### 过滤器( 强制) 这张桌子 `filter` 也可以使用方法过滤表格。 用列索引调用以过滤并应用过滤器。 滤波器可能是一个字符串,其作用类似一个声明式滤波器(即大小写不敏感并进行部分匹配): ```js const table = new OTable(tableElement); table.filter(0, 'United Kingdom'); // Filter the first table column by "United Kingdom". ``` 或者可以给出回调函数 。 回调时应当接受表格单元格元素并返回布尔值: ```js const table = new OTable(tableElement); table.filter(0, cell => { return parseInt(cell.textContent, 10) > 3; }); // Filter the first table column. Keep rows with a value more than 3. ``` ### 排序 全体 `o-table` 实例支持排序。 在非字符串值上进行排序,如数字,如果列类型已被宣布,则有效。 例如,在数字一栏中,将以下内容添加到 `o-table`数字 : `data-o-table-data-type="number"`。 。 。 . 其他数据类型 `data-o-table-data-type` 包括: | 类型 | 说明 | 实例 | | :-: | :-: | :-: | | 文本 | 默认, 内容排序为字符串 . | "珍妮·多伊" "约翰·史密斯" | | 日期 | 支持日期和时间的FT样式,包括缩写. | 2014年4月20日 下午1时30分 | | 编号 | 任何可能包括数字格式和缩写的数字. | "1200","100","3.2","1bn","2tn" | | 百分比 | 任何带有或没有符号"%"的百分比. | “3.3%”、“200%”、“50%” | | 货币 | 任何货币,可能包括数字格式,数字缩写和货币符号. | 8400万元,"36bn","90bn","Rp14.595" | | 数字 | 可被视为不符合更具体类型的数字的一栏. | "101个达尔马提亚人" | 为自定义数据类型添加排序支持是可能的。 或者,可以修改现有类型的行为. #### 自定义排序( 声明) 如果您想要按自定义模式排序, 您可以将排序值作为数据属性应用到每行 : `data-o-table-sort-value=${sort-value}`。这些值可以是字符串或整数. 例如,支持自定义日期格式集 `data-o-table-sort-value` (原始内容存档于2018-09-29). UNIX Epoch. ```html
Custom Date Formats
Wednesday, 1 August 2018
Jan 2017
1st December 1992
``` 或提供任意排序顺序: ```html
Things
snowman
42
pangea
``` #### 自定义排序( 简单) 而不是具体说明 `data-o-table-sort-value` [声明](https://npmcn.com/package/%40financial-times/o-table/#readme-custom-sort-declarative),可以提供formatter函数的客户端以生成特定数据类型的排序值. 例如,我们可以添加自定义数据类型的支持 `emoji-time`。 。 。 . ```html
Emoji Time
🌑
🌤️️
🌑
🌤️️
``` 做这个决定 `setSortFormatterForType` 带有自定义数据类型和一个格式函数. Formatter 接受表格单元格(HTMLellement)并返回该单元格的排序值(数字或字符串). 在这种情况下,我们添加对我们的自定义类型的支持 `emoji-time` 通过给emoji分配一个数字排序值。 这将影响所有表格的即时 `OTable`。 。 。 . ```js import OTable from '@financial-times/o-table'; // Set a filter for custom data type "emoji-time". // The return value may be a string or number. OTable.setSortFormatterForType('emoji-time', cell => { const text = cell.textContent.trim(); if (text === '🌑') { return 1; } if (text === '🌤️️') { return 2; } return 0; }); OTable.init(); ``` 对于升降型,将导致: ```html
Emoji Time
🌑
🌑
🌤️️
🌤️️
``` ### 动态行 如果在表格被禁用后动态添加或删除行 `updateRows`; 这将对新行应用任何已有的排序或过滤器. ### 活动 以下事件由 `o-table`。 。 。 . - `oTable.ready` - `oTable.sorting` - `oTable.sorted` #### 准备 `oTable.ready` 打开备忘列表时点火. 该事件提供了以下属性: - `detail.instance` - 已关闭 `o-table` 实例 _(Flattable | Scrolltable | Overflowttable | Basictable) 页面存档备份,存于互联网档案馆_。 。 。 . #### o表. 排序 `oTable.sorted` 表示表格已完成排序。 它包括表格目前排序状况的细节. 该事件提供了以下属性: - `detail.sortOrder` - 排序顺序,例如"上升" _(叫声)_。 。 。 . - `detail.columnIndex` - 排序列标题的索引 _(数目)_。 。 。 . - `detail.instance` - 执行 `o-table` 实例 _(Flattable | Scrolltable | Overflowttable | Basictable) 页面存档备份,存于互联网档案馆_。 。 。 . ```js document.addEventListener('oTable.sorted', event => { console.log( `The target table was just sorted by column "${event.detail.columnIndex}" in an "${event.detail.sortOrder}" order.` ); }); ``` #### o表. 排序 此事件是在基于用户交互的表格类型之前发射的 。 可能无法执行自定义排序功能。 这可能有利于排序一个已调色表服务器侧 . 该事件提供了以下属性: - `detail.sort` - 请求的排序, 例如“ 递升 ” _(叫声)_。 。 。 . - `detail.columnIndex` - 将排序的列标题索引 _(数目)_。 。 。 . - `detail.instance` - 执行 `o-table` 实例 _(Flattable | Scrolltable | Overflowttable | Basictable) 页面存档备份,存于互联网档案馆_。 。 。 . 截取默认时排序 `sorted` 当自定义排序完成时,必须使用相关参数调用方法. ```js document.addEventListener('oTable.sorting', event => { // Prevent default sorting. event.preventDefault(); // Update the table with a custom sort. console.log(`Update the table with sorted data here.`); // Fire the sorted event, passing along the column index and sort. event.detail.instance.sorted({ columnIndex: event.detail.columnIndex, sortOrder: event.detail.sort, }); }); ``` #### 从排序事件获取排序的列标题 `o-table` 排序事件提供a `columnIndex`。本索引地图为一列标题。 获取列标题使用 `getTableHeader`。 。 。 . ```js document.addEventListener('oTable.sorting', event => { const table = event.detail.instance; const columnIndex = event.detail.columnIndex; // Get the table header from the column index. console.log(table.getTableHeader(columnIndex)); }); ``` ## 移徙 | 状态 | 主要版本 | 最后一个小版本 | 移徙指南 | | :-: | :-: | :-: | :-: | | 维护 | 10个 | 不详 | [迁移到 v10](https://npmcn.com/package/%40financial-times/o-table/MIGRATION.md#migrating-from-v9-to-v10) | | 已贬值 | 第9条 | 第9.3条 | [迁移到 v9](https://npmcn.com/package/%40financial-times/o-table/MIGRATION.md#migrating-from-v8-to-v9) | | 已贬值 | 第8条 | 第8.1条 | [迁移到 v8](https://npmcn.com/package/%40financial-times/o-table/MIGRATION.md#migrating-from-v7-to-v8) | | 已贬值 | 第7条 | 7.4 (中文(简体) ) | [迁移到 v7](https://npmcn.com/package/%40financial-times/o-table/MIGRATION.md#migrating-from-v6-to-v7) | | 已贬值 | 6个 | 6.9 联合国 | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-table/MIGRATION.md#migrating-from-v5-to-v6) | | 已贬值 | 页:1 | 5.2 国家 | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-table/MIGRATION.md#migrating-from-v4-to-v5) | | 已贬值 | 页:1 | 4.1 国家 | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-table/MIGRATION.md#migrating-from-v3-to-v4) | | 已贬值 | 3个 | 3.0 调用 | \- 说吧 | | 已贬值 | 2个 | 2.0 数据 | \- 说吧 | | 已贬值 | 1个 | 第1.7条 | \- 说吧 | ## 联系人 如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-table/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 . ## 许可证 本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 . ## 常见问题 ### @financial-times/o-table 是什么？ 为跨FT产品的表格提供外观和外观\. ### 如何安装 @financial-times/o-table？ 在项目目录运行 npm install @financial-times/o-table，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/math（^1\.0\.0）、@financial-times/o-brand（^4\.1\.0）、@financial-times/o-private-foundation（^1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @financial-times/o-table 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-table 是否存在。 ### @financial-times/o-table 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @financial-times/o-table 可以商用吗？ @financial-times/o-table 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @financial-times/o-table 的下载量有多少？ 根据 npm 官方下载统计，@financial-times/o-table 在 2026/10/15 – 2026/11/13 这 30 天内被下载 4,024 次，日均约 134 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @financial-times/o-table 还在维护吗？ 最新版本 10\.0\.2 发布于 2025/06/30（1\.4 年前）；至今共发布 54 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。