# Dash Datatable Pagination Styling

**URL:** <https://community.plotly.com/t/dash-datatable-pagination-styling/74853>\
**Category:** Dash Python\
**Created:** [April 30, 2023, 7:05am UTC](https://community.plotly.com/t/dash-datatable-pagination-styling/74853 "2023-04-30T07:05:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lucifer](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@Lucifer](https://community.plotly.com/u/Lucifer)\
**Post date:** [April 30, 2023, 7:05am UTC](https://community.plotly.com/t/dash-datatable-pagination-styling/74853/1 "2023-04-30T07:05:07Z")

</div>

Hello Everyone,  
I was reading the dash datatable documentation and I want to style the dash datatable pagination arrows in the same way as they are given in the dash documentation in the official website. Is there any way to do so. Please let me know how to do it . It will make the dash datatable look better on the website.  
I have attached the screenshot below.

 ![datatable](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/a/a/aa8e25097fe2f2d3af5b8a78ecb48dd24e390fcd.png)

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [April 30, 2023, 8:31am UTC](https://community.plotly.com/t/dash-datatable-pagination-styling/74853/2 "2023-04-30T08:31:43Z")

</div>

Do you have a link to this example? There might be a reference to a css sheet where you could grab the information. In lots of examples this one is used:

```auto
https://codepen.io/chriddyp/pen/bWLwgP.css

```

---

<div class="post-metadata">

**Author:** ![Lucifer](https://avatars.discourse-cdn.com/v4/letter/l/ad7895/32.png) [@Lucifer](https://community.plotly.com/u/Lucifer)\
**Post date:** [April 30, 2023, 9:01am UTC](https://community.plotly.com/t/dash-datatable-pagination-styling/74853/3 "2023-04-30T09:01:11Z")

</div>

This Example also has some datatables which has the same pagination styling as above :

> **[Sorting, Filtering, Selecting, and Paging Natively | Dash for Python...](https://dash.plotly.com/datatable/interactivity)**
>
> \`dash\_table.DataTable\` is an interactive table that supports rich styling, conditional formatting, editing, sorting, filtering, and more.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [April 30, 2023, 1:42pm UTC](https://community.plotly.com/t/dash-datatable-pagination-styling/74853/4 "2023-04-30T13:42:11Z")

</div>

@Lucifer

The DataTable in the Dash docs is styled using CSS from a Dash Enterprise product called Dash Design Kit.

If you are using Dash Bootstrap Components, see information about styling the DataTable with a Bootstrap theme (including the pagination button) here:

> **[Adding Themes/DataTable](https://hellodash.pythonanywhere.com/adding-themes/datatable)**
>
> A guide for styling Plotly Dash apps with a Bootstrap theme. Shows how to include Bootstrap-themed Plotly figure templates,
> apply Bootstrap themes and utility classes to Plotly Dash components and switch themes with a theme change component.

If you are not using Dash Bootstrap Components, you can check out the [stylesheet](https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.css) from above to see the CSS selectors for the pagination - and other things, then modify it for your project.

If you are open to something completely different, I recommend trying Dash AG Grid. The grid is much easier to style than the Data Table.

> **[Dash AG Grid](https://dashaggrid.pythonanywhere.com/)**
>
> Dash AG Grid Documentation