@papernote/ui 1.10.24 → 1.10.26

package/dist/index.js

@@ -39126,9 +39126,10 @@ const buildGroupColorMap = (columns) => {
  * />
  * ```
  */
-const DataGrid = React.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 = React.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] = React.useState(initialData);
+    const [scrollTop, setScrollTop] = React.useState(0);
     const [editingCell, setEditingCell] = React.useState(null);
     const [editValue, setEditValue] = React.useState('');
     const [sortConfig, setSortConfig] = React.useState(null);
@@ -39187,23 +39188,16 @@ const DataGrid = React.forwardRef(({ data: initialData, columns, onChange, rowHe
             return 'bg-white';
         return '';
     }, [groupColorMap]);
-    // Check if a specific row is frozen
-    const isRowFrozen = React.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
     React.useEffect(() => {
         setData(initialData);
     }, [initialData]);
+    // Handle scroll for virtualization
+    const handleScroll = React.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 = React.useMemo(() => {
@@ -39306,6 +39300,30 @@ const DataGrid = React.forwardRef(({ data: initialData, columns, onChange, rowHe
         });
         return [...frozenData, ...filtered];
     }, [sortedData, filters, columns, frozenRows]);
+    // Calculate visible rows for virtualization
+    const visibleRowRange = React.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 = React.useCallback((rowIndex, colIndex, cellElement) => {
         if (readOnly)
@@ -39530,17 +39548,15 @@ const DataGrid = React.forwardRef(({ data: initialData, columns, onChange, rowHe
         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);
     }, []);
@@ -39558,7 +39574,7 @@ const DataGrid = React.forwardRef(({ data: initialData, columns, onChange, rowHe
                                 : 'Freeze Row' }) })), enableExport && (jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", icon: jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" }), onClick: exportToCSV, children: "Export" })), enableSave && onSave && (jsxRuntime.jsx(Button, { variant: "primary", size: "sm", icon: jsxRuntime.jsx(lucideReact.Save, { className: "h-4 w-4" }), onClick: handleSave, loading: isSaving, children: "Save" })), toolbarActions] })), filters.length > 0 && (jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2 py-1 bg-primary-100 text-primary-700 rounded text-xs", children: [jsxRuntime.jsxs("span", { className: "font-medium", children: [column?.header, ":"] }), jsxRuntime.jsx("span", { children: filter.value }), jsxRuntime.jsx("button", { onClick: () => clearFilter(filter.key), className: "ml-1 hover:bg-primary-200 rounded p-0.5", children: jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }) })] }, filter.key));
-                }) })), jsxRuntime.jsx("div", { ref: tableRef, className: "relative overflow-auto border border-stone-200 rounded-lg bg-white", style: { height }, onKeyDown: handleKeyDown, tabIndex: 0, children: jsxRuntime.jsxs("table", { className: "border-collapse", style: { tableLayout: 'auto' }, children: [jsxRuntime.jsx("thead", { className: "sticky top-0 z-20 bg-stone-100", children: jsxRuntime.jsxs("tr", { children: [rowHeaders && (jsxRuntime.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) => {
+                }) })), jsxRuntime.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: jsxRuntime.jsxs("table", { className: "border-collapse", style: { tableLayout: 'auto' }, children: [jsxRuntime.jsx("thead", { className: "sticky top-0 z-20 bg-stone-100", children: jsxRuntime.jsxs("tr", { children: [rowHeaders && (jsxRuntime.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);
@@ -39574,27 +39590,51 @@ const DataGrid = React.forwardRef(({ data: initialData, columns, onChange, rowHe
                                                                             if (e.key === 'Escape')
                                                                                 setActiveFilter(null);
                                                                         }, autoFocus: true }), jsxRuntime.jsxs(Stack, { direction: "horizontal", spacing: "sm", className: "mt-2", children: [jsxRuntime.jsx(Button, { size: "sm", variant: "ghost", onClick: () => setActiveFilter(null), children: "Cancel" }), jsxRuntime.jsx(Button, { size: "sm", variant: "primary", onClick: applyFilter, children: "Apply" })] })] }))] }))] }) }, column.key));
-                                    })] }) }), jsxRuntime.jsx("tbody", { children: filteredData.map((row, rowIndex) => {
-                                const isFrozen = isRowFrozen(rowIndex);
-                                const isZebra = zebraStripes && rowIndex % 2 === 1;
-                                return (jsxRuntime.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 && (jsxRuntime.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 (jsxRuntime.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 ? (jsxRuntime.jsx(FormulaAutocomplete, { value: editValue, onChange: setEditValue, onComplete: handleEditComplete, onCancel: handleEditCancel, anchorRect: editingCellRect, autoFocus: true })) : (jsxRuntime.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));
-                            }) })] }) }), jsxRuntime.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: [jsxRuntime.jsxs("span", { children: [filteredData.length, " row", filteredData.length !== 1 ? 's' : '', filters.length > 0 && ` (filtered)`] }), selectedCell && (jsxRuntime.jsxs("span", { children: [colIndexToLetter(selectedCell.col), selectedCell.row + 1, data[selectedCell.row]?.[selectedCell.col]?.formula && (jsxRuntime.jsx("span", { className: "ml-2 text-blue-600", children: data[selectedCell.row][selectedCell.col].formula }))] }))] })] }));
+                                    })] }) }), jsxRuntime.jsxs("tbody", { children: [virtualized && visibleRowRange.paddingTop > 0 && (jsxRuntime.jsx("tr", { style: { height: visibleRowRange.paddingTop }, children: jsxRuntime.jsx("td", { colSpan: columns.length + (rowHeaders ? 1 : 0) }) })), filteredData.slice(0, visibleRowRange.frozenRowCount).map((row, rowIndex) => {
+                                    const isZebra = zebraStripes && rowIndex % 2 === 1;
+                                    return (jsxRuntime.jsxs("tr", { className: `${isZebra ? 'bg-paper-50' : 'bg-white'} sticky z-10 shadow-sm`, style: {
+                                            top: `${40 + rowIndex * virtualRowHeight}px`,
+                                        }, children: [rowHeaders && (jsxRuntime.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 (jsxRuntime.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 ? (jsxRuntime.jsx(FormulaAutocomplete, { value: editValue, onChange: setEditValue, onComplete: handleEditComplete, onCancel: handleEditCancel, anchorRect: editingCellRect, autoFocus: true })) : (jsxRuntime.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 (jsxRuntime.jsxs("tr", { className: `${isZebra ? 'bg-paper-50' : 'bg-white'}`, style: {
+                                            height: virtualized ? virtualRowHeight : undefined,
+                                        }, children: [rowHeaders && (jsxRuntime.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 (jsxRuntime.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 ? (jsxRuntime.jsx(FormulaAutocomplete, { value: editValue, onChange: setEditValue, onComplete: handleEditComplete, onCancel: handleEditCancel, anchorRect: editingCellRect, autoFocus: true })) : (jsxRuntime.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 && (jsxRuntime.jsx("tr", { style: { height: visibleRowRange.paddingBottom }, children: jsxRuntime.jsx("td", { colSpan: columns.length + (rowHeaders ? 1 : 0) }) }))] })] }) }), jsxRuntime.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: [jsxRuntime.jsxs("span", { children: [filteredData.length, " row", filteredData.length !== 1 ? 's' : '', filters.length > 0 && ` (filtered)`] }), selectedCell && (jsxRuntime.jsxs("span", { children: [colIndexToLetter(selectedCell.col), selectedCell.row + 1, data[selectedCell.row]?.[selectedCell.col]?.formula && (jsxRuntime.jsx("span", { className: "ml-2 text-blue-600", children: data[selectedCell.row][selectedCell.col].formula }))] }))] })] }));
 });
 DataGrid.displayName = 'DataGrid';