plotly / plotly/dash

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

Open
#3,337 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the provided Dash and pandas reproductions, first with fixed_columns and then without it, including the multiline header case. Trace the DataTable fixed-column styling and sizing behavior; done when fixed-column width includes the header text and the fixed and non-fixed header heights match.

Written by the indexing model from the issue text.

Assessment

Tech stack
pandas, python
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.