@humanspeak/svelte-headless-table
Version:
A powerful, headless table library for Svelte that provides complete control over table UI while handling complex data operations like sorting, filtering, pagination, grouping, and row expansion. Build custom, accessible data tables with zero styling opin
38 lines (37 loc) • 1.52 kB
TypeScript
import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js';
import type { ScrollToIndexOptions, VirtualScrollConfig, VirtualScrollRowProps, VirtualScrollState, VisibleRange } from './addVirtualScroll.types.js';
export type { ScrollToIndexOptions, VirtualScrollConfig, VirtualScrollState, VisibleRange };
/**
* Creates a virtual scroll plugin that enables virtualized table rendering.
* Only renders rows that are visible in the viewport plus a buffer, dramatically
* improving performance for large datasets.
*
* @template Item - The type of data items in the table.
* @param config - Configuration options for virtual scrolling.
* @returns A TablePlugin that provides virtualization functionality.
*
* @example
* ```typescript
* const table = createTable(data, {
* virtualScroll: addVirtualScroll({
* estimatedRowHeight: 48,
* bufferSize: 5,
* onLoadMore: async () => {
* const more = await fetchMoreItems()
* data.update(d => [...d, ...more])
* },
* hasMore: hasMoreStore
* })
* })
*
* const {
* virtualScroll,
* topSpacerHeight,
* bottomSpacerHeight,
* visibleRange
* } = table.pluginStates.virtualScroll
* ```
*/
export declare const addVirtualScroll: <Item>({ onLoadMore, hasMore: hasMoreConfig, loadMoreThreshold, estimatedRowHeight, bufferSize, getRowHeight }?: VirtualScrollConfig<Item>) => TablePlugin<Item, VirtualScrollState<Item>, Record<string, never>, NewTablePropSet<{
"tbody.tr": VirtualScrollRowProps;
}>>;