On this experimental branch I managed to make it work to set styling of VirtuosoGrid's list component, using React.forwardRef, but the downside of this solution is that the whole list rerenders when we e.g. select some cards, which makes this flashing event, what imo disqualifies this approach. I based on this example app code during implementation
The proposed solution is based on react's manipulation of VirtuosoGrid's list css class names. Styling is on sass side.
Note: I also added functionality to determine max amount of cards in one row based on specified card's min width and the available with of the cards grid container. Thanks to that the cards won't be too narrow. But for now, this value doesn't react to browser window resize - it updates only on Cards Layout button click. Please keep it in mind while testing.
Changes
Closes #328
On this experimental branch I managed to make it work to set styling of
VirtuosoGrid's list component, usingReact.forwardRef, but the downside of this solution is that the whole list rerenders when we e.g. select some cards, which makes this flashing event, what imo disqualifies this approach. I based on this example app code during implementationThe proposed solution is based on react's manipulation of
VirtuosoGrid's list css class names. Styling is on sass side.Note: I also added functionality to determine
max amount of cards in one rowbased on specified card's min width and the available with of the cards grid container. Thanks to that the cards won't be too narrow. But for now, this value doesn't react to browser window resize - it updates only onCards Layoutbutton click. Please keep it in mind while testing.How to test