Context
I would like to use react-virtualized Grid to create a responsive grid of cards. The data of the cards will be one dimensional (non 2D).
The cards will each have a minimum width and they will fill the entire width of the grid, wrapping to the next row when needed.
Example (using CSS grid and minmax property)
How can I achieve this with react-virtualized's Grid?
Current Code
I am currently using react-virtualized Grid inconjunction with
- AutoSizer
- WindowScroller
import _ from "lodash";
import { AutoSizer, Grid, WindowScroller } from "react-virtualized";
function GridExample() {
const items = _.range(100).map((num) => ({ name: `Collection ${num}` })); // data is a one-dimensional array
function renderItem({ columnIndex, key, rowIndex, style }) {
return (
<div key={key} style={style}>
{items[rowIndex].name}
</div>
);
}
return (
<WindowScroller>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<AutoSizer disableHeight>
{({ width }) => (
<Grid
autoHeight
columnCount={1} // I want to change this to be dynamic number of columns
columnWidth={100} // I want to change this to be dynamic widths
width={width}
height={height}
rowCount={items.length}
rowHeight={50}
cellRenderer={renderItem}
isScrolling={isScrolling}
scrollTop={scrollTop}
onScroll={onChildScroll}
/>
)}
</AutoSizer>
)}
</WindowScroller>
);
}
I have tried to use ColumnSizer, but it stopped my items from rendering and I am not sure that it is the right tool for the job. I've tried searching for docs or other examples, but came up empty.
Help would be greatly appreciated. Thank you so much.
