DataTable 的属性

一言概要

Dash DataTable 是一个高度可交互且高度可定制的表格组件，非常适合需要用户执行如选择列、排序数据、过滤数据等操作的场景。这些功能背后的实现机制都由 React.js 自动处理，我们无需关心细节。

我们可以使用以下导入语句引入 DataTable：

1from dash import dash_table

考虑到通常在 Dash 项目中还会用到其他模块，更合理的导入方式如下：

1from dash import dcc, html, Input, Output, dash_table

属性

Dash DataTable 包含众多属性，核心作用是控制表格的显示效果和功能行为。

id 和 data 属性

首先需要了解的是 id 和 data 属性。id 属性在回调函数中用于引用该组件，而 data 属性则定义了表格的数据内容。以下是一个包含风向、风速和频率三列的数据集示例，数据以字典列表的形式传入 DataTable 的 data 参数：

可以看到数据已成功显示在网页上，但目前只能点击单元格，无法进行其他操作。

columns 属性

如前所示，即使未显式指定列名，列标题也能正常显示。若希望对列有更多控制权，可以使用列表推导式，通过添加字典来配置每列的属性。下面的代码示例使列具备可选中、可删除和可隐藏的功能。

这里使用了列表推导式，但也可以为特定列单独设置属性，例如仅让部分列支持可选中或可删除。

其他与列相关的属性

以下是几个常用且实用的列相关属性：

• sort_action：控制列的排序功能。设为 'none' 表示禁用排序；设为 'native' 时，表格会自动提供排序控件供用户使用；设为 'custom' 则适用于高级自定义场景（本课程不深入）。大多数情况下，使用 sort_action='native' 即可满足需求。
• sort_mode：允许用户按单列排序（'single'）或同时按多列排序（'multi'）。
• column_selectable：控制列是否可被选择。设为 'single' 只能选一列，设为 'multi' 可多选。默认值为 False。
• selected_columns：当 column_selectable 不为 False 时生效，用于获取用户在界面中选中的列的 ID 名称。当前先传入空列表。此属性对于将 DataTable 与回调函数联动至关重要。

让我们结合这些属性来增强之前创建的表格的交互性：

与行相关的属性

以下属性可用于调整表格行的行为：

• editable：通常建议省略此项。若设为 True，则允许用户编辑单元格内容。
• filter_action：设为 'native' 时，表格会在列名下方自动生成一个过滤行，支持按字符串、整数等类型筛选数据。默认值 'none' 表示不启用界面级过滤功能。
• row_selectable：当设为 'single' 时可选中单行，设为 'multi' 时可多选行。默认为 False，表示禁用行选择。
• row_deletable：设为 True 时，每行右侧会出现一个小叉号按钮（x），允许用户删除行。
• selected_rows：当 row_selectable 不为 False 时生效，用于获取用户在界面中选中的行的索引。当前先传入空列表。此属性对回调函数联动同样至关重要。

接下来，在之前的示例基础上加入行级别的交互功能：

与样式相关的属性

这部分负责控制表格的视觉呈现。为了保持简洁，我们只保留必要的属性，以下为初始代码片段：

1app = JupyterDash(__name__, external_stylesheets=[dbc.themes.CERULEAN])
2
3app.layout = dbc.Container([
4    dash_table.DataTable(
5        id='mytable',
6        data=wind.to_dict('records'),
7    )
8], fluid=True)
9
10app.run_server(debug=True)

以下是几个重要的样式属性，是美化表格的良好起点：

• style_header：传入一个符合 Dash 要求的 CSS 字典，用于自定义表头单元格的样式。
• style_cell：为表格中所有单元格应用 CSS 样式，包括数据行、表头和过滤行。需传入合法的 Dash 友好 CSS 字典。
• style_cell_conditional：可选地传入一个字典列表，每个字典包含一个 'if' 键。例如，可用于实现文本列左对齐。
• style_as_list_view：设为 True 时，移除表格的垂直分隔线，仅保留水平线，使表格更像列表形式。

深入分析这段代码，它已因增加更多自定义选项而变得更为复杂。

具体步骤如下：

• 从 wind 数据集中提取出文本类型的列。
• 创建应用：
  • 使用 Dash Bootstrap Components 提供的 Cerulean 主题。
• 设置应用布局：
  • 添加 dash_table.DataTable 组件，并进行如下定制：
    • style_header：将表头背景色设为青绿色，文字颜色设为黑色，并添加粗黑实线边框。
    • style_cell：设置单元格字体为 Times New Roman，并添加细黑实线边框。
    • style_cell_conditional：遍历 text_cols 列表，对所有文本列应用左对齐（textAlign: 'left'）。
    • style_as_list_view：移除垂直分隔线，仅保留水平线。
• 运行应用

该代码构建了一个 Dash 网页应用，展示风力数据表格，并对表头、单元格及文本对齐进行了个性化样式设置。用户可获得清晰美观的数据视图。

页面相关属性

我们还可以控制数据在页面上的显示方式。目前所有行都一次性显示，这在数据量大时并不理想。

• page_action、page_current 和 page_size：这三个属性协同工作，适用于绝大多数分页场景。更复杂的用法超出本课程范围。

通过设置 page_action='native'、page_current=0 和 page_size=10，可以实现每页显示 10 行数据，默认从第一页开始。

注意：本课介绍了 Dash DataTable 中最常见且最有用的若干属性，旨在帮助初学者建立基本认知并探索其工作原理与实际用途。后续我们将进一步深入这些属性，并学习如何与 Dash 的核心功能——回调函数——结合使用。