How to hide scrollbar in Plotly Dash Table

Question

I have table with a large number of rows, and I want to show everything inside my app.

By default, dash_table.DataTable adds a scrollbar when the table is too long. I would like to remove that scrollbar.

enter image description here

Asked By: Sungat Iseev

||

Source

Answer 1

Let’s say you have the following application, where the height is set to 300px and overflow is automatic:

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

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/1962_2006_walmart_store_openings.csv"
)

app = dash.Dash(__name__)

table = dash_table.DataTable(
    id="table",
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict("records"),
    style_table={"height": "300px", "overflowY": "auto"},
)

app.layout = html.Div([html.H1("Header"), table, html.Button("Click here")])

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

You will get this resulting app:

In your case, you want to hide the scroll bar. You might be tempted to change the style_table to:

style_table={"height": "300px", "overflowY": "show"}

Although the entire table will be shown, this unfortunately means the button will be hidden since the table is overflowing beyond the designated height:

So the correct change is to simply set the height of the table to be unlimited:

style_table={"height": None}

And the button will show up correctly:

Controlling the height of the table is thoroughly documented in Dash Table docs. It will show you different ways to use overflowY.

Answered By: xhluca

Answer 2

add this argument into dash_table.DataTable:

virtualization=False

and you don’t need to touch the height

Answered By: abdoo

How to hide scrollbar in Plotly Dash Table

Question:

Answers: