Masonry horizontal scrolling grid

[bielekas]

Is it possible to use collection as a grid, to display let's say 100 lines of datasets which are about 100 units long? I've tried using grid, but dynamic cell width broke the lazy loading and it ended up in blank spaces. I'm trying to display data like this:

[aperkaz]

@bielekas did you managed to do this?

[lukebars]

@aperkaz Yes, I've used Collection (sorry for different account)

[aperkaz]

@lukebars thanks for the answer! Any codesnippet I could look into?

[lukebars]

A very rough code snippet, but might give you some ideas...

    cellSizeAndPositionGetter = ({ index }) => {
        const hours; // 24 hour array

        return index === hours.length
            ? {
                  height: 20,
                  width: 30,
                  x: this.props.timeLabelPosition,
                  y: 0,
              }
            : {
                  height: this.props.theme.timeline.container.height,
                  width: 30 * this.props.theme.PIXELS_PER_MIN,
                  x: index * 30 * this.props.theme.PIXELS_PER_MIN,
                  y: 0,
              };
    };

    render() {
        const {
            width,
            theme,
            timelineRef,
            timeLabelPosition,
            scrollLeft,
        } = this.props;
        
        const hours; // 24 hour array

        return (
            <Collection
                style={{
                    overflow: 'hidden',
                    overflowX: 'hidden',
                    overflowY: 'hidden',
                    left: theme.sidebar.container.width,
                    right: 0,
                    top: 0,
                }}
                cellCount={hours.length}
                cellRenderer={this.cellRenderer}
                cellSizeAndPositionGetter={this.cellSizeAndPositionGetter}
                height={theme.timeline.container.height}
                width={width}
                timeLabelPosition={timeLabelPosition}
                scrollLeft={scrollLeft}
                verticalOverscanSize={0}
                horizontalOverscanSize={0}
                ref={timelineRef}
            />
        );
    }

[lundborgm]

@aperkaz hi, did you manage to create this layout using Collection?