"table-layout: fixed" does not work with fixed_rows // ability to force fixed column width with fixed_rows

[chriddyp]

table-layout: fixed, applied with

css=[{'rule': 'table-layout: fixed', 'selector': 'table'}]

is a way to force columns to have a certain width even if their content will overflow.

This rule does not apply to fixed rows and therefore this no way to force tables with fixed rows to have a certain width.

Here is what this looks like without fixed rows:

With Fixed Rows:

Reproducible example:

import dash
import dash_table
import dash_html_components as html
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame({
    'Column 1': 10 * ['Alpha Alpha Alpha Alpha', 'Beta Beta', 'Bananna Bananna', 'Cucumber Cucumber', 'Dynosaur Dynosaur'],
    'Column 2': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 3': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 4': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 5': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 6': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
})

WIDTH = '10%'
app.layout = html.Div([
    html.Div(
        children='20% Width',
        style={
            'color': 'white',
            'width': WIDTH,
            'height': 20,
            'backgroundColor': 'hotpink'
        }
    ),
    dash_table.DataTable(
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],

        fixed_rows={'headers': True},
        css=[{'selector': 'table', 'rule': 'table-layout: fixed'}],
        style_cell={
            'textOverflow': 'ellipsis',
            'overflow': 'hidden'
        },
        style_cell_conditional=[{
            'if': {'column_id': 'Column 1'},
            'width': WIDTH,
        }]
    )
])

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

[RRighart]

Hi, I would like to unsubscribe from the Plotly Dash email notifications while I would be glad to continue using the forum. Pushing the unsubscribe link did not work unfortunately. Thank you very much in advance for your help, Ruthger Righart

[chriddyp]

@RRighart - Email notifications are managed through GitHub. you can try "unwatching" this repository or learn more here: https://help.github.com/en/github/receiving-notifications-about-activity-on-github/about-email-notifications

[Marc-Andre-Rivet]

Note: Remove limitation from https://dash.plotly.com/datatable/height (https://github.com/plotly/dash-docs/pull/847/files) once fixed