✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Fixed columns in dash data table breaks layout spread

I’m trying to set the two first columns of my table

I want the two first columns of my table to be fixed
but when I set the fixed_columns component the entire layout gets very small
I am using dash 1.13 (but also tried 1.12)
A small as possible code to reproduce my problem:

import dash
import dash_table
import random

def define_table():
    headers = ['Fixed1', 'Fixed2', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
    columns = [{'name': h, 'id': h} for h in headers]
    data = []
    for i in range(0, 20):
        row = {}
        for h in headers:
            row[h] = random.random()
        data = data + [row]
    return dash_table.DataTable(
        id='table-results',
        data=data,
        columns=columns,
        fixed_columns={'headers': True, 'data': 2},  # TODO
        style_cell={'textAlign': 'left'},
        row_deletable=True,
        export_columns='visible',
        export_format='csv')


app = dash.Dash(__name__)
app.layout = define_table()

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

A picture of how it looks at my browser:

can anyone help?

Hi @itamargo

Try adding:

style_table={'minWidth': '100%'},

And thanks for providing the nice example! it only took a minute to confirm the problem and to try out my idea of how to fix it :slight_smile:

2 Likes

That solve it for me, thank you!

1 Like