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:

4 Likes

That solve it for me, thank you!

1 Like