@papernote/ui 1.10.24 → 1.10.26

package/dist/components/DataGrid.d.ts

@@ -123,6 +123,12 @@ export interface DataGridProps {
     className?: string;
     /** Density */
     density?: 'compact' | 'normal' | 'comfortable';
+    /** Enable virtual scrolling for large datasets (only renders visible rows) */
+    virtualized?: boolean;
+    /** Row height in pixels when virtualized (default: 40) */
+    virtualRowHeight?: number;
+    /** Number of rows to render above/below visible area (default: 5) */
+    virtualOverscan?: number;
 }
 /**
  * DataGrid imperative handle

package/dist/components/DataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../src/components/DataGrid.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../src/components/DataGrid.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -5755,6 +5755,12 @@ interface DataGridProps {
     className?: string;
     /** Density */
     density?: 'compact' | 'normal' | 'comfortable';
+    /** Enable virtual scrolling for large datasets (only renders visible rows) */
+    virtualized?: boolean;
+    /** Row height in pixels when virtualized (default: 40) */
+    virtualRowHeight?: number;
+    /** Number of rows to render above/below visible area (default: 5) */
+    virtualOverscan?: number;
 }
 /**
  * DataGrid imperative handle

package/dist/index.esm.js

@@ -39106,9 +39106,10 @@ const buildGroupColorMap = (columns) => {
  * />
  * ```
  */
-const DataGrid = forwardRef(({ data: initialData, columns, onChange, rowHeaders = false, frozenRows: frozenRowsProp = 'none', frozenColumns = 0, showFreezeRowToggle = false, zebraStripes = false, formulas = false, readOnly = false, height = 400, width = '100%', showToolbar = false, title, enableExport = false, exportFileName = 'export.csv', enableSave = false, onSave, toolbarActions, className = '', density = 'normal', }, ref) => {
+const DataGrid = forwardRef(({ data: initialData, columns, onChange, rowHeaders = false, frozenRows: frozenRowsProp = 'none', frozenColumns = 0, showFreezeRowToggle = false, zebraStripes = false, formulas = false, readOnly = false, height = 400, width = '100%', showToolbar = false, title, enableExport = false, exportFileName = 'export.csv', enableSave = false, onSave, toolbarActions, className = '', density = 'normal', virtualized = false, virtualRowHeight = 40, virtualOverscan = 5, }, ref) => {
     // State
     const [data, setData] = useState(initialData);
+    const [scrollTop, setScrollTop] = useState(0);
     const [editingCell, setEditingCell] = useState(null);
     const [editValue, setEditValue] = useState('');
     const [sortConfig, setSortConfig] = useState(null);
@@ -39167,23 +39168,16 @@ const DataGrid = forwardRef(({ data: initialData, columns, onChange, rowHeaders
             return 'bg-white';
         return '';
     }, [groupColorMap]);
-    // Check if a specific row is frozen
-    const isRowFrozen = useCallback((rowIndex) => {
-        if (frozenRowsState === 'none')
-            return false;
-        if (frozenRowsState === 'first')
-            return rowIndex === 0;
-        if (frozenRowsState === 'selected') {
-            return selectedCell ? rowIndex === selectedCell.row : false;
-        }
-        if (typeof frozenRowsState === 'number')
-            return rowIndex < frozenRowsState;
-        return false;
-    }, [frozenRowsState, selectedCell]);
     // Update data when initialData changes
     useEffect(() => {
         setData(initialData);
     }, [initialData]);
+    // Handle scroll for virtualization
+    const handleScroll = useCallback((e) => {
+        if (virtualized) {
+            setScrollTop(e.currentTarget.scrollTop);
+        }
+    }, [virtualized]);
     // Get computed data with formulas evaluated
     // Uses a cache to handle formula dependencies (formulas referencing other formulas)
     const computedData = useMemo(() => {
@@ -39286,6 +39280,30 @@ const DataGrid = forwardRef(({ data: initialData, columns, onChange, rowHeaders
         });
         return [...frozenData, ...filtered];
     }, [sortedData, filters, columns, frozenRows]);
+    // Calculate visible rows for virtualization
+    const visibleRowRange = useMemo(() => {
+        if (!virtualized) {
+            return { startIndex: 0, endIndex: filteredData.length, paddingTop: 0, paddingBottom: 0, frozenRowCount: 0 };
+        }
+        const containerHeight = typeof height === 'number' ? height : 400;
+        const headerHeight = 40; // Approximate header height
+        const availableHeight = containerHeight - headerHeight;
+        // Account for frozen rows
+        const frozenRowCount = frozenRows;
+        const scrollableData = filteredData.slice(frozenRowCount);
+        const visibleCount = Math.ceil(availableHeight / virtualRowHeight);
+        const startIndex = Math.max(0, Math.floor(scrollTop / virtualRowHeight) - virtualOverscan);
+        const endIndex = Math.min(scrollableData.length, startIndex + visibleCount + (virtualOverscan * 2));
+        const paddingTop = startIndex * virtualRowHeight;
+        const paddingBottom = Math.max(0, (scrollableData.length - endIndex) * virtualRowHeight);
+        return {
+            startIndex: startIndex + frozenRowCount,
+            endIndex: endIndex + frozenRowCount,
+            paddingTop,
+            paddingBottom,
+            frozenRowCount
+        };
+    }, [virtualized, filteredData.length, scrollTop, height, virtualRowHeight, virtualOverscan, frozenRows]);
     // Handle cell edit start
     const handleCellDoubleClick = useCallback((rowIndex, colIndex, cellElement) => {
         if (readOnly)
@@ -39510,17 +39528,15 @@ const DataGrid = forwardRef(({ data: initialData, columns, onChange, rowHeaders
         if (column.type === 'currency' && !isNaN(numVal)) {
             const decimals = column.format?.decimals ?? 2;
             const prefix = column.format?.prefix ?? '$';
-            return `${prefix}${numVal.toFixed(decimals)}`;
+            return `${prefix}${numVal.toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}`;
         }
         if (column.type === 'percent' && !isNaN(numVal)) {
-            const decimals = column.format?.decimals ?? 1;
-            return `${(numVal * 100).toFixed(decimals)}%`;
+            const decimals = column.format?.decimals ?? 2;
+            return `${(numVal * 100).toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}%`;
         }
         if (column.type === 'number' && !isNaN(numVal)) {
-            const decimals = column.format?.decimals;
-            if (decimals !== undefined) {
-                return numVal.toFixed(decimals);
-            }
+            const decimals = column.format?.decimals ?? 0;
+            return numVal.toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
         }
         return String(value);
     }, []);
@@ -39538,7 +39554,7 @@ const DataGrid = forwardRef(({ data: initialData, columns, onChange, rowHeaders
                                 : 'Freeze Row' }) })), enableExport && (jsx(Button, { variant: "ghost", size: "sm", icon: jsx(Download, { className: "h-4 w-4" }), onClick: exportToCSV, children: "Export" })), enableSave && onSave && (jsx(Button, { variant: "primary", size: "sm", icon: jsx(Save, { className: "h-4 w-4" }), onClick: handleSave, loading: isSaving, children: "Save" })), toolbarActions] })), filters.length > 0 && (jsx(Stack, { direction: "horizontal", spacing: "sm", className: "mb-2 px-1 flex-wrap", children: filters.map((filter) => {
                     const column = columns.find((c) => c.key === filter.key);
                     return (jsxs("div", { className: "inline-flex items-center gap-1 px-2 py-1 bg-primary-100 text-primary-700 rounded text-xs", children: [jsxs("span", { className: "font-medium", children: [column?.header, ":"] }), jsx("span", { children: filter.value }), jsx("button", { onClick: () => clearFilter(filter.key), className: "ml-1 hover:bg-primary-200 rounded p-0.5", children: jsx(X, { className: "h-3 w-3" }) })] }, filter.key));
-                }) })), jsx("div", { ref: tableRef, className: "relative overflow-auto border border-stone-200 rounded-lg bg-white", style: { height }, onKeyDown: handleKeyDown, tabIndex: 0, children: jsxs("table", { className: "border-collapse", style: { tableLayout: 'auto' }, children: [jsx("thead", { className: "sticky top-0 z-20 bg-stone-100", children: jsxs("tr", { children: [rowHeaders && (jsx("th", { className: `${cellPadding} border-b border-r border-stone-200 bg-stone-100 text-left font-semibold text-ink-600 sticky left-0 z-30`, style: { width: 50, minWidth: 50, maxWidth: 50 }, children: "#" })), columns.map((column, colIndex) => {
+                }) })), jsx("div", { ref: tableRef, className: "relative overflow-auto border border-stone-200 rounded-lg bg-white", style: { height }, onKeyDown: handleKeyDown, onScroll: handleScroll, tabIndex: 0, children: jsxs("table", { className: "border-collapse", style: { tableLayout: 'auto' }, children: [jsx("thead", { className: "sticky top-0 z-20 bg-stone-100", children: jsxs("tr", { children: [rowHeaders && (jsx("th", { className: `${cellPadding} border-b border-r border-stone-200 bg-stone-100 text-left font-semibold text-ink-600 sticky left-0 z-30`, style: { width: 50, minWidth: 50, maxWidth: 50 }, children: "#" })), columns.map((column, colIndex) => {
                                         const isFrozen = colIndex < frozenColumns;
                                         const leftOffset = rowHeaders ? 50 + columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0) : columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0);
                                         const headerBgClass = getHeaderBgClass(column);
@@ -39554,27 +39570,51 @@ const DataGrid = forwardRef(({ data: initialData, columns, onChange, rowHeaders
                                                                             if (e.key === 'Escape')
                                                                                 setActiveFilter(null);
                                                                         }, autoFocus: true }), jsxs(Stack, { direction: "horizontal", spacing: "sm", className: "mt-2", children: [jsx(Button, { size: "sm", variant: "ghost", onClick: () => setActiveFilter(null), children: "Cancel" }), jsx(Button, { size: "sm", variant: "primary", onClick: applyFilter, children: "Apply" })] })] }))] }))] }) }, column.key));
-                                    })] }) }), jsx("tbody", { children: filteredData.map((row, rowIndex) => {
-                                const isFrozen = isRowFrozen(rowIndex);
-                                const isZebra = zebraStripes && rowIndex % 2 === 1;
-                                return (jsxs("tr", { className: `${isZebra ? 'bg-paper-50' : 'bg-white'} ${isFrozen ? 'sticky z-10' : ''} ${isFrozen ? 'shadow-sm' : ''}`, style: {
-                                        top: isFrozen ? `${40 + rowIndex * 40}px` : undefined,
-                                    }, children: [rowHeaders && (jsx("td", { className: `${cellPadding} border-b border-r border-stone-200 bg-stone-50 text-ink-500 font-medium sticky left-0 z-10`, style: { width: 50, minWidth: 50, maxWidth: 50 }, children: Array.isArray(rowHeaders) ? rowHeaders[rowIndex] : rowIndex + 1 })), row.map((cell, colIndex) => {
-                                            const column = columns[colIndex];
-                                            const isFrozenCol = colIndex < frozenColumns;
-                                            const isEditing = editingCell?.row === rowIndex && editingCell?.col === colIndex;
-                                            const isSelected = selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
-                                            const hasFormula = !!cell?.formula;
-                                            const leftOffset = rowHeaders
-                                                ? 50 + columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0)
-                                                : columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0);
-                                            const cellBgClass = getCellBgClass(column, isZebra, isFrozenCol);
-                                            return (jsx("td", { className: `${cellPadding} border-b border-r border-stone-200 text-${column?.align || 'left'} ${isFrozenCol ? 'sticky z-10' : ''} ${cellBgClass} ${isSelected ? 'ring-2 ring-inset ring-primary-500' : ''} ${hasFormula ? 'bg-blue-50' : ''} ${cell?.className || ''}`, style: {
-                                                    left: isFrozenCol ? leftOffset : undefined,
-                                                    minWidth: column?.minWidth || 80,
-                                                }, onClick: () => handleCellClick(rowIndex, colIndex), onDoubleClick: (e) => handleCellDoubleClick(rowIndex, colIndex, e.currentTarget), children: isEditing ? (formulas ? (jsx(FormulaAutocomplete, { value: editValue, onChange: setEditValue, onComplete: handleEditComplete, onCancel: handleEditCancel, anchorRect: editingCellRect, autoFocus: true })) : (jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleEditComplete, onKeyDown: handleEditKeyDown, className: "w-full h-full border-none outline-none bg-transparent", style: { margin: '-4px', padding: '4px' } }))) : (formatValue(cell?.value, column)) }, colIndex));
-                                        })] }, rowIndex));
-                            }) })] }) }), jsxs("div", { className: "flex items-center justify-between px-2 py-1 text-xs text-ink-500 border-t border-stone-200 bg-stone-50 rounded-b-lg", children: [jsxs("span", { children: [filteredData.length, " row", filteredData.length !== 1 ? 's' : '', filters.length > 0 && ` (filtered)`] }), selectedCell && (jsxs("span", { children: [colIndexToLetter(selectedCell.col), selectedCell.row + 1, data[selectedCell.row]?.[selectedCell.col]?.formula && (jsx("span", { className: "ml-2 text-blue-600", children: data[selectedCell.row][selectedCell.col].formula }))] }))] })] }));
+                                    })] }) }), jsxs("tbody", { children: [virtualized && visibleRowRange.paddingTop > 0 && (jsx("tr", { style: { height: visibleRowRange.paddingTop }, children: jsx("td", { colSpan: columns.length + (rowHeaders ? 1 : 0) }) })), filteredData.slice(0, visibleRowRange.frozenRowCount).map((row, rowIndex) => {
+                                    const isZebra = zebraStripes && rowIndex % 2 === 1;
+                                    return (jsxs("tr", { className: `${isZebra ? 'bg-paper-50' : 'bg-white'} sticky z-10 shadow-sm`, style: {
+                                            top: `${40 + rowIndex * virtualRowHeight}px`,
+                                        }, children: [rowHeaders && (jsx("td", { className: `${cellPadding} border-b border-r border-stone-200 bg-stone-50 text-ink-500 font-medium sticky left-0 z-10`, style: { width: 50, minWidth: 50, maxWidth: 50 }, children: Array.isArray(rowHeaders) ? rowHeaders[rowIndex] : rowIndex + 1 })), row.map((cell, colIndex) => {
+                                                const column = columns[colIndex];
+                                                const isFrozenCol = colIndex < frozenColumns;
+                                                const isEditing = editingCell?.row === rowIndex && editingCell?.col === colIndex;
+                                                const isSelected = selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
+                                                const hasFormula = !!cell?.formula;
+                                                const leftOffset = rowHeaders
+                                                    ? 50 + columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0)
+                                                    : columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0);
+                                                const cellBgClass = getCellBgClass(column, isZebra, isFrozenCol);
+                                                return (jsx("td", { className: `${cellPadding} border-b border-r border-stone-200 text-${column?.align || 'left'} ${isFrozenCol ? 'sticky z-10' : ''} ${cellBgClass} ${isSelected ? 'ring-2 ring-inset ring-primary-500' : ''} ${hasFormula ? 'bg-blue-50' : ''} ${cell?.className || ''}`, style: {
+                                                        left: isFrozenCol ? leftOffset : undefined,
+                                                        minWidth: column?.minWidth || 80,
+                                                        height: virtualized ? virtualRowHeight : undefined,
+                                                    }, onClick: () => handleCellClick(rowIndex, colIndex), onDoubleClick: (e) => handleCellDoubleClick(rowIndex, colIndex, e.currentTarget), children: isEditing ? (formulas ? (jsx(FormulaAutocomplete, { value: editValue, onChange: setEditValue, onComplete: handleEditComplete, onCancel: handleEditCancel, anchorRect: editingCellRect, autoFocus: true })) : (jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleEditComplete, onKeyDown: handleEditKeyDown, className: "w-full h-full border-none outline-none bg-transparent", style: { margin: '-4px', padding: '4px' } }))) : (formatValue(cell?.value, column)) }, colIndex));
+                                            })] }, `frozen-${rowIndex}`));
+                                }), filteredData
+                                    .slice(virtualized ? Math.max(visibleRowRange.startIndex, visibleRowRange.frozenRowCount) : visibleRowRange.frozenRowCount, virtualized ? visibleRowRange.endIndex : filteredData.length)
+                                    .map((row, idx) => {
+                                    const rowIndex = virtualized
+                                        ? Math.max(visibleRowRange.startIndex, visibleRowRange.frozenRowCount) + idx
+                                        : visibleRowRange.frozenRowCount + idx;
+                                    const isZebra = zebraStripes && rowIndex % 2 === 1;
+                                    return (jsxs("tr", { className: `${isZebra ? 'bg-paper-50' : 'bg-white'}`, style: {
+                                            height: virtualized ? virtualRowHeight : undefined,
+                                        }, children: [rowHeaders && (jsx("td", { className: `${cellPadding} border-b border-r border-stone-200 bg-stone-50 text-ink-500 font-medium sticky left-0 z-10`, style: { width: 50, minWidth: 50, maxWidth: 50 }, children: Array.isArray(rowHeaders) ? rowHeaders[rowIndex] : rowIndex + 1 })), row.map((cell, colIndex) => {
+                                                const column = columns[colIndex];
+                                                const isFrozenCol = colIndex < frozenColumns;
+                                                const isEditing = editingCell?.row === rowIndex && editingCell?.col === colIndex;
+                                                const isSelected = selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
+                                                const hasFormula = !!cell?.formula;
+                                                const leftOffset = rowHeaders
+                                                    ? 50 + columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0)
+                                                    : columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0);
+                                                const cellBgClass = getCellBgClass(column, isZebra, isFrozenCol);
+                                                return (jsx("td", { className: `${cellPadding} border-b border-r border-stone-200 text-${column?.align || 'left'} ${isFrozenCol ? 'sticky z-10' : ''} ${cellBgClass} ${isSelected ? 'ring-2 ring-inset ring-primary-500' : ''} ${hasFormula ? 'bg-blue-50' : ''} ${cell?.className || ''}`, style: {
+                                                        left: isFrozenCol ? leftOffset : undefined,
+                                                        minWidth: column?.minWidth || 80,
+                                                    }, onClick: () => handleCellClick(rowIndex, colIndex), onDoubleClick: (e) => handleCellDoubleClick(rowIndex, colIndex, e.currentTarget), children: isEditing ? (formulas ? (jsx(FormulaAutocomplete, { value: editValue, onChange: setEditValue, onComplete: handleEditComplete, onCancel: handleEditCancel, anchorRect: editingCellRect, autoFocus: true })) : (jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleEditComplete, onKeyDown: handleEditKeyDown, className: "w-full h-full border-none outline-none bg-transparent", style: { margin: '-4px', padding: '4px' } }))) : (formatValue(cell?.value, column)) }, colIndex));
+                                            })] }, rowIndex));
+                                }), virtualized && visibleRowRange.paddingBottom > 0 && (jsx("tr", { style: { height: visibleRowRange.paddingBottom }, children: jsx("td", { colSpan: columns.length + (rowHeaders ? 1 : 0) }) }))] })] }) }), jsxs("div", { className: "flex items-center justify-between px-2 py-1 text-xs text-ink-500 border-t border-stone-200 bg-stone-50 rounded-b-lg", children: [jsxs("span", { children: [filteredData.length, " row", filteredData.length !== 1 ? 's' : '', filters.length > 0 && ` (filtered)`] }), selectedCell && (jsxs("span", { children: [colIndexToLetter(selectedCell.col), selectedCell.row + 1, data[selectedCell.row]?.[selectedCell.col]?.formula && (jsx("span", { className: "ml-2 text-blue-600", children: data[selectedCell.row][selectedCell.col].formula }))] }))] })] }));
 });
 DataGrid.displayName = 'DataGrid';