How to customize the DataTable's scrollbar?

Dash Python
1

Any ideas how customize DataTable’s scrollbar?

I mean, change the width size, background-color, box-shadow and so on…

thanks in advance.

1 Like
2

I did open the my browser “inspect” tab and grab the scrollbar class name.

Then, all I what to do was create a css file overriding the default style.

something like:

`.dt-table-container__row::-webkit-scrollbar {
width: 0.2em;important;
}

.dt-table-container__row::-webkit-scrollbar-corner {
background-color: slategrey;important;
}

.dt-table-container__row::-webkit-scrollbar-thumb {
background-color: slategrey;important;
outline: 0.2em solid whitegrey;important;
}

.dt-table-container__row::-webkit-scrollbar-track {
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);important;
}`

btw, DataTable has a “css” parameter but I still don’t figure out how to play with that.