Question
I have a data grid with a total of 50 rows and pagination enabled. The horizontal scrollbar currently appears only at the bottom of the table, which requires scrolling all the way down to access it. I want to make the horizontal scrollbar visible at the top of the viewport so users can scroll horizontally without having to reach the end of the table.

I tried using ref to adjust the scrollbar position, but it didn’t work as expected. Ideally, I want to use the default browser scrollbar without creating an extra floating scrollbar to manage the horizontal scroll manually.

How can I achieve this in a clean and efficient way in React? Are there best practices or libraries that can help make the table’s horizontal scrollbar always accessible at the top?

Screenshots