Position of the paging menu for a table of many columns

Dash Python
1

Hi all, I have an application with a table of many columns that uses a paging menu, the problem is that when I scroll sideways that menu disappears, I want to keep it fixed on the right side of the screen, as at the beginning. Any idea or suggestion?

code sample:

import dash
from dash import html
from dash.dash_table import DataTable
import pandas as pd

url = 'https://github.com/plotly/datasets/raw/master/26k-consumer-complaints.csv'

rawDf = pd.read_csv(url).iloc[0:100,1:]

dup_cols = [x+'_dup' for x in rawDf.columns]

rawDf[dup_cols] = rawDf

app = dash.Dash()

app.layout = html.Div([
    html.H3('DataTable testing'),
    DataTable(
        id='datatable-weapons',
        columns=[{"name": i, "id": i } for i in rawDf.columns],
        data = rawDf.to_dict('records'),
        page_size=30)
])

if __name__ == "__main__":
    app.run_server(port=8045)

imagen
imagen1920×840 233 KB

imagen
imagen1920×840 197 KB

2

Hi @ro_c and welcome to the Dash community :slightly_smiling_face:

You can keep the pagination visible by controlling the width of the DataTable. One way is to add horizontal scroll. See other options here: DataTable Width & Column Width | Dash for Python Documentation | Plotly

DataTable(
        id='datatable-weapons',
        columns=[{"name": i, "id": i } for i in rawDf.columns],
        data = rawDf.to_dict('records'),
        style_table={"overflowX": "auto"},
        page_size=30)
2 Likes
3

Thanks a lot @AnnMarieW , this solves the problem

2 Likes