Skip to content

Releases: niikeec/virtual-grid

@virtual-grid/[email protected]

28 May 00:22
99925fe
Compare
Choose a tag to compare

Patch Changes

@virtual-grid/[email protected]

12 Feb 10:14
78b7ed4
Compare
Choose a tag to compare

Patch Changes

@virtual-grid/[email protected]

12 Feb 10:14
78b7ed4
Compare
Choose a tag to compare

Patch Changes

@virtual-grid/[email protected]

12 Feb 10:14
78b7ed4
Compare
Choose a tag to compare

Patch Changes

@virtual-grid/[email protected]

30 Jan 17:47
435526c
Compare
Choose a tag to compare

Patch Changes

  • 62cfcf9: Fix passing width and height props as undefined, which would previously override internal sizes.

@virtual-grid/[email protected]

15 Jan 17:26
119cda9
Compare
Choose a tag to compare

@virtual-grid/[email protected]

15 Jan 17:26
119cda9
Compare
Choose a tag to compare

6002f32

Breaking changes

  • grid.virtualizer has been replaced by grid.rowVirtualizer and grid.columnVirtualizer
  • onLoadMore and loadMoreSize are not exported by useGrid anymore
  • rowVirtualizer and columnVirtualizer can't be passed to useGrid anymore
  • Properties of grid.padding and grid.gap are now partial

Simplified headless integration

useGrid now exports two new functions getVirtualItem and getLoadMoreTrigger which immensely reduce boilerplate code when integrating a headless solution.

Example using getVirtualItem:

{rowVirtualizer.getVirtualItems().map((row) => {
    const item = grid.getVirtualItem({ row });
    if (!item) return null;

    return (
        <div key={row.key} style={item.style}>
            ...
        </div>
    );
})}

Example using getLoadMoreTrigger in combination with the new <LoadMoreTrigger /> component.
See Example

 <LoadMoreTrigger {...grid.getLoadMoreTrigger()} />

Scroll margin has also been simplified with the new useScrollMargin hook.
See Example

 const { scrollMargin } = useScrollMargin({ scrollRef, gridRef });

 // ...

 const item = grid.getVirtualItem({ row, scrollMargin });

Other changes

  • rows and columns are now independent of horizontal
  • Rows are now also resizable based on the height of the grid and number of rows using horizontal. Previously this was only possible with columns.
  • Improved performance by only measuring on demand
  • Bump @tanstack/react-virtual to 3.0.1

What's up next?

  • Improve docs
  • Add more examples
  • SolidJS integration. We got an active PR here.

PR - Documentation

@virtual-grid/[email protected]

15 Jan 17:26
119cda9
Compare
Choose a tag to compare

@virtual-grid/[email protected]

13 Nov 11:19
290ee02
Compare
Choose a tag to compare

Minor Changes

  • Grid horizontal support

Patch Changes

@virtual-grid/[email protected]

13 Nov 11:19
290ee02
Compare
Choose a tag to compare

Minor Changes

  • Grid horizontal support