4

When using react-virtualized's Table class with a table with many columns, it is necessary to scroll horizontally to the very end of the columns in order to be able to see the vertical scrollbar.

(you can see an extremely similar question about React-Table here, it is not clear to me if react-virtualized's table code uses React-Table's code at all, but in any case I am having an identical problem)

in the linked issue someone commented that:

.ReactTable .rt-tbody{
overflow: initial !important;
}

fixed their issue. I checked this solution with react-table and got the desired behavior.

However, as far as I can tell react-virtualized table doesn't have tbody class available for css. (The docs do list a bunch of available class names, but a body class name doesn't seem to be on that list).

I've messed around with the css trying to set different overflow options in different ways to no avail. I have not been able to get the vertical scrollbar to display without needing to horizontally scroll all the way to the end. What can I do to make that happen?

(Edit: I've also tried to figure out some way to make this work with react-floating-scroll but it seems like the ref passed back by virtualized table isn't the kind of ref the scroll code needs...)

dWitty
  • 494
  • 9
  • 22
  • Would love an answer to this.. have been struggling with this for a while. `overflow: initial !important` works on some of my tables, but not all – Greg A Apr 03 '22 at 22:32

1 Answers1

0

This will move the scroll bar to the left side instead of right side.

.ReactVirtualized__Table {
            .ReactVirtualized__Table__Grid {
                direction: rtl !important;

                .ReactVirtualized__Grid__innerScrollContainer {
                    direction: ltr !important;
                }
            }
        }
user20633726
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 06 '22 at 07:55