【Python百日基础系列】Day30 - Dash_table基础

B站视频讲解：

https://www.bilibili.com/video/BV1WL411S7Su

一、 Dash_table概述

Dash DataTable 是一个交互式表格组件，设计用于查看、编辑和探索大型数据集。
这个组件是用 React.js 从头开始​​编写的，专门为 Dash 社区编写。它的 API 被设计为符合人体工程学，其行为可以通过其属性完全自定义。DataTable 使用标准的语义 HTML

标记呈现，这使其易于访问、响应迅速且易于设置样式。

1.1 快速开始

import dash
from dash import dash_table
import pandas as pd

csv_url = 'https://raw.githubusercontent.com/plotly/datasets/master/solar.csv'  # 打不开
df = pd.read_csv('data/solar.csv')
# df.to_dict()的参数有如下取值，最常用的是records(得到一个有行数n个字典组成的列表)
print(df.to_dict('dict'), type(df.to_dict('dict')))
# print(df.to_dict(list), type(df.to_dict(list)))
print(df.to_dict('series'), type(df.to_dict('series')))
print(df.to_dict('split'), type(df.to_dict('split')))
print(df.to_dict('records'), type(df.to_dict('records')))
print(df.to_dict('index'), type(df.to_dict('index')))

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    # 数据为一个列表，元素为df的行数个字典，每个字典的key为每个列名,value为本行中的每个列的值
    data=df.to_dict('records'),
    # 表格可编辑
    editable=True,      
)

if __name__ == '__main__':
    app.run_server(debug=True)

1.2 带有点击回调的表格

from dash import Dash, Input, Output, callback
from dash import dash_table as dt
import pandas as pd
import dash_bootstrap_components as dbc

df = pd.read_csv('data/gdp-life-exp-2007.csv')

# BOOTSTRAP主体样式
app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

# dash_bootstrap_components的容器
app.layout = dbc.Container([
    # dbc标签
    dbc.Label('单击表格中的单元格:'),
    # dbc数据表
    dt.DataTable(
        id='tbl',
        data=df.to_dict('records'),
        columns=[{"name": i, "id": i} for i in df.columns],
    ),
    # dbc提示框
    dbc.Alert(id='tbl_out'),
])

@callback(Output('tbl_out', 'children'),
          Input('tbl', 'active_cell'))
def update_graphs(active_cell):
    """ 接受被单击激活的单元格信息，返回Alert提示框，没有单元格被激活是显示‘单击表格’ """
    return str(active_cell) if active_cell else "单击表格"

if __name__ == "__main__":
    app.run_server(debug=True)

1.3 数据表属性

help(dash.dash_table.DataTable)

• id（字符串；可选）：表的 ID。

• active_cell（dict ; 可选）：当前活动单元格的行和列索引和 ID。 row_id仅当数据行有id键时才返回。active_cell 是一个带键的字典：

  • column（数字；可选）
  • column_id（字符串；可选）
  • row（数字；可选）
  • row_id(字符串 | 数字; 可选)

• cell_selectable( boolean ; default True)：如果为 True（默认），则可以单击和导航表格单元格。

• column_selectable（值等于：‘single’、‘multi’ 或 false；默认False）：如果single，则用户可以通过将出现在标题行中的单选按钮选择单个列或一组合并的列。如果multi，则用户可以通过将出现在标题行中的复选框选择多个列或合并列组。如果为 False，则用户将无法选择列并且标题行中不会出现任何输入。选择列时，其id将包含在 selected_columnsand 和 derived_viewport_selected_columns中.

• columns（字典列表；可选）：列描述了每个单独列的各个方面。name 和id是唯一必需的参数。columns 是带有键的字典列表：

• clearable（值等于：‘first’ 或 ‘last’ | boolean | 布尔值列表；可选）：如果为 True，用户可以通过单击列上的clear 操作按钮来清除该列。如果有多个标题行，True 将在每一行上显示操作按钮。如果last，则 clear操作按钮将仅出现在最后一个标题行上。如果 first它只会出现在第一个标题行上。这些是分别快捷等同[False, …, False, True] 和[True, False, …, False]。如果存在合并的多标题列，则您可以clear通过提供布尔数组来选择要在其中显示操作按钮的列标题行 。例如，[True, False]将clear在第一行显示操作按钮，但不会在第二行显示。如果clear操作按钮出现在合并列上，然后单击该按钮将清除与其关联的所有合并列。与 不同 column.deletable，此操作不会从表中删除列。它只从data.

• deletable（值等于：‘first’ 或 ‘last’ | boolean | 布尔值列表；可选）：如果为 True，用户可以通过单击列上的delete操作按钮来删除 该列。如果有多个标题行，True 将在每一行上显示操作按钮。如果last，则delete操作按钮将仅出现在最后一个标题行上。如果first它只会出现在第一个标题行上。这些是分别快捷等同[False, …, False, True]和[True, False, …, False]。如果存在合并的多标题列，则您可以delete通过提供布尔数组来选择要在其中显示操作按钮的列标题行。例如，[True, False]将delete 在第一行显示操作按钮，但不会在第二行显示。如果 delete操作按钮出现在合并列上，然后单击该按钮将删除与其关联的所有合并列。

• editable（布尔值；可选）：表中有两个editable标志。这是列级可编辑标志，还有表级 editable标志。这些标志确定表的内容是否可编辑。如果设置了列级别editable标志，它将覆盖该editable列的表级别标志。

• filter_options( dict ; 可选)：表中有两个filter_options道具。这是列级 filter_options 道具，还有表级 filter_options道具。这些道具确定适用的过滤器关系运算符是默认为sensitive 还是insensitive比较。如果设置了列级filter_options 道具，它将覆盖该filter_options列的表级道具。filter_options 是一个带键的字典：

  • case（一个值等于：“敏感”或“不敏感”；可选）

• format（dict ; 可选）：应用于列数据的格式。此道具源自d3 格式库规范。除了结构略有不同（在单个道具下），用法是相同的。另请参阅 dash_table.FormatTemplate。它包含典型数字格式的辅助函数。format 是一个带键的字典：

  • locale（dict ; 可选）：表示本地化特定的格式信息。如果未指定，将使用 d3-format 提供的默认值。locale 是一个带键的字典：
    • decimal（字符串；可选）：（默认值：‘.’）。用于小数分隔符的字符串。
    • group（字符串；可选）：（默认值：‘,’）。用于组分隔符的字符串。
    • grouping（数字列表；可选）：（默认值：[ 3 ] ）。表示分组模式的整数列表。千位的默认值为 3。
    • numerals（字符串列表；可选）：用作替换数字 0-9 的十个字符串的列表。
    • percent（字符串；可选）：（默认值：‘%’）。用于百分比符号的字符串。
    • separate_4digits（布尔值；可选）：（默认值：True）。用 4 位或更少的整数分隔整数。
    • symbol（字符串列表；可选）：（默认值：[ ‘$’, ‘’ ] ）。表示前缀和后缀符号的两个字符串的列表。通常用于货币，并使用 d3 的货币格式实现，但您可以将其用于其他符号，例如测量单位。
  • nully( boolean | number | string | list | dict ; 可选)：在格式化期间将用于代替 Noney 值的值。如果值类型与列类型匹配，则会正常格式化。
  • prefix（number ; 可选）：一个数字，表示在格式化期间使用的 SI 单位。有关dash_table.Format.Prefix有效值的列表，请参阅枚举。
  • specifier（字符串；可选）：（默认值：‘’）。表示格式化数字时要应用的 d3 规则。

• hideable（值等于：‘first’ 或 ‘last’ | boolean | 布尔值列表；可选）：如果为 True，用户可以通过单击列上的hide 操作按钮来隐藏该列。如果有多个标题行，True 将在每一行上显示操作按钮。如果last，则 hide操作按钮将仅出现在最后一个标题行上。如果 first它只会出现在第一个标题行上。这些是分别快捷等同[False, …, False, True] 和[True, False, …, False]。如果存在合并的多标题列，则您可以hide通过提供布尔数组来选择要在其中显示操作按钮的列标题行 。例如，[True, False]将hide在第一行显示操作按钮，但不会在第二行显示。如果hide操作按钮出现在合并列上，然后单击该按钮将隐藏 与其关联的所有合并列。

• id( string ; required):id列的。该列id用于将数据中的单元格与特定列进行匹配。该id不是在表格中。

• name( string | list of strings ; required)：name列的名称，因为它出现在列标题中。如果 name是字符串列表，则列将呈现多个标题行。

• on_change（dict ; 可选）：on_change用户发起修改的列的行为。on_change 是一个带键的字典：

  • action（等于：‘coerce’、‘none’ 或 ‘validate’ 的值；可选）：（默认为 ‘coerce’）：‘none’：不验证数据；‘coerce’：检查数据是否对应于目标类型，如果不是，则尝试将其强制转换为目标类型；‘validate’：检查数据是否对应于目标类型（无强制）。
  • failure（值等于：‘accept’、‘default’ 或 ‘reject’；可选）：（默认为 ‘reject’）：如果操作失败，如何处理该值。‘accept’：使用无效值；‘default’: 将提供的值替换为validation.default; ‘reject’：不修改现有值。

• presentation（等于：‘input’、‘dropdown’ 或 ‘markdown’ 的值；可选）：presentation用于显示数据的 。Markdown 可用于类型为“文本”的列。有关更多信息，请参阅“下拉列表”。[ ‘datetime’, ‘numeric’, ‘text’, ‘any’ ]默认为 ‘input’ 。

• renamable（值等于：‘first’ 或 ‘last’ | boolean | 布尔值列表；可选）：如果为 True，用户可以通过单击列上的rename操作按钮来重命名 该列。如果有多个标题行，True 将在每一行上显示操作按钮。如果last，则rename操作按钮将仅出现在最后一个标题行上。如果first它只会出现在第一个标题行上。这些是分别快捷等同[False, …, False, True]和[True, False, …, False]。如果存在合并的多标题列，则您可以rename通过提供布尔数组来选择要在其中显示操作按钮的列标题行。例如，[True, False]将rename 在第一行显示操作按钮，但不会在第二行显示。如果 rename操作按钮出现在合并列上，然后单击该按钮将重命名与其关联的所有合并列。

• selectable（一个值等于：‘first’ 或 ‘last’ | boolean | 布尔值列表；可选）：如果为 True，用户可以通过单击列中的复选框或单选按钮来选择该列。如果有多个标题行，True 将在每一行上显示输入。如果last，则输入将仅出现在最后一个标题行上。如果first它只会出现在第一个标题行上。这些是分别快捷等同[False, …, False, True]和[True, False, …, False]。如果存在合并的多标题列，则您可以通过提供布尔数组来选择要在其中显示输入的列标题行。例如，[True, False] 将selectable在第一行显示输入，但现在显示在第二行。如果selectable输入出现在合并列上，然后单击该输入将选择与其关联的所有合并列。表级道具 column_selectable用于确定要使用的列选择类型。

• sort_as_null（字符串列表 | 数字 | 布尔值；可选）：None排序时被视为（即忽略并始终显示在最后）的字符串、数字和布尔值数组 。此值覆盖表级别sort_as_None。

• type（等于：‘any’、‘numeric’、‘text’ 或 ‘datetime’ 的值；可选）：数据类型提供对每列类型的支持，并允许数据验证和强制。‘numeric’：表示浮点数和整数。‘text’：代表一个字符串。‘datetime’：表示日期或日期时间的字符串，格式为：‘YYYY-MM-DD HH:MM:SS.ssssss’ 或其某些截断。年份必须有 4 位数字，除非您使用validation.allow_YY: True. 还接受日期和时间之间的“T”或“t”，并在最后允许时区信息。要将这些字符串转换为 Pythondatetime对象，请使用dateutil.parser.isoparse. 在 R 中parse_iso_8601从 parsedate库中使用。警告：这些解析器不适用于 2 位数年份，如果您使用 validation.allow_YY: True并且不强制为 4 位数的年份。使用 2 位数年份的解析器可能对世纪做出与我们在前端做出的不同猜测。‘any’：代表任何类型的数据。如果未定义，则默认为“any”。

• validation（dict ; 可选）：validation用户输入处理的选项，可以接受、拒绝或应用默认值。validation 是一个带键的字典：

  • allow_YY（布尔值；可选）：这仅适用于datetime列。允许 2 位数年份（默认值：False）。如果为真，我们将年份解释为从 now-70 到 now+29 - 2019 年是 1949 年到 2048 年，但在 2020 年会有所不同。如果与 一起使用 action: ‘coerce’，会将用户输入转换为 4 位年份。
  • allow_null（布尔值；可选）：允许使用 Noney 值。（未定义，无，NaN）（默认值：False）。
  • default( boolean | number | string | list | dict ; 可选): 与 on_change.failure = ‘default’ 一起应用的默认值。（默认：无）。

• css（字典列表；可选）：该css属性是一种将 CSS 选择器和规则嵌入页面的方法。我们建议style_*在使用此属性之前先从这些属性开始css。示例：[ {“selector”: “.dash-spreadsheet”, “rule”: ‘font-family: “monospace”’} ] 。css 是带有键的字典列表：

  • rule（字符串；必填）
  • selector（字符串；必填）

• data（字典列表；可选）：表的内容。数据中每个项目的键应与列 ID 匹配。每个项目还可以有一个“id”键，其值是它的行 ID。如果有 ID=‘id’ 的列，这将显示行 ID，否则它仅用于引用行以进行选择、过滤等。 示例：[ {‘column-1’: 4.5, 'column-2 ': ‘蒙特利尔’, ‘column-3’: ‘canada’}, {‘column-1’: 8, ‘column-2’: ‘boston’, ‘column-3’: ‘america’} ] 。

• data_previous（字典列表；可选）： 的先前状态data。data_previous具有相同的结构，data并且会在data更改时通过回调或通过编辑表进行更新。这是一个只读属性：设置此属性不会对表产生任何影响。

• data_timestamp（数字；可选）：上次编辑数据时的 Unix 时间戳。将此属性与其他时间戳属性（例如n_clicks_timestampin dash_html_components）一起使用以确定回调中的哪个属性已更改。

• derived_filter_query_structure( dict ; 可选): 该属性表示当前的结构filter_query作为树结构。查询结构的每个节点都有： type (string; required): ‘open-block’, ‘logical-operator’, ‘relational-operator’, ‘unary-operator’, or ‘expression’; subType (string; optional): ‘open-block’: ‘()’, ‘logical-operator’: ‘&&’, ‘||’, ‘relational-operator’: ‘=’, ‘>=’, '> ', ‘<=’, ‘<’, ‘!=’, ‘contains’, ‘unary-operator’: ‘!’, ‘is bool’, ‘is even’, ‘is nil’, ‘is num’, “是对象”、“是奇数”、“是素数”、“是 str”、“表达式”：“值”、“字段”；值（任何）：‘表达式，值’：传递的值，‘表达式，字段’：字段/道具名称。块（嵌套查询结构；可选）。left（嵌套查询结构；可选）。正确（嵌套查询结构；可选）。derived_filter_query_structure如果查询无效或为空，则将为None。

• derived_viewport_data（字典列表；可选）：此属性表示data当前页面上的当前状态。此属性将在分页、排序和过滤时更新。

• derived_viewport_indices（数字列表；可选）： derived_viewport_indices指示原始行在过滤、排序和/或分页后出现的顺序。 derived_viewport_indices包含当前页面的derived_virtual_indices索引，同时包含所有页面的索引。

• derived_viewport_row_ids（字符串列表 | 数字；可选）：按 derived_viewport_row_ids行 ID 在过滤、排序和/或分页后出现的顺序列出它们。derived_viewport_row_ids 包含当前页面的derived_virtual_row_ids ID ，同时包含所有页面的 ID。

• derived_viewport_selected_columns（字符串列表；可选）：derived_viewport_selected_columns包含selected_columns当前未隐藏的 id 。

• derived_viewport_selected_row_ids（字符串列表 | 数字；可选）： derived_viewport_selected_row_ids表示selected_rows当前可见页面上的ID 。

• derived_viewport_selected_rows（数字列表；可选）： 从 的角度derived_viewport_selected_rows表示 的索引 。selected_rowsderived_viewport_indices

• derived_virtual_data（字典列表；可选）：此属性表示data应用前端排序和过滤后所有页面的可见状态。

• derived_virtual_indices（数字列表；可选）： derived_virtual_indices表示原始行过滤排序后出现的顺序。 derived_viewport_indices包含当前页面的derived_virtual_indices索引，同时包含所有页面的索引。

• derived_virtual_row_ids（字符串列表|数字；可选）： derived_virtual_row_ids表示过滤排序后按出现顺序排列的行ID。 derived_viewport_row_ids包含当前页面的derived_virtual_row_idsID ，同时 包含所有页面的 ID。

• derived_virtual_selected_row_ids（字符串列表 | 数字；可选）： derived_virtual_selected_row_ids表示selected_rows过滤和排序后出现的所有页面的 ID 。

• derived_virtual_selected_rows（数字列表；可选）： 从 的角度derived_virtual_selected_rows表示 的索引 。selected_rowsderived_virtual_indices

• dropdown( dict ; 可选): dropdown指定不同列的下拉选项。每个条目都引用列 ID。该clearable属性定义是否可以删除该值。该options属性是指 options下拉列表的 。

• dropdown 是一个以字符串为键的 dict 和带有键的 dict 类型的值：

  • clearable（布尔值；可选）
  • options（听写列表；必填） options 是带有键的字典列表：
    • label（字符串；必填）
    • value（数字 | 字符串 | 布尔值；必填）

• dropdown_conditional（字典列表；可选）： dropdown_conditional指定各个列和单元格中的下拉选项。此属性允许您根据特定条件指定不同的下拉列表。例如，您可以根据“州”列中的当前值在一行中呈现不同的“城市”下拉列表。dropdown_conditional 是带有键的字典列表：

  • clearable（布尔值；可选）
  • if( dict ; 可选)if 是一个带键的字典：
    • column_id（字符串；可选）
    • filter_query（字符串；可选）
  • options（听写列表；必填）options 是带有键的字典列表：
    • label（字符串；必填）
    • value（数字 | 字符串 | 布尔值；必填）

• dropdown_data（字典列表；可选）： dropdown_data逐行、逐列指定下拉选项。数组中的每个项目都对应于data相同索引处的项目的相应下拉列表。项目中的每个条目均指列 ID。dropdown_data 是一个以字符串为键的字典列表和带有键的字典类型的值：

  • clearable（布尔值；可选）
  • options（听写列表；必填）options 是带有键的字典列表：
    • label（字符串；必填）
    • value（数字 | 字符串 | 布尔值；必填）

• editable( boolean ; default False): 如果为 True，则所有单元格中的数据都是可编辑的。当 editable为 True 时，可以通过在属性内部设置editable来使特定列不可编辑。如果为 False，则所有单元格中的数据都不可编辑。当为 False 时，可以通过设置 到属性内部来使特定列可编辑。

• end_cell( dict ; optional): 选择多个单元格时（通过单击一个单元格，然后按住shift键单击另一个单元格）, end_cell表示区域某个角中单元格的行/列坐标和ID。 start_cell表示另一个角的坐标。end_cell 是一个带键的字典：

  • column（数字；可选）
  • column_id（字符串；可选）
  • row（数字；可选）
  • row_id(字符串 | 数字; 可选)

• export_columns（等于：‘all’ 或 ‘visible’ 的值；默认值’visible’）：表示将在导出数据文件中使用的列。如果 all，将使用所有列（可见 + 隐藏）。如果visible，则仅使用可见列。默认为visible.

• export_format（等于：‘csv’、‘xlsx’ 或 ‘none’ 的值；默认’none’）：表示导出数据文件的类型，默认为’none’.

• export_headers（等于：‘none’、‘ids’、‘names’ 或 ‘display’ 的值；可选）：表示导出数据文件中标题的格式。如果 ‘none’，将没有标题。如果’display’，则数据文件的标题将是它当前的显示方式。需要注意的是 'display’仅支持’xlsx’export_format和会像’names’对’csv’导出格式。如果’ids’或 ‘names’，则数据文件的标题将分别是列 id 或列名。

• fill_width( boolean ; default True)： fill_width在一组 CSS 之间切换，用于两种常见行为： True：表格容器的宽度将增加以填充可用空间；False：表格容器的宽度将等于其内容的宽度。

• filter_action( dict ; default ‘none’)：该filter_action属性控制filtering UI的行为。如果’none’，则不显示过滤 UI。如果 ‘native’，则显示过滤 UI，过滤逻辑由表处理。也就是说，它是对data属性中存在的数据执行的。如果’custom’，则显示过滤 UI，但开发人员有责任通过回调对过滤进行编程（其中filter_query或 derived_filter_query_structure将是输入，data将是输出）。

  • filter_action是一个等于：‘custom’、‘native’ 或 ‘none’ 的值 | 带键的字典：

  • operator（等于：‘and’ 或 ‘or’ 的值；可选）

  • type（一个值等于：‘custom’或’native’；必需）

• filter_options( dict ; 可选)：表中有两个filter_options道具。这是表级 filter_options 道具，还有列级 filter_options道具。这些道具确定适用的过滤器关系运算符是默认为sensitive还是 insensitive比较。如果设置了列级filter_options道具，它将覆盖该filter_options列的表级道具。

  • filter_options 是一个带键的字典：

  • case（一个值等于：“敏感”或“不敏感”；可选）

• filter_query( string ; default ‘’): 如果filter_action启用，则当前过滤字符串在此filter_query属性中表示。

• fixed_columns( dict ; default { headers: False, data: 0}): fixed_columns将“修复”列集，以便它们在未固定的列上水平滚动时保持可见。 - fixed_columns从左到右修复列。如果headers为 False，则没有固定列。如果headers为 True，则所有操作列（参见row_deletable和row_selectable）都是固定的。可以通过为 分配一个数字来修复其他数据列data。请注意，修复列会对表的底层标记进行一些更改，并且可能会影响列的呈现方式或大小。查看文档示例以了解更多信息。

  • fixed_columns 是一个带键的字典：

  • data（值等于：0；可选）：示例{‘headers’:False, ‘data’:0}没有固定的列（默认值）。

  • headers（一个值等于：false；可选）| 带键的字典：

  • data（数字；可选）：示例{‘headers’:True, ‘data’:1}一列是固定的。

  • headers（一个值等于：true；必需）

• fixed_rows( dict ; default { headers: False, data: 0}): fixed_rows将“修复”行集，以便它们在垂直向下滚动表格时保持可见。fixed_rows从标题开始，从上到下修复行。如果headers为 False，则没有固定行。如果headers为 True，则所有标题行和过滤器行（请参阅 filter_action）都是固定的。可以通过为 分配一个数字来修复其他数据行data。请注意，修复行会对表的底层标记进行一些更改，并且可能会影响列的呈现方式或大小。查看文档示例以了解更多信息。

  • fixed_rows 是一个带键的字典：

  • data（值等于：0；可选）：示例{‘headers’:False, ‘data’:0}没有行是固定的（默认值）。

  • headers（一个值等于：false；可选）| 带键的字典：

  • data（数字；可选）：示例{‘headers’:True, ‘data’:1}一行是固定的。

  • headers（一个值等于：true；必需）

• hidden_columns（字符串列表；可选）：当前隐藏的列的列 ID 列表。查看相关的嵌套 prop columns.hideable。

• include_headers_on_copy_paste（布尔值；默认值False）：如果为 True，则在从表复制到不同选项卡和其他位置时包含标题。请注意，从表复制到自身以及在同一选项卡内的两个表之间复制时，标题将被忽略。

• is_focused（布尔值；可选）：如果为 True，则active_cell处于聚焦状态。

• loading_state( dict ; 可选): 保存来自 dash-renderer 的加载状态对象的对象。

  • loading_state 是一个带键的字典：

  • component_name（字符串；可选）：保存正在加载的组件的名称。

  • is_loading（boolean ; 可选）：确定组件是否正在加载。

  • prop_name（字符串；可选）：保存正在加载的属性。

• locale_format（dict ; 可选）：应用于表中所有列的本地化特定格式信息。该道具源自 d3.formatLocale数据结构规范。如果未指定，每个单独的嵌套 prop 将默认为预先确定的值。

  • locale_format 是一个带键的字典：

  • decimal（字符串；可选）：（默认值：‘.’）。用于小数分隔符的字符串。

  • group（字符串；可选）：（默认值：‘,’）。用于组分隔符的字符串。

  • grouping（数字列表；可选）：（默认值：[ 3 ] ）。表示分组模式的整数列表。

  • numerals（字符串列表；可选）：用作替换数字 0-9 的十个字符串的列表。

  • percent（字符串；可选）：（默认值：‘%’）。用于百分比符号的字符串。

  • separate_4digits（布尔值；可选）：（默认值：True）。用 4 位或更少的整数分隔。

• symbol（字符串列表；可选）：（默认值：[ ‘$’, ‘’ ] ）。表示前缀和后缀符号的两个字符串的列表。通常用于货币，并使用 d3 的货币格式实现，但您可以将其用于其他符号，例如测量单位。

• markdown_options( dict ; default { link_target: ‘_blank’, html: False})：该markdown_options属性允许自定义降价单元格行为。

  • markdown_options 是一个带键的字典：

  • html（布尔值；可选）：（默认值：False）如果为 True，则 html 可用于降价单元格如果呈现的内容可能来自不受信任的用户，请小心启用 html，因为这可能会产生 XSS 漏洞。

  • link_target（字符串 | 等于：‘_blank’、‘_parent’、‘_self’ 或 ‘_top’ 的值；可选）：（默认值：‘_blank’）。链接的行为（_blank 在新选项卡中打开链接，_parent 在父框架中打开链接，_self 在当前选项卡中打开链接，_top 在顶部框架中打开链接）或字符串。

  • merge_duplicate_headers（布尔值；可选）：如果为 True，则具有重复名称的邻居的列标题将合并到单个单元格中。这将应用于单列标题和多列标题。

• page_action（一个值等于：‘custom’, ‘native’ or ‘none’ ; default ‘native’）： page_action指的是表的一种模式，其中不是所有的行都显示一次：只显示一个子集（“页面”）并且可以通过单击页面底部的“下一个”或“上一个”按钮来查看下一个行子集。分页用于提高性能：我们不是一次渲染所有行（这可能很昂贵），而是只显示它们的一个子集。通过分页，我们可以翻阅表中存在的数据（例如一次翻阅10,000行中的data 100行），或者我们可以在用户单击“上一个”或“下一个”时使用回调即时更新数据“ 纽扣。 page_action’native’：所有数据都预先传递给表，分页逻辑由表处理；‘custom’: 数据一次一页地传递给表格，分页逻辑通过回调处理；‘none’: 禁用分页，一次渲染所有数据。

• page_count（number ; 可选）： page_count表示分页表中的页数。这实际上仅在执行后端分页时有用，因为前端能够使用表的完整大小来计算页数。

• page_current( number ; default 0): page_current表示用户所在的页面。使用此属性通过后端分页对回调中的数据进行索引。

• page_size（数;默认250）： page_size表示将在特定网页上时，可以显示的行数page_action是’custom’或’native’。

• persisted_props（值列表等于：‘columns.name’, ‘data’, ‘filter_query’, ‘hidden_​​columns’, ‘selected_columns’, ‘selected_rows’ 或 ‘sort_by’；默认值[ ‘columns.name’, ‘filter_query’, ‘hidden_columns’, ‘selected_columns’, ‘selected_rows’, ‘sort_by’]）：刷新组件后用户交互将持续的属性或页面。

• persistence( boolean | string | number ; 可选)：用于允许在组件或页面刷新时保留此组件中的用户交互。如果persisted是真的并且没有改变它之前的值，persisted_props那么用户在使用应用程序时改变的任何内容都会保留这些更改，只要新的 prop 值也与最初给出的值相匹配。与persistence_type和结合使用persisted_props。

• persistence_type（值等于：‘local’、‘session’ 或 ‘memory’；默认值’local’）：将存储持久的用户更改的位置：memory：仅保留在内存中，在页面刷新时重置。local：window.localStorage，浏览器退出后数据保留。session：window.sessionStorage，浏览器退出后数据被清除。

• row_deletable（布尔值；可选）：如果为 True，则x每个旁边都会出现一个，row用户可以删除该行。

• row_selectable（值等于：‘single’、‘multi’ 或 false；默认False）：如果single，则用户可以通过将出现在每行旁边的单选按钮选择单行。如果multi，则用户可以通过出现在每行旁边的复选框来选择多行。如果为 False，则用户将无法选择行并且不会出现其他 UI 元素。选择一行时，其索引将包含在selected_rows.

• selected_cells（字典列表；可选）： selected_cells代表被选择的单元格集合，作为一个对象数组，每个项目类似于active_cell。可以通过按住 shift 并单击不同的单元格或按住 shift 并使用箭头键导航来选择多个单元格。

  • selected_cells 是带有键的字典列表：

  • column（数字；可选）

  • column_id（字符串；可选）

  • row（数字；可选）

  • row_id(字符串 | 数字; 可选)

• selected_columns（字符串列表;可选）： selected_columns包含了通过时出现的UI元素选择的列的IDcolumn_selectable是’single’ or ‘multi’。

• selected_row_ids（字符串列表|号码;可选）： selected_row_ids包含了通过时出现的UI元素选定行的IDSrow_selectable是’single’或 ‘multi’。

• selected_rows（号码列表;可选）： selected_rows包含了通过时出现的UI元素中选择行的索引row_selectable是’single’或 ‘multi’。

• sort_action（等于：‘custom’、‘native’ 或 ‘none’ 的值；默认值’none’）：该sort_action属性允许按列对数据进行排序。如果’none’，则不显示排序 UI。如果 ‘native’，则显示排序 UI，排序逻辑由表处理。也就是说，它是对data属性中存在的数据执行的。如果’custom’，则显示排序 UI，但开发人员有责任通过回调（sort_by输入和data 输出）对排序进行编程。单击排序箭头将更新该 sort_by属性。

• sort_as_null（字符串列表 | 数字 | 布尔值；可选）：None排序时被视为（即忽略并始终显示在最后）的字符串、数字和布尔值数组 。此值将由没有sort_as_None. 默认为[].

• sort_by（字典列表；可选）： sort_by描述排序 UI 的当前状态。也就是说，如果用户单击列的排序箭头，则此属性将使用列 ID 和排序方向（asc或desc）进行更新。对于多列排序，这将是一个排序参数列表，按它们被点击的顺序排列。

  • sort_by 是带有键的字典列表：

  • column_id（字符串；必填）

  • direction（等于：‘asc’ 或 ‘desc’ 的值；必需）

• sort_mode（值等于： ‘single’ 或 ‘multi’；默认值’single’）：可以跨多列执行排序（例如，按国家/地区排序、在每个国家/地区内排序、按年份排序）或按单个列执行。注意 - 对于多列排序，目前无法通过 UI 确定列的排序顺序。参见 https://github.com/plotly/dash-table/issues/170。

• start_cell( dict ; optional): When selecting multiple cells (via clicking on a cell and then shift-clicking on another cell), start_cellrepresents the [ row, column ] coordinates of the cell in one of the corners of the region. end_cell表示另一个角的坐标。

  • start_cell 是一个带键的字典：

  • column（数字；可选）

  • column_id（字符串；可选）

  • row（数字；可选）

  • row_id(字符串 | 数字; 可选)

• style_as_list_view( boolean ; default False): 如果为 True，则表格的样式将类似于列表视图，并且列之间没有边框。

• style_cell（dict ; 可选）：要应用于表格的每个单独单元格的 CSS 样式。这包括标题单元格、data单元格和过滤器单元格。

• style_cell_conditional（字典列表；可选）：单元格的条件 CSS 样式。这可用于按列将样式应用于单元格。

  • style_cell_conditional 是带有键的字典列表：

  • if( dict ; 可选)

  • if 是一个带键的字典：

    • column_id（字符串 | 字符串列表；可选）

    • column_type（等于：‘any’、‘numeric’、‘text’ 或 ‘datetime’ 的值；可选）

• style_data（dict ; 可选）：要应用于每个单独数据单元格的 CSS 样式。也就是说，与 不同 style_cell，它不包括标题和过滤器单元格。

• style_data_conditional（字典列表；可选）：数据单元格的条件 CSS 样式。这可用于按列将样式应用于数据单元格。

  • style_data_conditional 是带有键的字典列表：

  • if( dict ; 可选)

  • if 是一个带键的字典：

    • column_editable（布尔值；可选）

    • column_id（字符串 | 字符串列表；可选）

• column_type（等于：‘any’、‘numeric’、‘text’ 或 ‘datetime’ 的值；可选）

• filter_query（字符串；可选）

• row_index（数字 | 等于：“奇数”或“偶数”| 数字列表；可选）

• state（等于：‘active’ 或 ‘selected’ 的值；可选）

• style_filter（dict ; 可选）：要应用于过滤器单元格的 CSS 样式。请注意，随着我们构建更复杂的过滤 UI，这在未来可能会发生变化。

• style_filter_conditional（字典列表；可选）：过滤器单元格的条件 CSS 样式。这可用于应用样式以按列过滤单元格。

  • style_filter_conditional 是带有键的字典列表：

  • if( dict ; 可选)

  • if 是一个带键的字典：

    • column_editable（布尔值；可选）

    • column_id（字符串 | 字符串列表；可选）

• column_type（等于：‘any’、‘numeric’、‘text’ 或 ‘datetime’ 的值；可选）

• style_header（dict ; 可选）：要应用于每个单独标题单元格的 CSS 样式。也就是说，与 不同style_cell，它排除data和 过滤单元格。

• style_header_conditional（字典列表；可选）：标题单元格的条件 CSS 样式。这可用于按列将样式应用于标题单元格。

  • style_header_conditional 是带有键的字典列表：

  • if( dict ; 可选)

  • if 是一个带键的字典：

    • column_editable（布尔值；可选）

    • column_id（字符串 | 字符串列表；可选）

• column_type（等于：‘any’、‘numeric’、‘text’ 或 ‘datetime’ 的值；可选）

• header_index（数字 | 数字列表 | 等于：‘odd’ 或 ‘even’ 的值；可选）

• style_table（dict ; 可选）：要应用于外部table容器的CSS 样式。这通常用于设置表格的宽度或高度等属性。

• tooltip（dict ; 可选）： tooltip是应用于所有行的基于列的工具提示配置。键是列 id，值是工具提示配置。示例：{i: {‘value’: i, 'use_with: ‘both’} for i in df.columns}。

  • tooltip是一个以字符串作为键和值的字符串类型的字典 | 带键的字典：

  • delay（数字；可选）：表示悬停单元格时显示工具提示之前的延迟（以毫秒为单位）。这会覆盖表的tooltip_delay 属性。如果设置为None，将立即显示工具提示。

  • duration（number ; 可选）：表示悬停单元格时显示工具提示的持续时间（以毫秒为单位）。这会覆盖表的 tooltip_duration属性。如果设置为None，工具提示不会消失。

  • type（等于：‘text’ 或 ‘markdown’ 的值；可选）：指的是用于工具提示生成的工具提示语法类型。可以是markdown或text。默认为text.

  • use_with（等于：‘both’、‘data’ 或 ‘header’ 的值；可选）：指工具提示是否仅显示在数据或标题上。可以both, data, header。默认为both.

  • value( string ; required)：指的是工具提示的基于语法的内容。该值是必需的。或者，该属性的值也可以是纯字符串。该text语法会在这种情况下使用。

• tooltip_conditional（字典列表；可选）： tooltip_conditional表示为不同的列和单元格显示的工具提示。此属性允许您根据特定条件指定不同的工具提示。例如，基于特定数据属性的值，您可能在同一列中具有不同的工具提示。优先级是列表中从第一个到最后一个定义的条件工具提示。更高优先级（更具体）的条件工具提示应该放在列表的开头。

  • tooltip_conditional 是带有键的字典列表：

  • delay（数字；可选）：delay表示悬停单元格时显示工具提示之前的延迟（以毫秒为单位）。这会覆盖表的 tooltip_delay属性。如果设置为None，将立即显示工具提示。

  • duration（数字；可选）：duration表示悬停单元格时显示工具提示的持续时间（以毫秒为单位）。这会覆盖表的tooltip_duration属性。如果设置为None，工具提示不会消失。

  • if( dict ; required):if指的是为了使用相关的工具提示配置需要满足的条件。如果定义了多个条件，则必须满足所有条件才能使单元格使用工具提示。

  • if 是一个带键的字典：

    • column_id（字符串；可选）： column_id指必须匹配的列 ID。

    • filter_query（字符串；可选）： filter_query指的是必须评估为 True 的查询。

• row_index( number | a value equal to: ‘odd’ or ‘even’ ; optional): row_index指源中行的索引 data。

• type（等于：‘text’ 或 ‘markdown’ 的值；可选）：type指的是用于工具提示生成的工具提示语法的类型。可以是markdown或text。默认为text.

• value( string ; required):value指的是工具提示的基于语法的内容。该值是必需的。

• tooltip_data（字典列表；可选）： tooltip_data表示为不同的列和单元格显示的工具提示。一个字典列表，每个键是一个列 id，值是一个工具提示配置。

  • tooltip_data是一个以字符串作为键和值的字符串列表 | 带键的字典：

  • delay（数字；可选）：delay表示悬停单元格时显示工具提示之前的延迟（以毫秒为单位）。这会覆盖表的 tooltip_delay属性。如果设置为None，将立即显示工具提示。

  • duration（数字；可选）：duration表示悬停单元格时显示工具提示的持续时间（以毫秒为单位）。这会覆盖表的tooltip_duration属性。如果设置为None，工具提示不会消失。或者，该属性的值也可以是纯字符串。该text语法会在这种情况下使用。

  • type（一个值等于： ‘text’ 或 ‘markdown’；可选）：对于每个工具提示配置，type指的是用于工具提示生成的工具提示语法类型。可以是 markdown或text。默认为text.

  • value( string ; required):value指的是工具提示的基于语法的内容。该值是必需的。

• tooltip_delay( number ; default 350): tooltip_delay表示悬停单元格时显示工具提示之前的表格范围延迟（以毫秒为单位）。如果设置为None，将立即显示工具提示。默认为 350。

• tooltip_duration( number ; default 2000): tooltip_duration表示当悬停单元格时工具提示将显示的以毫秒为单位的表格范围的持续时间。如果设置为None，工具提示不会消失。默认为 2000。

• tooltip_header（dict ; 可选）： tooltip_header表示为每个标题列和可选的每个标题行显示的工具提示。在工具提示中显示长列名称的示例：{i: i for i in df.columns}。在工具提示中显示不同列名称的示例：{‘Rep’: ‘Republican’, ‘Dem’: ‘Democrat’}。如果表有多行标题，则使用列表作为tooltip_header项目的值。

  • tooltip_header是一个以字符串作为键和值的字符串类型的字典 | 带键的字典：

  • delay（数字；可选）：delay表示悬停单元格时显示工具提示之前的延迟（以毫秒为单位）。这会覆盖表的 tooltip_delay属性。如果设置为None，将立即显示工具提示。

  • duration（数字；可选）：duration表示悬停单元格时显示工具提示的持续时间（以毫秒为单位）。这会覆盖表的tooltip_duration属性。如果设置为None，工具提示不会消失。或者，该属性的值也可以是纯字符串。该text语法会在这种情况下使用。

  • type（一个值等于： ‘text’ 或 ‘markdown’；可选）：对于每个工具提示配置，type指的是用于工具提示生成的工具提示语法类型。可以是 markdown或text。默认为text.

  • value( string ; required):value指的是工具提示的基于语法的内容。该值是必需的。| 值列表等于：null | 字符串 | 带键的字典：

  • delay（数字；可选）

  • duration（数字；可选）

  • type（等于：‘text’ 或 ‘markdown’ 的值；可选）

  • value（字符串；必填）

• virtualization( boolean ; default False)：这个属性告诉表在渲染时使用虚拟化。假设是：列的宽度是固定的；行的高度始终相同；和运行时样式更改不会影响宽度和高度与第一次渲染。

二、数据表行数

2.1 使用分页设置表格行数 page_size

在这个例子中，分页是在浏览器中本地完成的：所有数据都被预先发送到浏览器，当你点击按钮时，Dash 会呈现新页面。您还可以在后端进行分页，以便一次只向浏览器发送 10 行（降低网络成本和内存）。如果您有超过 10,000-50,000 行，这是一个很好的策略。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

app = dash.Dash(__name__)

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)
print(data)

df = pd.DataFrame(
    OrderedDict([(name, col_data * 10) for (name, col_data) in data.items()])
)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    # 设置每页显示的表格行数
    page_size=3
)

if __name__ == '__main__':
    app.run_server(debug=True)

2.2 使用垂直滚动设置表格行数 page_action / style_table

如果表格包含的行数少于 1000，一种选择是删除分页、限制高度并显示垂直滚动条。
如果超过 1000 行，那么在尝试渲染表格时浏览器会变慢。建议切换到浏览器或服务器分页或虚拟化。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

app = dash.Dash(__name__)

# 6行5列数据
data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

# 60行5列数据
df = pd.DataFrame(
    OrderedDict([(name, col_data * 10) for (name, col_data) in data.items()])
)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    # page_action指的是表的一种模式，（可选值：'custom', 'native' or 'none' ; default 'native'）
    # 'native'：所有数据都预先传递给表，分页逻辑由表处理
    # 'custom': 数据一次一页地传递给表格，分页逻辑通过回调处理
    # 'none': 禁用分页，一次渲染所有数据。
    page_action='none',
    # 要应用于外部table容器的CSS 样式。这通常用于设置表格的宽度或高度等属性。
    style_table={'height': '300px', 'overflowY': 'auto'}
)

if __name__ == '__main__':
    app.run_server(debug=True)

2.3 带分页的垂直滚动

如果你有超过〜1000行，那么你可以保持分页在表的底部，限制高度，并显示一个垂直滚动条。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

app = dash.Dash(__name__)
# 6行5列数据
data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)
# 600行5列数据
df = pd.DataFrame(
    OrderedDict([(name, col_data * 100) for (name, col_data) in data.items()])
)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    # 每页显示20行
    page_size=30,
    # 限制表格高度，当表格高度不足以显示上面设定的行数时， 自动出现垂直滚动条
    style_table={'height': '300px', 'overflowY': 'auto'}
)

if __name__ == '__main__':
    app.run_server(debug=True)

2.4 带有固定标题的垂直滚动

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

app = dash.Dash(__name__)

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(
    OrderedDict([(name, col_data * 10) for (name, col_data) in data.items()])
)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    # 固定标题行
    fixed_rows={'headers': True},
    # 每页行数
    page_size= 30,
    # 表格高度
    style_table={'height': 400}
)

if __name__ == '__main__':
    app.run_server(debug=True)

2.5 标题行过宽的限制

如果标题比单元格宽，并且表格的容器宽度不足以显示所有标题，则列标题将在大多数浏览器上被截断或在 Firefox 上溢出。

三、数据表宽度

3.1 默认宽度

默认情况下，表格将扩展到其容器的宽度。列的宽度是自动确定的，以适应单元格中的内容。默认样式适用于少量列和短文本。
但是，如果您要渲染大量内容较长的列或单元格，则需要采用以下溢出策略之一来将表保留在其容器中。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)
df = pd.DataFrame(data)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns]
)

if __name__ == '__main__':
    app.run_server(debug=True)

3.2 自动换行

如果您的单元格包含带有空格的文本，那么您可以将内容溢出到多行中。
style_cell更新数据单元格和标题单元格的样式。
要指定标题样式，请使用style_header. 要指定数据单元格样式，请使用style_data.
此示例在包装数据单元格时将标题保留在一行上。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data_election = OrderedDict(
    [
        (
            "Date",
            [
                "July 12th, 2013 - July 25th, 2013",
                "July 12th, 2013 - August 25th, 2013",
                "July 12th, 2014 - August 25th, 2014",
            ],
        ),
        (
            "Election Polling Organization",
            ["The New York Times", "Pew Research", "The Washington Post"],
        ),
        ("Rep", [1, -20, 3.512]),
        ("Dem", [10, 20, 30]),
        ("Ind", [2, 10924, 3912]),
        (
            "Region",
            [
                "Northern New York State to the Southern Appalachian Mountains",
                "Canada",
                "Southern Vermont",
            ],
        ),
    ]
)

df = pd.DataFrame(data_election)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    # 要应用于每个单独数据单元格的 CSS 样式 ,不同 style_cell，它不包括标题和过滤器单元格。
    style_data={
        'whiteSpace': 'normal', # 空格符
        'height': 'auto',
    },
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns]
)

if __name__ == '__main__':
    app.run_server(debug=True)

3.3 限制行高的更密集的多行单元格 lineHeight

如果您有超过 1000 行，那么在尝试渲染表格时浏览器会变慢。超过 1000 行，我们建议切换到浏览器或服务器分页（如上）或虚拟化（如下）。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data_election = OrderedDict(
    [
        (
            "Date",
            [
                "July 12th, 2013 - July 25th, 2013",
                "July 12th, 2013 - August 25th, 2013",
                "July 12th, 2014 - August 25th, 2014",
            ],
        ),
        (
            "Election Polling Organization",
            ["The New York Times", "Pew Research", "The Washington Post"],
        ),
        ("Rep", [1, -20, 3.512]),
        ("Dem", [10, 20, 30]),
        ("Ind", [2, 10924, 3912]),
        (
            "Region",
            [
                "Northern New York State to the Southern Appalachian Mountains",
                "Canada",
                "Southern Vermont",
            ],
        ),
    ]
)

df = pd.DataFrame(data_election)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    style_data={
        'whiteSpace': 'normal', # 空格
        'height': 'auto',
        'lineHeight': '5px'    # 行高
    },
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns]
)

if __name__ == '__main__':
    app.run_server(debug=True)

3.4 鼠标悬停显示全部内容

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

moby_dick_text = [
    'Call me Ishmael. ',
    ''.join([
        'Some years ago- never mind how long precisely- having little or no money ',
        'in my purse, and nothing particular to interest me on shore, ',
        'I thought I would sail about a little and see the watery part of the world. ',
    ]),
    'It is a way I have of driving off the spleen and regulating the circulation.'
]

moby_dick = OrderedDict(
    [
        (
            'Sentence Number', [i+1 for i in range(len(moby_dick_text))],
        ),
        (
            'Text', [i for i in moby_dick_text]
        )
    ]
)
df = pd.DataFrame(moby_dick)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    style_data={
        'whiteSpace': 'normal',
    },
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    css=[{
        'selector': '.dash-spreadsheet td div',
        'rule': '''
            line-height: 15px;
            max-height: 30px; min-height: 30px; height: 30px;
            display: block;
            overflow-y: hidden;
        '''
    }],
    # 鼠标悬停显示全部内容
    tooltip_data=[
        {
            column: {'value': str(value), 'type': 'markdown'}
            for column, value in row.items()
        } for row in df.to_dict('records')
    ],
    tooltip_duration=None,
    # 单元格内文本左对齐
    style_cell={'textAlign': 'left'}
)

if __name__ == '__main__':
    app.run_server(debug=True)

3.5 溢出省略和鼠标悬停显示全部内容

如果您要显示被省略号截断的文本数据，那么您可以包含工具提示，以便在悬停时显示全文。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data_election = OrderedDict(
    [
        (
            "Date",
            [
                "July 12th, 2013 - July 25th, 2013",
                "July 12th, 2013 - August 25th, 2013",
                "July 12th, 2014 - August 25th, 2014",
            ],
        ),
        (
            "Election Polling Organization",
            ["The New York Times", "Pew Research", "The Washington Post"],
        ),
        ("Rep", [1, -20, 3.512]),
        ("Dem", [10, 20, 30]),
        ("Ind", [2, 10924, 3912]),
        (
            "Region",
            [
                "Northern New York State to the Southern Appalachian Mountains",
                "Canada",
                "Southern Vermont",
            ],
        ),
    ]
)

df = pd.DataFrame(data_election)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_cell={
        'overflow': 'hidden',
        'textOverflow': 'ellipsis',     # 溢出省略号
        'maxWidth': 0,
    },
    # 鼠标悬停显示全部内容
    tooltip_data=[
        {
            column: {'value': str(value), 'type': 'markdown'}
            for column, value in row.items()
        } for row in df.to_dict('records')
    ],
    tooltip_duration=None
)

if __name__ == '__main__':
    app.run_server(debug=True)

3.6 表格水平滚动条

您可以将整个容器溢出到可滚动容器中，而不是尝试将所有内容放入容器中。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data_election = OrderedDict(
    [
        (
            "Date",
            [
                "July 12th, 2013 - July 25th, 2013",
                "July 12th, 2013 - August 25th, 2013",
                "July 12th, 2014 - August 25th, 2014",
            ],
        ),
        (
            "Election Polling Organization",
            ["The New York Times", "Pew Research", "The Washington Post"],
        ),
        ("Rep", [1, -20, 3.512]),
        ("Dem", [10, 20, 30]),
        ("Ind", [2, 10924, 3912]),
        (
            "Region",
            [
                "Northern New York State to the Southern Appalachian Mountains",
                "Canada",
                "Southern Vermont",
            ],
        ),
    ]
)

df = pd.DataFrame(data_election)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    # 表格水平滚动条
    style_table={'overflowX': 'auto'},
)

if __name__ == '__main__':
    app.run_server(debug=True)

3.7 单元格具有固定宽度和表格水平滚动条

可以通过添加width. 在这种情况下，列的宽度将保持不变，即使其内容更短或更宽。minWidth,width,maxWidth 需要同时设置

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data_election = OrderedDict(
    [
        (
            "Date",
            [
                "July 12th, 2013 - July 25th, 2013",
                "July 12th, 2013 - August 25th, 2013",
                "July 12th, 2014 - August 25th, 2014",
            ],
        ),
        (
            "Election Polling Organization",
            ["The New York Times", "Pew Research", "The Washington Post"],
        ),
        ("Rep", [1, -20, 3.512]),
        ("Dem", [10, 20, 30]),
        ("Ind", [2, 10924, 3912]),
        (
            "Region",
            [
                "Northern New York State to the Southern Appalachian Mountains",
                "Canada",
                "Southern Vermont",
            ],
        ),
    ]
)

df = pd.DataFrame(data_election)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_table={'overflowX': 'auto'},
    style_cell={
        'height': 'auto',
        # minWidth,width,maxWidth 需要同时设置
        'minWidth': '180px',
        'width': '180px',
        'maxWidth': '180px',
        # 空格符自动换行
        'whiteSpace': 'normal'
    }
)

if __name__ == '__main__':
    app.run_server(debug=True)

3.8 单元格具有固定宽度，溢出省略号和表格水平滚动条

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data_election = OrderedDict(
    [
        (
            "Date",
            [
                "July 12th, 2013 - July 25th, 2013",
                "July 12th, 2013 - August 25th, 2013",
                "July 12th, 2014 - August 25th, 2014",
            ],
        ),
        (
            "Election Polling Organization",
            ["The New York Times", "Pew Research", "The Washington Post"],
        ),
        ("Rep", [1, -20, 3.512]),
        ("Dem", [10, 20, 30]),
        ("Ind", [2, 10924, 3912]),
        (
            "Region",
            [
                "Northern New York State to the Southern Appalachian Mountains",
                "Canada",
                "Southern Vermont",
            ],
        ),
    ]
)

df = pd.DataFrame(data_election)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_table={'overflowX': 'auto'},
    style_cell={
        # 三个宽度同时设置
        'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
        'overflow': 'hidden',
        'textOverflow': 'ellipsis',
    }
)

if __name__ == '__main__':
    app.run_server(debug=True)

3.9 通过固定首列进行水平滚动

您还可以通过使用 固定最左边的列来向表格添加水平滚动条fixed_columns。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data_election = OrderedDict(
    [
        (
            "Date",
            [
                "July 12th, 2013 - July 25th, 2013",
                "July 12th, 2013 - August 25th, 2013",
                "July 12th, 2014 - August 25th, 2014",
            ],
        ),
        (
            "Election Polling Organization",
            ["The New York Times", "Pew Research", "The Washington Post"],
        ),
        ("Rep", [1, -20, 3.512]),
        ("Dem", [10, 20, 30]),
        ("Ind", [2, 10924, 3912]),
        (
            "Region",
            [
                "Northern New York State to the Southern Appalachian Mountains",
                "Canada",
                "Southern Vermont",
            ],
        ),
    ]
)

df = pd.DataFrame(data_election)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    # 固定首列（左侧第一列）
    fixed_columns={'headers': True, 'data': 1},
    style_table={'minWidth': '100%'}
)

if __name__ == '__main__':
    app.run_server(debug=True)

四、设置列宽

4.1 基于百分比的宽度

可以通过style_cell_conditional属性提供各个列的宽度 。这些宽度可以指定为百分比或固定像素。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(data)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_cell_conditional=[
        # Date列，宽度为20%
        {'if': {'column_id': 'Date'}, 'width': '20%'},
        # Region，宽度为40%
        {'if': {'column_id': 'Region'}, 'width': '40%'},
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)

4.2 列宽自动扩展

默认情况下，列宽是给定百分比和内容宽度的最大值。因此，如果列中的内容很宽，则该列可能比给定的百分比更宽。这可以防止溢出。
在下面的例子中，注意第一列实际上比 10% 宽；如果它更短，文本“纽约市”就会溢出。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict
import dash_html_components as html

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(data)

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div('10%', style={'backgroundColor': 'hotpink', 'color': 'white', 'width': '10%'}),
    dash_table.DataTable(
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns if c != 'Date'],
        style_cell_conditional=[
            {'if': {'column_id': 'Region'}, 'width': '10%'}
        ]
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

4.3 基于百分比的宽度和 table-layout: fixed

如果您希望所有列都具有相同的基于百分比的宽度，请使用style_data和table-layout: fixed。
如果您使用virtualization、排序 ( sort_action) 或filtering( filter_action) ，则设置一致的基于百分比的宽度是一个不错的选择 。
如果没有固定的列宽，表格将根据显示的数据的宽度动态调整列的大小。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(data)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],

    css=[{'selector': 'table', 'rule': 'table-layout: fixed'}],
    style_cell={
        'width': f'{len(df.columns)}%',
        'textOverflow': 'ellipsis',
        'overflow': 'hidden'
    }
)

if __name__ == '__main__':
    app.run_server(debug=True)

4.4 带有像素的单个列宽

在此示例中，我们将三列设置为具有固定宽度。剩下的两列将占用剩余空间。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(data)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_cell_conditional=[
        # 设置三列固定宽度
        {'if': {'column_id': 'Temperature'}, 'width': '130px'},
        {'if': {'column_id': 'Humidity'}, 'width': '130px'},
        {'if': {'column_id': 'Pressure'}, 'width': '130px'},
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)

4.5 覆盖单列的宽度

您可以使用 设置所有列的宽度style_data并使用 覆盖单个列style_cell_conditional。

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(data)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    # 设置所有列宽为100px
    style_data={
        'width': '100px',
        'maxWidth': '100px',
        'minWidth': '100px',
    },
    style_cell_conditional=[
        {
            # 设置Region列宽为250px
            'if': {'column_id': 'Region'}, 'width': '250px'
        },
    ],
    style_table={
        'overflowX': 'auto'
    }
)

if __name__ == '__main__':
    app.run_server(debug=True)