Table size can't be changed after fixed_columns and fixed_rows

Dash Python
1

Tried setting width and height in style with no luck.

import json
import pandas as pd
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
df = pd.read_csv('http://samplecsvs.s3.amazonaws.com/SacramentocrimeJanuary2006.csv')

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict('records'),
        fixed_columns={ 'headers': True, 'data': 2 },
        fixed_rows={ 'headers': True, 'data': 0 },
        style_table={
            'height': '1200px',
            'width': '2000px',
        },
    )
])

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

@dqiu I’m not sure I understand the behavior you are experiencing. Could you provide an example that exhibits the problem so I can see if this is a bug in the DataTable or something I can help you with? Thanks.

3

@Marc-Andre just posted the code, please have a look. Thanks.

4

Hey @dqiu,

When dealing with horizontal and vertical scrolling with fixed columns, it seems like you need to specify the minHeight, height, and maxhHeight properties when styling the table. With the following code I was able to adjust the size of the table.

app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict('records'),
        fixed_columns={'headers': True, 'data': 2},
        fixed_rows={'headers': True, 'data': 0},
        style_table={
            'minHeight': '600px', 'height': '600px', 'maxHeight': '600px',
            'minWidth': '900px', 'width': '900px', 'maxWidth': '900px'
        },
    )
])

You can find more examples of this in the DashTable documentation here.

5

@Hammad Thanks, is it possible to set the width and height the browser size?

6

@dqiu Sure, you could set the values to ‘100vh’ and ‘100vw’ respectively and that will expand the table to fit the browser viewport. I am noticing with this specific table that some of the headers clip into the columns, so you may also want to adjust individual column widths as well.

7

Opened https://github.com/plotly/dash-table/issues/646 to follow up and simplify usage.

8

Thanks @Marc-Andre :+1::+1::+1: