Datatable Paging Buttons - Change Appearance?

Dash Python
1

I have a Dash Datatable which uses pagination. The paging buttons “Previous” / “Next” work fine, but is there a way to update them visually?

For example, I am using the dash_bootstrap_components package for visual appeal, but I am not sure how to apply that formatting to the built-in paging buttons.

1 Like
2

@XFaCToZ2 There’s no prop to customize the look of the paging buttons directly in the table. The UI rework issue contains an entry to improve paging / styling in general. Will cross-reference.

Nonetheless two options are still open to you. You can style the paging buttons through:

  1. an external CSS in your assets folder

  2. the table’s css prop like so

# -*- coding: utf-8 -*-
import dash
from 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)
rawDf = rawDf[0:1000]
df = rawDf.to_dict("rows")

app = dash.Dash()
app.scripts.config.serve_locally = True

app.layout = DataTable(
    id='datatable-weapons',
    columns=[{"name": [i, i, i], "id": i } for i in rawDf.columns],
    css=[
        { 'selector': '.previous-page, .next-page', 'rule': 'background-color: red;' }
    ],
    data=df
)

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

image

4 Likes
3

Thank you. I was hoping to utilize the dash bootstrap package, but I will give this a try. Much appreciated.