Dash DataTable固定表头滚动时出现Maximum call stack size exceeded错误求助

问题描述 #

开启Dash DataTable固定表头（fixed_rows={'headers': True}）并配置表格滚动后，出现JavaScript栈溢出错误，报错显示handleResize函数被递归调用，且无法稳定复现该问题。

报错详情 #

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
RangeError: Maximum call stack size exceeded
    at [Symbol.replace] (<anonymous>)
    at String.replace (<anonymous>)
    at lx.trim (http://X/_dash-component-suites/dash/deps/polyfill@7.v2_6_1m1659465116.12.1.min.js:1:34198)
    at parseInt (http://X/_dash-component-suites/dash/deps/polyfill@7.v2_6_1m1659465116.12.1.min.js:1:28885)
    at u.handleResize (http://X/_dash-component-suites/dash/dash_table/async-table.js:2:312632)
    at u.handleResize (http://X/_dash-component-suites/dash/dash_table/async-table.js:2:312697)
    ... 重复调用handleResize ...

解决方案 #

1. 移除表格样式中的布局冲突属性 #

你的table_style里的display: inline-block、left: 50%、transform: translateX(-50%)会干扰固定表头的位置计算逻辑，导致resize递归。建议把居中逻辑移到父容器，表格仅保留滚动和基础样式：

修改后的表格样式：

table_style = {
    'overflowX': 'auto',
    'position': 'relative',
    'min-width': '1000px',
    'height': 400,
    'overflowY': 'scroll'
}

用父容器实现居中：

html.Div(table, style={'display': 'flex', 'justify-content': 'center', 'margin-right': '10px', 'margin-left': '20px'})

2. 升级Dash到最新稳定版 #

你当前使用的Dash 2.6.1存在DataTable固定表头相关的已知bug，升级到>=2.10.0的版本可修复这类递归调用问题。执行升级命令：

pip install --upgrade dash

3. 替换列宽的width: auto为minWidth #

width: auto会导致表头和内容列宽计算不一致，触发持续resize事件。给表头和单元格设置固定最小宽度：

修改后的样式：

header_style = {
    'backgroundColor': 'grey',
    'color': 'black',
    'fontWeight': 'bold',
    'textAlign': 'center',
    'font-family': 'Arial, sans-serif',
    'font-size': '14px',
    'height': '35px',
    'minWidth': '100px'  # 替换width: auto
}

cell_style = {
    'whiteSpace': 'normal',
    'overflow': 'hidden',
    'textOverflow': 'ellipsis',
    'textAlign': 'right',
    'cursor': 'pointer',
    'padding': '6px',
    'font-family': 'Arial, sans-serif',
    'font-size': '14px',
    'text-decoration': 'none !important',
    'minWidth': '100px'  # 替换width: auto
}

4. 调整后的完整代码示例 #

import dash
from dash import dash_table, html
import pandas as pd

# 替换为你的数据
df = pd.DataFrame({
    'col1': range(100),
    'col2': range(100),
    'col3': range(100),
    'col4': range(100),
    'col5': range(100)
})

table_style = {
    'overflowX': 'auto',
    'position': 'relative',
    'min-width': '1000px',
    'height': 400,
    'overflowY': 'scroll'
}
header_style = {
    'backgroundColor': 'grey',
    'color': 'black',
    'fontWeight': 'bold',
    'textAlign': 'center',
    'font-family': 'Arial, sans-serif',
    'font-size': '14px',
    'height': '35px',
    'minWidth': '100px'
}
cell_style = {
    'whiteSpace': 'normal',
    'overflow': 'hidden',
    'textOverflow': 'ellipsis',
    'textAlign': 'right',
    'cursor': 'pointer',
    'padding': '6px',
    'font-family': 'Arial, sans-serif',
    'font-size': '14px',
    'text-decoration': 'none !important',
    'minWidth': '100px'
}

table = dash_table.DataTable(
    columns=[
        {"name": col, "id": col, "selectable": True} for col in df.columns
    ],
    data=df.to_dict('records'),
    id='datatable-interact',
    fixed_rows={'headers': True},
    style_table=table_style,
    style_header=header_style,
    style_cell=cell_style,
)

app = dash.Dash(__name__)
app.layout = html.Div(table, style={'display': 'flex', 'justify-content': 'center', 'margin-right': '10px', 'margin-left': '20px'})

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

问题原因 #

该错误源于固定表头的布局逻辑与自定义表格样式冲突，导致handleResize函数被反复调用形成递归：

• 表格自身的定位/变换样式干扰了表头位置计算
• 列宽自动计算导致表头与内容列宽不匹配，触发持续resize
• 旧版本Dash的DataTable存在已知的递归调用bug

内容的提问来源于stack exchange，提问作者Alesya