diff --git a/docs/api/virtualizer.md b/docs/api/virtualizer.md index 79d2df1b..2226f428 100644 --- a/docs/api/virtualizer.md +++ b/docs/api/virtualizer.md @@ -138,6 +138,14 @@ getItemKey?: (index: number) => Key This function is passed the index of each item and should return a unique key for that item. The default functionality of this function is to return the index of the item, but you should override this when possible to return a unique identifier for each item across the entire set. This function should be memoized to prevent unnecessary re-renders. +### `startItem` + +```ts +startItem?: (index: number) => number +``` + +This optional function is called when you need specials gaps between your items. This measurement should return the left or top of the item depending on `horizontal`. Useful when you know your layouts in advance. + ### `rangeExtractor` ```tsx diff --git a/packages/virtual-core/src/index.ts b/packages/virtual-core/src/index.ts index b4794e06..70625c9a 100644 --- a/packages/virtual-core/src/index.ts +++ b/packages/virtual-core/src/index.ts @@ -337,6 +337,7 @@ export interface VirtualizerOptions< scrollPaddingEnd?: number initialOffset?: number | (() => number) getItemKey?: (index: number) => Key + startItem?: ((index: number) => number) | null rangeExtractor?: (range: Range) => Array scrollMargin?: number gap?: number @@ -431,6 +432,7 @@ export class Virtualizer< getItemKey: defaultKeyExtractor, rangeExtractor: defaultRangeExtractor, onChange: () => {}, + startItem: null, measureElement, initialRect: { width: 0, height: 0 }, scrollMargin: 0, @@ -668,9 +670,11 @@ export class Virtualizer< ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i) - const start = furthestMeasurement - ? furthestMeasurement.end + this.options.gap - : paddingStart + scrollMargin + const start = + this.options.startItem?.(i) ?? + (furthestMeasurement + ? furthestMeasurement.end + this.options.gap + : paddingStart + scrollMargin) const measuredSize = itemSizeCache.get(key) const size =