Give a better design to the horizontal scroll bar of the table block

Custom Coding
,
1

Hi all,

When you have a lot of information to display in a table block, a horizontal bar appears.

DEMO HERE: https://test-play.softr.app/table-bar

You can change the design with the following code, to be inserted in the header code of the page settings. Change #table2 by the id of your table block. You can play with the height and the background color of the horizontal bar.
The following code is for Chrome, Safari and apparently Edge and other browsers.

<style>

#table2 .ag-body-horizontal-scroll-viewport {
  scrollbar-width: thin;
  scrollbar-color: #888 #f5f5f5;
}

#table2 .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
  width: 10px;
  height: 8px;
  background-color: #f5f5f5;
  border-radius: 3px;
}

#table2 .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 3px;
}

#table2 .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
#table2 .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:active {
  background-color: #FFA500;
}

#table2 .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-corner {
  background-color: #f5f5f5;
}

</style>
5 Likes
2

This looks nice. Thanks for sharing! Have you been able to find a way to keep the top row (column header row) ‘sticky’ as you scroll down on a longer table?

1 Like
3

Nope, not easy to do this one as it depends on a lot of factors (even if it doesn’t seem):man_shrugging:

1 Like
4

Note: to change the vertical scrollbar all along your app it’s here: Change the look of your Softr app/website vertical scrollbar

Careful! this code can enter in conflict with the table horizontal scoll bar custom code (the scroll bar of the table block will be doubled). I will update it in order to make the two codes work

1 Like
5

This looks amazing, thanks @matthieu_chateau :slightly_smiling_face:

6

This is amazing. How can I apply it globally to all tables in my app?