Skip to content

[BUG] dash_table.DataTable styling issues for header height and column width when using fixed_columns #3337

Open
@anjaweigel-tng

Description

@anjaweigel-tng

Context

  • dash: 3.0.4
  • OS: Windows
  • Browser: Firefox 139.0.4

Bug description

I have data where the column name is longer than the data itself. When putting the column as fixed_column in a DataTable, the width of the displayed column seems to be calculated disregarding the length of the column name.

Image

from dash import Dash, dash_table
import pandas as pd

df = pd.DataFrame(
    {
        "longer header": ["aaaaaa", "bbbbbb", "cccccc"],
        **{f"column {i}": ["12345", "12345", "12345"] for i in range(1, 10)},
    }
)

app = Dash()
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(debug=True)

If I remove the fixed_columns attribute, it works fine:

Image

Additionally, if I add line breaks to the fixed column header, the height of the header is mismatched between the fixed and the non-fixed columns.

Image

from dash import Dash, dash_table
import pandas as pd


df = pd.DataFrame(
    {
        "longer\nheader": ["aaaaaa", "bbbbbb", "cccccc"],
        **{f"column {i}": ["12345", "12345", "12345"] for i in range(1, 10)},
    }
)

app = Dash()
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%"},
    style_cell={"whiteSpace": "pre-line"},
)

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

Again this is does not occur if the fixed_columns attribute is removed:

Image

Expected behavior

The width of a fixed column in a DataTable is calculated taking into account the column name as well as the data. The height of the header row of the DataTable is calculated taking into account fixed and non-fixed columns.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3backlogbugsomething broken

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions