Dash DataTable 标题滚动问题

Posted 2023-03-22

【中文标题】Dash DataTable 标题滚动问题

【英文标题】：Dash DataTable Header Scrolling Issues

【发布时间】：2021-05-22 16:13:27

【问题描述】：

在 Dash 中，我在多个项目中反复出现问题。每当我尝试将固定标题与滚动结合使用时，都会出现如下所示的错误行为。标题不会保持固定在正确的位置。

这个问题至少出现在 chrome 和 safari 中，所以我认为这不是浏览器问题。这是我的表格代码，感谢任何帮助或指导！

html.Div(
                            id="table-zone",
                            children=[
                                build_graph_title("Summary Data"),
                                html.Div(
                                    id="summary-datatable-container",
                                    className="pretty_container",
                                    children=[
                                        dt.DataTable(
                                            id="summary-datatable",
                                            columns=[
                                                
                                                    "hideable": True,
                                                    "name": i,
                                                    "id": i,
                                                
                                                for i in summary_df.columns
                                                # omit the id column
                                                if i != "id"
                                            ],
                                            css=[
                                                
                                                    "selector": ".previous-page, "
                                                    ".next-page, .first-page, "
                                                    ".last-page, .export, .show-hide",
                                                    "rule": "color: white;",
                                                ,
                                                
                                                    "selector": ".current-page",
                                                    "rule": "padding-right: 5px;",
                                                ,
                                            ],
                                            fixed_rows=
                                                "headers": True,
                                            ,
                                            style_cell=
                                                "whiteSpace": "normal",
                                                "height": "auto",
                                                "minWidth": "110px",
                                                "width": "110px",
                                                "maxWidth": "110px",
                                                "textAlign": "center",
                                            ,
                                            style_data_conditional=[
                                                
                                                    "if": "row_index": "odd",
                                                    "backgroundColor": "rgb(242, 239, 233)",
                                                ,
                                            ],
                                            style_header=
                                                "backgroundColor": "rgb(25, 36, 68)",
                                                "fontWeight": "bold",
                                                "color": "white",
                                                # "textAlign": "center",
                                            ,
                                            style_table=
                                                # "height": 320,
                                                "overflowX": "auto",
                                                "overflowY": "auto",
                                            ,
                                            data=summary_df.to_dict("records"),
                                            row_selectable="single",
                                            sort_action="native",
                                            filter_action="native",
                                            export_format="csv",
                                            cell_selectable=False,
                                            style_as_list_view=True,
                                            page_size=20,
                                        ),

【参考方案1】：

这似乎是一个错误。将 dash 从 1.13.3 升级到 1.19 并将 dash-table 从 4.8.1 升级到 4.11.2 解决了这个问题。