○表单

造型为桌子.

• ○表单
  • 使用量
  • 标记
    • 基本表格
    • 排序顺序
    • 禁用排序
    • 响应选项
    • 扩展器
    • 其他标记
  • 萨斯
  • Java 脚本
    • 过滤
      • 过滤器( 声明)
      • 过滤器( 强制)
    • 排序
      • 自定义排序( 声明)
      • 自定义排序( 简单)
    • 动态行
    • 活动
      • 准备
      • o表. 排序
      • o表. 排序
      • 从排序事件获取排序的列标题
  • 移徙
  • 联系人
  • 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-table。 。 。 .

标记

基本表格

添加一个 o-table 分类到任何要应用样式的表格:

<table class="o-table" data-o-component="o-table">
    ...
</table>

表格标题th)用作行标题, scope="row" 属性必须设置在 th数字 :

<table class="o-table" data-o-component="o-table">
    <tbody>
        <tr>
            <th scope="row" role="rowheader">Item</th>
            <td>Holiday</td>
            <td>Lunch</td>
        </tr>
        <tr>
            <th scope="row" role="rowheader">Cost</th>
            <td>£123.45</td>
            <td>£7</td>
        </tr>
    </tbody>
    ...
</table>

这张桌子 caption 元素应包括表格上下文的适当级别和样式的页眉.

<table class="o-table" data-o-component="o-table">
    <caption class="o-table__caption">
        <h2>My Table Caption</h2>
    </caption>
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
    ...
</table>

桌子的脚印 tfoot 元素可能使用助手类 o-table-footnote 以显示来源、免责声明等.

<table class="o-table" data-o-component="o-table">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2" class="o-table-footnote">Source: The Origami team.</td>
        </tr>
    </tfoot>
</table>

排序顺序

当可排序的表格列被点击时,默认应用了升序排序。 如果再次点击, 排序顺序会切换为下移排序 。 设置首选排序属性 data-o-table-preferred-sort-order="descending" 以倒转,所以在第一次点击时应用了下行排序.

<table
    class="o-table"
    data-o-component="o-table"
    data-o-table-preferred-sort-order="descending"
></table>

禁用排序

表格列默认可以排序,但可以通过添加来禁用 data-o-table-sortable="false" 到桌子边.

<table
    class="o-table"
    data-o-component="o-table"
    data-o-table-sortable="false"
></table>

或禁用每个表格列的排序,请添加 data-o-table-heading-disable-sort 改为栏 th 键.

<table class="o-table" data-o-component="o-table">
    <thead>
        <tr>
            <th>Heading One</th>
            <!-- do not show the actions column as sortable -->
            <th data-o-table-heading-disable-sort>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item One</td>
            <td><a href="#edit">edit</a></td>
        </tr>
    </tbody>
</table>

响应选项

表格不适合的小取景口有三种选择.

1. 溢出额 - 横向滚动整个表格,包括标题。 此选项还支持 扩展器。 。 。 .
2. 滚动 - 翻转表格,使标题在第一栏并粘上,数据可横向滚动.
3. 平顶 - 将每行分为一行,重复标题.

要启用这些集 data-o-table-responsive 改为所希望的应答表格类型,并添加该类型表格的类别。 然后把桌子包起来 o-table-container, (中文(简体) ), o-table-overlay-wrapper, (中文(简体) ), o-table-scroll-wrapper. 例如,“流出”表:

<div class="o-table-container">
    <div class="o-table-overlay-wrapper">
        <div class="o-table-scroll-wrapper">
            <table
                class="o-table o-table--horizontal-lines o-table--responsive-overflow"
                data-o-component="o-table"
                data-o-table-responsive="overflow"
            >
                ...
            </table>
        </div>
    </div>
</div>

如果您的项目不使用构建服务, 您可能需要指定一个 额外 Sass 选项 用于响应特性和地址 o- table Java 脚本。 。 。 . 更多实例见 登记册。 。 。 .

扩展器

反应表的"流出"风格(见上文)支持扩展器来隐藏行并提供一个"显示更多"/"显示更少"的按钮. 要启用此特性集 data-o-table-expanded="false" 到桌子边 表格不扩展时要显示的行数可以配置 data-o-table-minimum-row-count="20" (默认:20)。 。 。 .

<div class="o-table-container">
    <div class="o-table-overlay-wrapper">
        <div class="o-table-scroll--wrapper">
            <table
                class="o-table o-table--horizontal-lines o-table--responsive-overflow"
                data-o-component="o-table"
                data-o-table-responsive="overflow"
                data-o-table-expanded="false"
                data-o-table-minimum-row-count="10"
            >
                ...
            </table>
        </div>
    </div>
</div>

在可扩展的表格中添加一个脚注,例如有免责词或来源,在集装箱中添加脚注,并在表格中加一个编号和 aria-describedby 属性。 如果不在可扩展的桌子上工作, 使用该 tfoot 元素替换为。 。 。 .

<div class="o-table-container">
    <div class="o-table-overlay-wrapper">
        <div class="o-table-scroll--wrapper">
+			<table aria-describedby="demo-footnote">
                ...
            </table>
        </div>
    </div>
+	<div id="demo-footnode" class="o-table-footnote">
+		Source: The Origami team's love of fruit.
+	</div>
</div>

其他标记

• o-table--compact - 在桌子上应用更小的打字和贴纸.
• o-table--row-stripes - 在桌子上应用交替的条纹.
• o-table-footnote - 样式a tfoot 用于源、免责声明等.
• o-table__cell--numeric - 应用到数字单元格,使内容与右边对齐.
• o-table__cell--vertically-center - 应用到垂直中心的细胞.

详见登记册: 表格演示。 。 。 .

萨斯

使用 @include oTable() 以包含所有表格特性的样式。 或者,也可以用颗粒法将样式包括进去 $opts 地图.

包含所有表格特性 :

@include oTable();

或者包括只有选定可选特性的基础样式。 例如,只包括表格行的“多流”响应表和样式:

@include oTable(
    $opts: (
        'responsive-overflow',
        'lines',
    )
);

Java 脚本

手动即时 o-table数字 :

import OTable from '@financial-times/o-table';
OTable.init();

或者说

import OTable from '@financial-times/o-table';
oTable = new OTable(document.body);

这会回击一个实例 BasicTable (违约), OverflowTable, (中文(简体) ), FlatTable,或 ScrollTable 取决于 data-o-table-responsive所有四种表格类型 BaseTable。 。 。 .

证据会在所有表格中添加列排序。 它还将添加滚动控件,如果配置的话,将添加 扩展器 对任意 OverflowTable。这些可以配置 数据属性 或绝对带有选项对象:

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-形式 样式,用于过滤 o-table,例如 input 或者说 select 要素。 见 o表过滤演示 使用 o-forms 样式.

过滤器( 声明)

声明式过滤器是案例不敏感并进行部分匹配,例如"金道姆"的过滤器会揭示出"英国".

启用声明表过滤器 data-o-table-filter-id 财务报告和审定财务报表 data-o-table-filter-column 到窗体输入。 何处 data-o-table-filter-id 与 id 要过滤的表格和 data-o-table-filter-column 是要过滤的列的数值索引(从 0 开始).

例如,要过滤基于用户选中选项的表格:

<label>Filter the table by country:</label>
<!-- the filter input specifies the table id in "data-o-table-filter-id" -->
<select data-o-table-filter-id="example-table" data-o-table-filter-column="0">
    <option value="" selected>All</option>
    <option value="​Austria">​Austria</option>
    <option value="​Belgium">​Belgium</option>
    <!-- more options  -->
</select>

<!-- the table markup, this may be a responsive table -->
<div class="o-table-container">
    <!-- the table element with an id -->
    <table id="example-table">
        <!-- ... -->
    </table>
</div>

或根据用户选择的选项过滤表格 :

<label>Filter the table by country:</label>
<!-- the filter input specifies the table id in "data-o-table-filter-id" -->
<input
    type="text"
    data-o-table-filter-id="example-table"
    data-o-table-filter-column="0"
/>

<!-- the table markup, this may be a responsive table -->
<div class="o-table-container">
    <!-- the table element with an id -->
    <table id="example-table">
        <!-- ... -->
    </table>
</div>

过滤器( 强制)

这张桌子 filter 也可以使用方法过滤表格。 用列索引调用以过滤并应用过滤器。 滤波器可能是一个字符串,其作用类似一个声明式滤波器(即大小写不敏感并进行部分匹配):

const table = new OTable(tableElement);
table.filter(0, 'United Kingdom'); // Filter the first table column by "United Kingdom".

或者可以给出回调函数 。 回调时应当接受表格单元格元素并返回布尔值:

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 包括:

为自定义数据类型添加排序支持是可能的。 或者,可以修改现有类型的行为.

自定义排序( 声明)

如果您想要按自定义模式排序, 您可以将排序值作为数据属性应用到每行 : data-o-table-sort-value=${sort-value}。这些值可以是字符串或整数.

例如,支持自定义日期格式集 data-o-table-sort-value (原始内容存档于2018-09-29). UNIX Epoch.

<table class="o-table" data-o-component="o-table">
    <thead>
        <tr>
            <th data-o-table-data-type="date">Custom Date Formats</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-o-table-sort-value="1533081600">Wednesday, 1 August 2018</td>
        </tr>
        <tr>
            <td data-o-table-sort-value="1483228800">Jan 2017</td>
        </tr>
        <tr>
            <td data-o-table-sort-value="723168000">1st December 1992</td>
        </tr>
    </tbody>
</table>

或提供任意排序顺序:

<table class="o-table" data-o-component="o-table">
    <thead>
        <tr>
            <th>Things</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-o-table-sort-value="2">snowman</td>
        </tr>
        <tr>
            <td data-o-table-sort-value="3">42</td>
        </tr>
        <tr>
            <td data-o-table-sort-value="1">pangea</td>
        </tr>
    </tbody>
</table>

自定义排序( 简单)

而不是具体说明 data-o-table-sort-value 声明,可以提供formatter函数的客户端以生成特定数据类型的排序值.

例如,我们可以添加自定义数据类型的支持 emoji-time。 。 。 .

<table class="o-table" data-o-component="o-table">
    <thead>
        <tr>
            <th data-o-table-data-type="emoji-time">Emoji Time</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>🌑</td>
        </tr>
        <tr>
            <td>🌤️️</td>
        </tr>
        <tr>
            <td>🌑</td>
        </tr>
        <tr>
            <td>🌤️️</td>
        </tr>
    </tbody>
</table>

做这个决定 setSortFormatterForType 带有自定义数据类型和一个格式函数. Formatter 接受表格单元格(HTMLellement)并返回该单元格的排序值(数字或字符串). 在这种情况下,我们添加对我们的自定义类型的支持 emoji-time 通过给emoji分配一个数字排序值。 这将影响所有表格的即时 OTable。 。 。 .

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();

对于升降型,将导致:

<table class="o-table" data-o-component="o-table">
    <thead>
        <tr>
            <th data-o-table-data-type="emoji-time" aria-sort="ascending">
                Emoji Time
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-o-table-sort-value="1">🌑</td>
        </tr>
        <tr>
            <td data-o-table-sort-value="1">🌑</td>
        </tr>
        <tr>
            <td data-o-table-sort-value="2">🌤️️</td>
        </tr>
        <tr>
            <td data-o-table-sort-value="2">🌤️️</td>
        </tr>
    </tbody>
</table>

动态行

如果在表格被禁用后动态添加或删除行 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) 页面存档备份,存于互联网档案馆。 。 。 .

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 当自定义排序完成时,必须使用相关参数调用方法.

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。 。 。 .

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));
});

移徙

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .