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
@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:
-
an external CSS in your assets folder
-
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)

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