@bsol-oss/react-datatable5 13.0.1-beta.33 → 13.0.1-beta.34

package/dist/index.d.ts

@@ -1057,6 +1057,10 @@ interface TimeViewportGridProps {
     viewportStart?: TimeInput;
     viewportEnd?: TimeInput;
     tickCount?: number;
+    tickStrategy?: 'count' | 'timeUnit';
+    tickUnit?: 'minute' | 'hour' | 'day';
+    tickStep?: number;
+    format?: string;
     minorDivisions?: number;
     majorLineColor?: string;
     minorLineColor?: string;
@@ -1090,6 +1094,12 @@ interface TimeViewportBlocksProps {
         trackKey?: string | number;
     }) => ReactNode;
     onBlockClick?: (block: TimeViewportBlockItem) => void;
+    /** Enable virtual scrolling for large track lists. */
+    virtualize?: boolean;
+    /** Fixed pixel height of the scroll container when virtualize is true. Defaults to 400. */
+    virtualHeight?: number;
+    /** Number of off-screen rows to render above/below the visible area. Defaults to 5. */
+    overscan?: number;
 }
 interface TimeViewportRootProps {
     viewportStart: TimeInput;
@@ -1172,8 +1182,8 @@ declare function TimeViewportHeader({ viewportStart, viewportEnd, tickCount, tic
  * Vertical grid lines for measuring block positions in the viewport.
  * Render inside a relative container that also contains blocks.
  */
-declare function TimeViewportGrid({ viewportStart, viewportEnd, tickCount, minorDivisions, majorLineColor, minorLineColor, showMinorLines, zIndex, animationDurationMs, animationEasing, }: TimeViewportGridProps): react_jsx_runtime.JSX.Element | null;
-declare function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height, minWidthPx, borderRadius, defaultColorPalette, showLabel, hideWhenOutOfView, hideEmptyTracks, gap, allowOverlap, overlapOpacity, renderTrackPrefix, renderTrackSuffix, onBlockClick, }: TimeViewportBlocksProps): react_jsx_runtime.JSX.Element;
+declare function TimeViewportGrid({ viewportStart, viewportEnd, tickCount, tickStrategy, tickUnit, tickStep, format, minorDivisions, majorLineColor, minorLineColor, showMinorLines, zIndex, animationDurationMs, animationEasing, }: TimeViewportGridProps): react_jsx_runtime.JSX.Element | null;
+declare function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height, minWidthPx, borderRadius, defaultColorPalette, showLabel, hideWhenOutOfView, hideEmptyTracks, gap, allowOverlap, overlapOpacity, renderTrackPrefix, renderTrackSuffix, onBlockClick, virtualize, virtualHeight, overscan, }: TimeViewportBlocksProps): react_jsx_runtime.JSX.Element;
 declare function TimeRangeZoom({ range, onRangeChange, minDurationMs, maxDurationMs, zoomFactor, resetDurationMs, showResetButton, disabled, labels, }: TimeRangeZoomProps): react_jsx_runtime.JSX.Element;
 declare function useTimeRangeZoom({ range, onRangeChange, minDurationMs, maxDurationMs, zoomFactor, resetDurationMs, disabled, labels, }: TimeRangeZoomProps): UseTimeRangeZoomResult;
 

package/dist/index.js

@@ -32,6 +32,7 @@ var timezone = require('dayjs/plugin/timezone');
 var utc = require('dayjs/plugin/utc');
 var ti = require('react-icons/ti');
 var ajv = require('@hookform/resolvers/ajv');
+var reactVirtual = require('@tanstack/react-virtual');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
 
 function _interopNamespaceDefault(e) {
@@ -8095,7 +8096,7 @@ function TimeViewportRoot({ viewportStart, viewportEnd, children, onViewportChan
     return (jsxRuntime.jsx(TimeViewportContext.Provider, { value: { viewportStart, viewportEnd }, children: jsxRuntime.jsx(react.Box, { ref: containerRef, position: "relative", width: "100%", cursor: enableDragPan ? (isDragging ? 'grabbing' : 'grab') : 'default', userSelect: enableDragPan ? 'none' : undefined, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: stopDragging, onPointerCancel: stopDragging, onWheel: handleWheel, children: children }) }));
 }
 function TimeViewportTrackRow({ trackKey, blocks, resolvedHeight, prefix, suffix, renderBlockNode, }) {
-    return (jsxRuntime.jsxs(react.HStack, { align: "stretch", gap: 2, children: [prefix ? (jsxRuntime.jsx(react.Box, { minW: "fit-content", display: "flex", alignItems: "center", children: prefix })) : null, jsxRuntime.jsx(react.Box, { position: "relative", width: "100%", height: resolvedHeight, children: blocks.map((item, index) => renderBlockNode(item, index)) }), suffix ? (jsxRuntime.jsx(react.Box, { minW: "fit-content", display: "flex", alignItems: "center", children: suffix })) : null] }, trackKey));
+    return (jsxRuntime.jsxs(react.HStack, { width: "100%", overflowX: 'hidden', align: "stretch", gap: 2, children: [prefix ? (jsxRuntime.jsx(react.Box, { minW: "fit-content", display: "flex", alignItems: "center", children: prefix })) : null, jsxRuntime.jsx(react.Box, { position: "relative", width: "100%", height: resolvedHeight, children: blocks.map((item, index) => renderBlockNode(item, index)) }), suffix ? (jsxRuntime.jsx(react.Box, { minW: "fit-content", display: "flex", alignItems: "center", children: suffix })) : null] }, trackKey));
 }
 const defaultLabels = {
     zoomIn: 'Zoom in',
@@ -8357,35 +8358,55 @@ function TimeViewportHeader({ viewportStart, viewportEnd, tickCount = 7, tickStr
  * Vertical grid lines for measuring block positions in the viewport.
  * Render inside a relative container that also contains blocks.
  */
-function TimeViewportGrid({ viewportStart, viewportEnd, tickCount = 8, minorDivisions = 2, majorLineColor = 'gray.300', minorLineColor = 'gray.200', showMinorLines = true, zIndex = 0, animationDurationMs = VIEWPORT_TRANSITION_DURATION_MS, animationEasing = VIEWPORT_TRANSITION_EASING, }) {
-    const viewport = useResolvedViewport(viewportStart, viewportEnd);
-    const start = viewport ? parseTimeInput(viewport.viewportStart) : null;
-    const end = viewport ? parseTimeInput(viewport.viewportEnd) : null;
-    if (!start || !end || !end.isAfter(start))
+function TimeViewportGrid({ viewportStart, viewportEnd, tickCount = 8, tickStrategy = 'count', tickUnit = 'hour', tickStep = 1, format, minorDivisions = 2, majorLineColor = 'gray.300', minorLineColor = 'gray.200', showMinorLines = true, zIndex = 0, animationDurationMs = VIEWPORT_TRANSITION_DURATION_MS, animationEasing = VIEWPORT_TRANSITION_EASING, }) {
+    const { isValidViewport, getTicks } = useTimeViewport(viewportStart, viewportEnd, format);
+    const majorTicks = getTicks({ tickStrategy, tickCount, tickUnit, tickStep });
+    if (!isValidViewport || majorTicks.length < 2)
         return null;
-    const safeTickCount = Math.max(2, tickCount);
-    const majorTicks = Array.from({ length: safeTickCount }, (_, index) => ({
-        index,
-        percent: (index / (safeTickCount - 1)) * 100,
-    }));
     const safeMinorDivisions = Math.max(1, minorDivisions);
     const transitionValue = animationDurationMs > 0
         ? `transform ${animationDurationMs}ms ${animationEasing}, opacity ${animationDurationMs}ms ${animationEasing}`
         : undefined;
     const minorTicks = showMinorLines
-        ? Array.from({ length: safeTickCount - 1 }, (_, segmentIndex) => {
-            const base = (segmentIndex / (safeTickCount - 1)) * 100;
-            const next = ((segmentIndex + 1) / (safeTickCount - 1)) * 100;
+        ? majorTicks.slice(0, -1).flatMap((tick, segmentIndex) => {
+            const base = tick.percent;
+            const next = majorTicks[segmentIndex + 1].percent;
             const segment = [];
             for (let step = 1; step < safeMinorDivisions; step += 1) {
                 segment.push(base + ((next - base) * step) / safeMinorDivisions);
             }
             return segment;
-        }).flat()
+        })
         : [];
     return (jsxRuntime.jsxs(react.Box, { position: "absolute", inset: 0, pointerEvents: "none", zIndex: zIndex, children: [minorTicks.map((percent, index) => (jsxRuntime.jsx(react.Box, { position: "absolute", inset: 0, transform: `translateX(${percent}%)`, transition: transitionValue, children: jsxRuntime.jsx(react.Box, { position: "absolute", insetInlineStart: 0, top: 0, bottom: 0, width: "1px", bg: minorLineColor, _dark: { bg: 'gray.700' } }) }, `minor-grid-${index}`))), majorTicks.map((tick) => (jsxRuntime.jsx(react.Box, { position: "absolute", inset: 0, transform: `translateX(${tick.percent}%)`, transition: transitionValue, children: jsxRuntime.jsx(react.Box, { position: "absolute", insetInlineStart: 0, top: 0, bottom: 0, width: "1px", bg: majorLineColor, _dark: { bg: 'gray.600' } }) }, `major-grid-${tick.index}`)))] }));
 }
-function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px', minWidthPx = 2, borderRadius = 'sm', defaultColorPalette = 'blue', showLabel = true, hideWhenOutOfView = true, hideEmptyTracks = true, gap = 2, allowOverlap = false, overlapOpacity = 0.9, renderTrackPrefix, renderTrackSuffix, onBlockClick, }) {
+function VirtualizedTrackList({ tracks, resolvedHeight, gap, virtualHeight, overscan, renderTrackPrefix, renderTrackSuffix, renderBlockNode, }) {
+    const parentRef = React.useRef(null);
+    const rowHeightPx = parseInt(resolvedHeight, 10) || 28;
+    const gapPx = gap * 4; // Chakra spacing token to px (1 unit = 4px)
+    const virtualizer = reactVirtual.useVirtualizer({
+        count: tracks.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => rowHeightPx + gapPx,
+        overscan,
+    });
+    return (jsxRuntime.jsx(react.Box, { ref: parentRef, overflowY: "auto", height: `${virtualHeight}px`, children: jsxRuntime.jsx(react.Box, { height: `${virtualizer.getTotalSize()}px`, position: "relative", children: virtualizer.getVirtualItems().map((virtualRow) => {
+                const track = tracks[virtualRow.index];
+                const trackBlocks = track.blocks.map((item) => item.block);
+                const prefix = renderTrackPrefix?.({
+                    trackIndex: virtualRow.index,
+                    trackBlocks,
+                    trackKey: track.trackKeyRaw,
+                });
+                const suffix = renderTrackSuffix?.({
+                    trackIndex: virtualRow.index,
+                    trackBlocks,
+                    trackKey: track.trackKeyRaw,
+                });
+                return (jsxRuntime.jsx(react.Box, { position: "absolute", top: 0, left: 0, width: "100%", transform: `translateY(${virtualRow.start}px)`, children: jsxRuntime.jsx(TimeViewportTrackRow, { trackKey: track.trackKey, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }) }, track.trackKey));
+            }) }) }));
+}
+function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px', minWidthPx = 2, borderRadius = 'sm', defaultColorPalette = 'blue', showLabel = true, hideWhenOutOfView = true, hideEmptyTracks = true, gap = 2, allowOverlap = false, overlapOpacity = 0.9, renderTrackPrefix, renderTrackSuffix, onBlockClick, virtualize = false, virtualHeight = 400, overscan = 5, }) {
     const { getGeometry, toTimeMs } = useTimeViewportBlockGeometry(viewportStart, viewportEnd);
     const resolvedHeight = typeof height === 'number' ? `${height}px` : height;
     const expandedBlocks = flattenTrackBlocks(blocks);
@@ -8420,74 +8441,73 @@ function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px
             onBlockClick?.(block);
         };
         const isBlockClickable = Boolean(block.onClick || onBlockClick);
-        return (jsxRuntime.jsx(react.Box, { position: "absolute", inset: 0, pointerEvents: "none", children: jsxRuntime.jsx(react.Box, { width: "100%", height: "100%", transform: `translateX(${geometry.leftPercent}%)`, transition: VIEWPORT_TRANSITION, children: jsxRuntime.jsx(react.Box, { width: `max(${geometry.widthPercent}%, ${minWidthPx}px)`, height: "100%", borderRadius: borderRadius, bg: block.background ??
-                        `${block.colorPalette ?? defaultColorPalette}.500`, _dark: {
-                        bg: block.background ??
-                            `${block.colorPalette ?? defaultColorPalette}.900`,
-                    }, display: "flex", alignItems: "center", justifyContent: "center", px: 2, overflow: "hidden", opacity: allowOverlap ? overlapOpacity : 1, zIndex: indexInLayer + 1, pointerEvents: "auto", onClick: isBlockClickable ? handleBlockClick : undefined, cursor: isBlockClickable ? 'pointer' : 'default', children: showLabel && block.label ? (jsxRuntime.jsx(react.Text, { fontSize: "xs", lineClamp: 1, color: "white", _dark: { color: 'gray.100' }, children: block.label })) : null }) }) }, block.id));
+        return (jsxRuntime.jsx(react.Box, { height: "100%", position: "absolute", inset: 0, pointerEvents: "none", transform: `translateX(${geometry.leftPercent}%)`, transition: VIEWPORT_TRANSITION, children: jsxRuntime.jsx(react.Box, { width: `max(${geometry.widthPercent}%, ${minWidthPx}px)`, height: "100%", borderRadius: borderRadius, bg: block.background ??
+                    `${block.colorPalette ?? defaultColorPalette}.500`, _dark: {
+                    bg: block.background ??
+                        `${block.colorPalette ?? defaultColorPalette}.900`,
+                }, display: "flex", alignItems: "center", justifyContent: "center", px: 2, overflow: "hidden", opacity: allowOverlap ? overlapOpacity : 1, zIndex: indexInLayer + 1, pointerEvents: "auto", onClick: isBlockClickable ? handleBlockClick : undefined, cursor: isBlockClickable ? 'pointer' : 'default', children: showLabel && block.label ? (jsxRuntime.jsx(react.Text, { fontSize: "xs", lineClamp: 1, color: "white", _dark: { color: 'gray.100' }, children: block.label })) : null }) }, block.id));
     };
+    // ---------- Resolve tracks ----------
     const explicitTrackKeys = Array.from(new Set(expandedBlocks
         .map((item) => item.track)
         .filter((track) => track !== undefined)));
-    if (explicitTrackKeys.length > 0) {
-        const tracks = explicitTrackKeys
-            .map((trackKey) => ({
-            trackKey,
-            blocks: parsedBlocks.filter((item) => item.block.track === trackKey),
-        }))
-            .filter((track) => !hideEmptyTracks || track.blocks.length > 0);
-        return (jsxRuntime.jsx(react.VStack, { align: "stretch", gap: gap, children: tracks.map((track, trackIndex) => {
-                const trackBlocks = track.blocks.map((item) => item.block);
-                const prefix = renderTrackPrefix?.({
-                    trackIndex,
-                    trackBlocks,
-                    trackKey: track.trackKey,
-                });
-                const suffix = renderTrackSuffix?.({
-                    trackIndex,
-                    trackBlocks,
-                    trackKey: track.trackKey,
-                });
-                return (jsxRuntime.jsx(TimeViewportTrackRow, { trackKey: `track-keyed-${String(track.trackKey)}`, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
-            }) }));
+    const resolvedTracks = React.useMemo(() => {
+        if (explicitTrackKeys.length > 0) {
+            return explicitTrackKeys
+                .map((trackKey) => ({
+                trackKey: `track-keyed-${String(trackKey)}`,
+                trackKeyRaw: trackKey,
+                blocks: parsedBlocks.filter((item) => item.block.track === trackKey),
+            }))
+                .filter((track) => !hideEmptyTracks || track.blocks.length > 0);
+        }
+        const autoPackedTracks = (() => {
+            const sortedBlocks = [...parsedBlocks]
+                .filter(({ startMs, endMs }) => Number.isFinite(startMs) && Number.isFinite(endMs))
+                .sort((a, b) => {
+                if (a.startMs === b.startMs)
+                    return a.endMs - b.endMs;
+                return a.startMs - b.startMs;
+            });
+            const trackLastEndTimes = [];
+            const tracks = [];
+            sortedBlocks.forEach((item) => {
+                const trackIndex = trackLastEndTimes.findIndex((endMs) => item.startMs >= endMs);
+                if (trackIndex === -1) {
+                    trackLastEndTimes.push(item.endMs);
+                    tracks.push([item]);
+                }
+                else {
+                    trackLastEndTimes[trackIndex] = item.endMs;
+                    tracks[trackIndex].push(item);
+                }
+            });
+            return tracks;
+        })();
+        const packed = allowOverlap ? [parsedBlocks] : autoPackedTracks;
+        return packed.map((track, trackIndex) => ({
+            trackKey: `track-row-${trackIndex}`,
+            trackKeyRaw: undefined,
+            blocks: track,
+        }));
+    }, [allowOverlap, explicitTrackKeys, hideEmptyTracks, parsedBlocks]);
+    // ---------- Render ----------
+    if (virtualize) {
+        return (jsxRuntime.jsx(VirtualizedTrackList, { tracks: resolvedTracks, resolvedHeight: resolvedHeight, gap: gap, virtualHeight: virtualHeight, overscan: overscan, renderTrackPrefix: renderTrackPrefix, renderTrackSuffix: renderTrackSuffix, renderBlockNode: renderBlockNode }));
     }
-    const autoPackedTracks = (() => {
-        const sortedBlocks = [...parsedBlocks]
-            .filter(({ startMs, endMs }) => Number.isFinite(startMs) && Number.isFinite(endMs))
-            .sort((a, b) => {
-            if (a.startMs === b.startMs)
-                return a.endMs - b.endMs;
-            return a.startMs - b.startMs;
-        });
-        const trackLastEndTimes = [];
-        const tracks = [];
-        sortedBlocks.forEach((item) => {
-            const trackIndex = trackLastEndTimes.findIndex((endMs) => item.startMs >= endMs);
-            if (trackIndex === -1) {
-                trackLastEndTimes.push(item.endMs);
-                tracks.push([item]);
-            }
-            else {
-                trackLastEndTimes[trackIndex] = item.endMs;
-                tracks[trackIndex].push(item);
-            }
-        });
-        return tracks;
-    })();
-    const tracks = allowOverlap ? [parsedBlocks] : autoPackedTracks;
-    return (jsxRuntime.jsx(react.VStack, { align: "stretch", gap: gap, children: tracks.map((track, trackIndex) => {
-            const trackBlocks = track.map((item) => item.block);
+    return (jsxRuntime.jsx(react.VStack, { align: "stretch", gap: gap, children: resolvedTracks.map((track, trackIndex) => {
+            const trackBlocks = track.blocks.map((item) => item.block);
             const prefix = renderTrackPrefix?.({
                 trackIndex,
                 trackBlocks,
-                trackKey: undefined,
+                trackKey: track.trackKeyRaw,
             });
             const suffix = renderTrackSuffix?.({
                 trackIndex,
                 trackBlocks,
-                trackKey: undefined,
+                trackKey: track.trackKeyRaw,
             });
-            return (jsxRuntime.jsx(TimeViewportTrackRow, { trackKey: `track-row-${trackIndex}`, blocks: track, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
+            return (jsxRuntime.jsx(TimeViewportTrackRow, { trackKey: track.trackKey, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
         }) }));
 }
 function TimeRangeZoom({ range, onRangeChange, minDurationMs = DEFAULT_MIN_DURATION_MS, maxDurationMs = DEFAULT_MAX_DURATION_MS, zoomFactor = DEFAULT_ZOOM_FACTOR, resetDurationMs, showResetButton = true, disabled = false, labels, }) {

package/dist/index.mjs

@@ -31,6 +31,7 @@ import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import { TiDeleteOutline } from 'react-icons/ti';
 import { ajvResolver } from '@hookform/resolvers/ajv';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { rankItem } from '@tanstack/match-sorter-utils';
 
 const DataTableContext = createContext({
@@ -8075,7 +8076,7 @@ function TimeViewportRoot({ viewportStart, viewportEnd, children, onViewportChan
     return (jsx(TimeViewportContext.Provider, { value: { viewportStart, viewportEnd }, children: jsx(Box, { ref: containerRef, position: "relative", width: "100%", cursor: enableDragPan ? (isDragging ? 'grabbing' : 'grab') : 'default', userSelect: enableDragPan ? 'none' : undefined, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: stopDragging, onPointerCancel: stopDragging, onWheel: handleWheel, children: children }) }));
 }
 function TimeViewportTrackRow({ trackKey, blocks, resolvedHeight, prefix, suffix, renderBlockNode, }) {
-    return (jsxs(HStack, { align: "stretch", gap: 2, children: [prefix ? (jsx(Box, { minW: "fit-content", display: "flex", alignItems: "center", children: prefix })) : null, jsx(Box, { position: "relative", width: "100%", height: resolvedHeight, children: blocks.map((item, index) => renderBlockNode(item, index)) }), suffix ? (jsx(Box, { minW: "fit-content", display: "flex", alignItems: "center", children: suffix })) : null] }, trackKey));
+    return (jsxs(HStack, { width: "100%", overflowX: 'hidden', align: "stretch", gap: 2, children: [prefix ? (jsx(Box, { minW: "fit-content", display: "flex", alignItems: "center", children: prefix })) : null, jsx(Box, { position: "relative", width: "100%", height: resolvedHeight, children: blocks.map((item, index) => renderBlockNode(item, index)) }), suffix ? (jsx(Box, { minW: "fit-content", display: "flex", alignItems: "center", children: suffix })) : null] }, trackKey));
 }
 const defaultLabels = {
     zoomIn: 'Zoom in',
@@ -8337,35 +8338,55 @@ function TimeViewportHeader({ viewportStart, viewportEnd, tickCount = 7, tickStr
  * Vertical grid lines for measuring block positions in the viewport.
  * Render inside a relative container that also contains blocks.
  */
-function TimeViewportGrid({ viewportStart, viewportEnd, tickCount = 8, minorDivisions = 2, majorLineColor = 'gray.300', minorLineColor = 'gray.200', showMinorLines = true, zIndex = 0, animationDurationMs = VIEWPORT_TRANSITION_DURATION_MS, animationEasing = VIEWPORT_TRANSITION_EASING, }) {
-    const viewport = useResolvedViewport(viewportStart, viewportEnd);
-    const start = viewport ? parseTimeInput(viewport.viewportStart) : null;
-    const end = viewport ? parseTimeInput(viewport.viewportEnd) : null;
-    if (!start || !end || !end.isAfter(start))
+function TimeViewportGrid({ viewportStart, viewportEnd, tickCount = 8, tickStrategy = 'count', tickUnit = 'hour', tickStep = 1, format, minorDivisions = 2, majorLineColor = 'gray.300', minorLineColor = 'gray.200', showMinorLines = true, zIndex = 0, animationDurationMs = VIEWPORT_TRANSITION_DURATION_MS, animationEasing = VIEWPORT_TRANSITION_EASING, }) {
+    const { isValidViewport, getTicks } = useTimeViewport(viewportStart, viewportEnd, format);
+    const majorTicks = getTicks({ tickStrategy, tickCount, tickUnit, tickStep });
+    if (!isValidViewport || majorTicks.length < 2)
         return null;
-    const safeTickCount = Math.max(2, tickCount);
-    const majorTicks = Array.from({ length: safeTickCount }, (_, index) => ({
-        index,
-        percent: (index / (safeTickCount - 1)) * 100,
-    }));
     const safeMinorDivisions = Math.max(1, minorDivisions);
     const transitionValue = animationDurationMs > 0
         ? `transform ${animationDurationMs}ms ${animationEasing}, opacity ${animationDurationMs}ms ${animationEasing}`
         : undefined;
     const minorTicks = showMinorLines
-        ? Array.from({ length: safeTickCount - 1 }, (_, segmentIndex) => {
-            const base = (segmentIndex / (safeTickCount - 1)) * 100;
-            const next = ((segmentIndex + 1) / (safeTickCount - 1)) * 100;
+        ? majorTicks.slice(0, -1).flatMap((tick, segmentIndex) => {
+            const base = tick.percent;
+            const next = majorTicks[segmentIndex + 1].percent;
             const segment = [];
             for (let step = 1; step < safeMinorDivisions; step += 1) {
                 segment.push(base + ((next - base) * step) / safeMinorDivisions);
             }
             return segment;
-        }).flat()
+        })
         : [];
     return (jsxs(Box, { position: "absolute", inset: 0, pointerEvents: "none", zIndex: zIndex, children: [minorTicks.map((percent, index) => (jsx(Box, { position: "absolute", inset: 0, transform: `translateX(${percent}%)`, transition: transitionValue, children: jsx(Box, { position: "absolute", insetInlineStart: 0, top: 0, bottom: 0, width: "1px", bg: minorLineColor, _dark: { bg: 'gray.700' } }) }, `minor-grid-${index}`))), majorTicks.map((tick) => (jsx(Box, { position: "absolute", inset: 0, transform: `translateX(${tick.percent}%)`, transition: transitionValue, children: jsx(Box, { position: "absolute", insetInlineStart: 0, top: 0, bottom: 0, width: "1px", bg: majorLineColor, _dark: { bg: 'gray.600' } }) }, `major-grid-${tick.index}`)))] }));
 }
-function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px', minWidthPx = 2, borderRadius = 'sm', defaultColorPalette = 'blue', showLabel = true, hideWhenOutOfView = true, hideEmptyTracks = true, gap = 2, allowOverlap = false, overlapOpacity = 0.9, renderTrackPrefix, renderTrackSuffix, onBlockClick, }) {
+function VirtualizedTrackList({ tracks, resolvedHeight, gap, virtualHeight, overscan, renderTrackPrefix, renderTrackSuffix, renderBlockNode, }) {
+    const parentRef = useRef(null);
+    const rowHeightPx = parseInt(resolvedHeight, 10) || 28;
+    const gapPx = gap * 4; // Chakra spacing token to px (1 unit = 4px)
+    const virtualizer = useVirtualizer({
+        count: tracks.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => rowHeightPx + gapPx,
+        overscan,
+    });
+    return (jsx(Box, { ref: parentRef, overflowY: "auto", height: `${virtualHeight}px`, children: jsx(Box, { height: `${virtualizer.getTotalSize()}px`, position: "relative", children: virtualizer.getVirtualItems().map((virtualRow) => {
+                const track = tracks[virtualRow.index];
+                const trackBlocks = track.blocks.map((item) => item.block);
+                const prefix = renderTrackPrefix?.({
+                    trackIndex: virtualRow.index,
+                    trackBlocks,
+                    trackKey: track.trackKeyRaw,
+                });
+                const suffix = renderTrackSuffix?.({
+                    trackIndex: virtualRow.index,
+                    trackBlocks,
+                    trackKey: track.trackKeyRaw,
+                });
+                return (jsx(Box, { position: "absolute", top: 0, left: 0, width: "100%", transform: `translateY(${virtualRow.start}px)`, children: jsx(TimeViewportTrackRow, { trackKey: track.trackKey, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }) }, track.trackKey));
+            }) }) }));
+}
+function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px', minWidthPx = 2, borderRadius = 'sm', defaultColorPalette = 'blue', showLabel = true, hideWhenOutOfView = true, hideEmptyTracks = true, gap = 2, allowOverlap = false, overlapOpacity = 0.9, renderTrackPrefix, renderTrackSuffix, onBlockClick, virtualize = false, virtualHeight = 400, overscan = 5, }) {
     const { getGeometry, toTimeMs } = useTimeViewportBlockGeometry(viewportStart, viewportEnd);
     const resolvedHeight = typeof height === 'number' ? `${height}px` : height;
     const expandedBlocks = flattenTrackBlocks(blocks);
@@ -8400,74 +8421,73 @@ function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px
             onBlockClick?.(block);
         };
         const isBlockClickable = Boolean(block.onClick || onBlockClick);
-        return (jsx(Box, { position: "absolute", inset: 0, pointerEvents: "none", children: jsx(Box, { width: "100%", height: "100%", transform: `translateX(${geometry.leftPercent}%)`, transition: VIEWPORT_TRANSITION, children: jsx(Box, { width: `max(${geometry.widthPercent}%, ${minWidthPx}px)`, height: "100%", borderRadius: borderRadius, bg: block.background ??
-                        `${block.colorPalette ?? defaultColorPalette}.500`, _dark: {
-                        bg: block.background ??
-                            `${block.colorPalette ?? defaultColorPalette}.900`,
-                    }, display: "flex", alignItems: "center", justifyContent: "center", px: 2, overflow: "hidden", opacity: allowOverlap ? overlapOpacity : 1, zIndex: indexInLayer + 1, pointerEvents: "auto", onClick: isBlockClickable ? handleBlockClick : undefined, cursor: isBlockClickable ? 'pointer' : 'default', children: showLabel && block.label ? (jsx(Text, { fontSize: "xs", lineClamp: 1, color: "white", _dark: { color: 'gray.100' }, children: block.label })) : null }) }) }, block.id));
+        return (jsx(Box, { height: "100%", position: "absolute", inset: 0, pointerEvents: "none", transform: `translateX(${geometry.leftPercent}%)`, transition: VIEWPORT_TRANSITION, children: jsx(Box, { width: `max(${geometry.widthPercent}%, ${minWidthPx}px)`, height: "100%", borderRadius: borderRadius, bg: block.background ??
+                    `${block.colorPalette ?? defaultColorPalette}.500`, _dark: {
+                    bg: block.background ??
+                        `${block.colorPalette ?? defaultColorPalette}.900`,
+                }, display: "flex", alignItems: "center", justifyContent: "center", px: 2, overflow: "hidden", opacity: allowOverlap ? overlapOpacity : 1, zIndex: indexInLayer + 1, pointerEvents: "auto", onClick: isBlockClickable ? handleBlockClick : undefined, cursor: isBlockClickable ? 'pointer' : 'default', children: showLabel && block.label ? (jsx(Text, { fontSize: "xs", lineClamp: 1, color: "white", _dark: { color: 'gray.100' }, children: block.label })) : null }) }, block.id));
     };
+    // ---------- Resolve tracks ----------
     const explicitTrackKeys = Array.from(new Set(expandedBlocks
         .map((item) => item.track)
         .filter((track) => track !== undefined)));
-    if (explicitTrackKeys.length > 0) {
-        const tracks = explicitTrackKeys
-            .map((trackKey) => ({
-            trackKey,
-            blocks: parsedBlocks.filter((item) => item.block.track === trackKey),
-        }))
-            .filter((track) => !hideEmptyTracks || track.blocks.length > 0);
-        return (jsx(VStack, { align: "stretch", gap: gap, children: tracks.map((track, trackIndex) => {
-                const trackBlocks = track.blocks.map((item) => item.block);
-                const prefix = renderTrackPrefix?.({
-                    trackIndex,
-                    trackBlocks,
-                    trackKey: track.trackKey,
-                });
-                const suffix = renderTrackSuffix?.({
-                    trackIndex,
-                    trackBlocks,
-                    trackKey: track.trackKey,
-                });
-                return (jsx(TimeViewportTrackRow, { trackKey: `track-keyed-${String(track.trackKey)}`, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
-            }) }));
+    const resolvedTracks = useMemo(() => {
+        if (explicitTrackKeys.length > 0) {
+            return explicitTrackKeys
+                .map((trackKey) => ({
+                trackKey: `track-keyed-${String(trackKey)}`,
+                trackKeyRaw: trackKey,
+                blocks: parsedBlocks.filter((item) => item.block.track === trackKey),
+            }))
+                .filter((track) => !hideEmptyTracks || track.blocks.length > 0);
+        }
+        const autoPackedTracks = (() => {
+            const sortedBlocks = [...parsedBlocks]
+                .filter(({ startMs, endMs }) => Number.isFinite(startMs) && Number.isFinite(endMs))
+                .sort((a, b) => {
+                if (a.startMs === b.startMs)
+                    return a.endMs - b.endMs;
+                return a.startMs - b.startMs;
+            });
+            const trackLastEndTimes = [];
+            const tracks = [];
+            sortedBlocks.forEach((item) => {
+                const trackIndex = trackLastEndTimes.findIndex((endMs) => item.startMs >= endMs);
+                if (trackIndex === -1) {
+                    trackLastEndTimes.push(item.endMs);
+                    tracks.push([item]);
+                }
+                else {
+                    trackLastEndTimes[trackIndex] = item.endMs;
+                    tracks[trackIndex].push(item);
+                }
+            });
+            return tracks;
+        })();
+        const packed = allowOverlap ? [parsedBlocks] : autoPackedTracks;
+        return packed.map((track, trackIndex) => ({
+            trackKey: `track-row-${trackIndex}`,
+            trackKeyRaw: undefined,
+            blocks: track,
+        }));
+    }, [allowOverlap, explicitTrackKeys, hideEmptyTracks, parsedBlocks]);
+    // ---------- Render ----------
+    if (virtualize) {
+        return (jsx(VirtualizedTrackList, { tracks: resolvedTracks, resolvedHeight: resolvedHeight, gap: gap, virtualHeight: virtualHeight, overscan: overscan, renderTrackPrefix: renderTrackPrefix, renderTrackSuffix: renderTrackSuffix, renderBlockNode: renderBlockNode }));
     }
-    const autoPackedTracks = (() => {
-        const sortedBlocks = [...parsedBlocks]
-            .filter(({ startMs, endMs }) => Number.isFinite(startMs) && Number.isFinite(endMs))
-            .sort((a, b) => {
-            if (a.startMs === b.startMs)
-                return a.endMs - b.endMs;
-            return a.startMs - b.startMs;
-        });
-        const trackLastEndTimes = [];
-        const tracks = [];
-        sortedBlocks.forEach((item) => {
-            const trackIndex = trackLastEndTimes.findIndex((endMs) => item.startMs >= endMs);
-            if (trackIndex === -1) {
-                trackLastEndTimes.push(item.endMs);
-                tracks.push([item]);
-            }
-            else {
-                trackLastEndTimes[trackIndex] = item.endMs;
-                tracks[trackIndex].push(item);
-            }
-        });
-        return tracks;
-    })();
-    const tracks = allowOverlap ? [parsedBlocks] : autoPackedTracks;
-    return (jsx(VStack, { align: "stretch", gap: gap, children: tracks.map((track, trackIndex) => {
-            const trackBlocks = track.map((item) => item.block);
+    return (jsx(VStack, { align: "stretch", gap: gap, children: resolvedTracks.map((track, trackIndex) => {
+            const trackBlocks = track.blocks.map((item) => item.block);
             const prefix = renderTrackPrefix?.({
                 trackIndex,
                 trackBlocks,
-                trackKey: undefined,
+                trackKey: track.trackKeyRaw,
             });
             const suffix = renderTrackSuffix?.({
                 trackIndex,
                 trackBlocks,
-                trackKey: undefined,
+                trackKey: track.trackKeyRaw,
             });
-            return (jsx(TimeViewportTrackRow, { trackKey: `track-row-${trackIndex}`, blocks: track, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
+            return (jsx(TimeViewportTrackRow, { trackKey: track.trackKey, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
         }) }));
 }
 function TimeRangeZoom({ range, onRangeChange, minDurationMs = DEFAULT_MIN_DURATION_MS, maxDurationMs = DEFAULT_MAX_DURATION_MS, zoomFactor = DEFAULT_ZOOM_FACTOR, resetDurationMs, showResetButton = true, disabled = false, labels, }) {

package/dist/types/components/DatePicker/TimeRangeZoom.d.ts

@@ -105,6 +105,10 @@ export interface TimeViewportGridProps {
     viewportStart?: TimeInput;
     viewportEnd?: TimeInput;
     tickCount?: number;
+    tickStrategy?: 'count' | 'timeUnit';
+    tickUnit?: 'minute' | 'hour' | 'day';
+    tickStep?: number;
+    format?: string;
     minorDivisions?: number;
     majorLineColor?: string;
     minorLineColor?: string;
@@ -138,6 +142,12 @@ export interface TimeViewportBlocksProps {
         trackKey?: string | number;
     }) => ReactNode;
     onBlockClick?: (block: TimeViewportBlockItem) => void;
+    /** Enable virtual scrolling for large track lists. */
+    virtualize?: boolean;
+    /** Fixed pixel height of the scroll container when virtualize is true. Defaults to 400. */
+    virtualHeight?: number;
+    /** Number of off-screen rows to render above/below the visible area. Defaults to 5. */
+    overscan?: number;
 }
 export interface TimeViewportRootProps {
     viewportStart: TimeInput;
@@ -220,8 +230,8 @@ export declare function TimeViewportHeader({ viewportStart, viewportEnd, tickCou
  * Vertical grid lines for measuring block positions in the viewport.
  * Render inside a relative container that also contains blocks.
  */
-export declare function TimeViewportGrid({ viewportStart, viewportEnd, tickCount, minorDivisions, majorLineColor, minorLineColor, showMinorLines, zIndex, animationDurationMs, animationEasing, }: TimeViewportGridProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height, minWidthPx, borderRadius, defaultColorPalette, showLabel, hideWhenOutOfView, hideEmptyTracks, gap, allowOverlap, overlapOpacity, renderTrackPrefix, renderTrackSuffix, onBlockClick, }: TimeViewportBlocksProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimeViewportGrid({ viewportStart, viewportEnd, tickCount, tickStrategy, tickUnit, tickStep, format, minorDivisions, majorLineColor, minorLineColor, showMinorLines, zIndex, animationDurationMs, animationEasing, }: TimeViewportGridProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height, minWidthPx, borderRadius, defaultColorPalette, showLabel, hideWhenOutOfView, hideEmptyTracks, gap, allowOverlap, overlapOpacity, renderTrackPrefix, renderTrackSuffix, onBlockClick, virtualize, virtualHeight, overscan, }: TimeViewportBlocksProps): import("react/jsx-runtime").JSX.Element;
 export declare function TimeRangeZoom({ range, onRangeChange, minDurationMs, maxDurationMs, zoomFactor, resetDurationMs, showResetButton, disabled, labels, }: TimeRangeZoomProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTimeRangeZoom({ range, onRangeChange, minDurationMs, maxDurationMs, zoomFactor, resetDurationMs, disabled, labels, }: TimeRangeZoomProps): UseTimeRangeZoomResult;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "13.0.1-beta.33",
+  "version": "13.0.1-beta.34",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -45,6 +45,7 @@
     "@tanstack/match-sorter-utils": "^8.15.1",
     "@tanstack/react-query": "^5.66.9",
     "@tanstack/react-table": "^8.21.2",
+    "@tanstack/react-virtual": "^3.13.0",
     "@uidotdev/usehooks": "^2.4.1",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",
@@ -64,6 +65,7 @@
     "@storybook/addon-docs": "^10.0.7",
     "@storybook/addon-onboarding": "^10.0.7",
     "@storybook/react-vite": "^10.0.7",
+    "@tanstack/react-virtual": "^3.13.18",
     "@types/ajv-errors": "^2.0.0",
     "@types/json-schema": "^7.0.15",
     "@types/react": "19.0.2",