beautiful-grid 1.0.8 → 1.0.10

package/README.md

@@ -18,14 +18,34 @@
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/axisj/beautiful-grid/pulls)
 [![Docs](https://img.shields.io/badge/docs-bgrid.axisj.com-blue?logo=googlechrome&logoColor=white)](https://bgrid.axisj.com)
 
+<p align="center">
+  <a href="https://bgrid.axisj.com">
+    <img src="https://raw.githubusercontent.com/axisj/beautiful-grid/main/site/public/og-image-en.png" alt="BeautifulGrid — Beautiful, Powerful Open-Source React Data Grid" width="100%" />
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://bgrid.axisj.com"><strong>🌐 Interactive Docs & Live Demos</strong></a>&nbsp;&nbsp;•&nbsp;&nbsp;
+  <a href="https://youtu.be/BBq4hPsNDNI"><strong>▶️ Watch 1-Min Walkthrough (YouTube)</strong></a>
+</p>
+
 BeautifulGrid is a high-performance, feature-packed, and beautifully designed open-source React Data Grid for data-heavy business applications. It combines zero-runtime-CSS styling with virtual scrolling, spreadsheet-like cell selection and clipboard operations, built-in and plugin cell editing, multi-level grouped headers, filtering & sorting toolboxes, recoverable column visibility, server/client pagination, pivot table transforms, row reordering, and flexible theming.
 
 Explore live interactive examples and in-depth documentation at [bgrid.axisj.com](https://bgrid.axisj.com).
 
 ---
 
+## Video Walkthrough
+
+Watch 1-million row virtual scrolling, keyboard navigation, and interactive cell editing in action (1 min):
+
+[![BeautifulGrid 1-Minute Walkthrough](https://img.youtube.com/vi/BBq4hPsNDNI/maxresdefault.jpg)](https://youtu.be/BBq4hPsNDNI)
+
+---
+
 ## Table of Contents
 
+- [Video Walkthrough](#video-walkthrough)
 - [Install](#install)
 - [Quick Start](#quick-start)
 - [Core Concepts](#core-concepts)
@@ -180,6 +200,33 @@ export default function OrderGridPage() {
 5. **No Runtime CSS-in-JS**:
    - High performance and zero runtime overhead using static `.bgrid-*` classes and `--bgrid-*` CSS custom properties.
 
+### Variable Row Heights
+
+Use `getRowHeight(row, index)` when rows need explicit, data-driven heights. The callback receives the row's
+`values` object and its current displayed index (after client-side sorting or filtering), and returns the complete
+row height in pixels:
+
+```tsx
+<BGrid
+  itemHeight={20}
+  itemPadding={5}
+  getRowHeight={(row, index) => {
+    if (row.type === 'group') return 48;
+    if (index === 0) return 40;
+    return 30;
+  }}
+  {...props}
+/>
+```
+
+BeautifulGrid caches all returned heights and cumulative offsets when the displayed data, callback, or fixed-height
+fallback changes. Scrolling then finds rows with binary search and does not call `getRowHeight` again. Keep the
+callback reference stable (for example with `useCallback`) to avoid rebuilding the cache on parent renders.
+
+Automatic content-based row height measurement is intentionally not supported, because DOM measurement would make
+large virtualized datasets less predictable. When `getRowHeight` is omitted—or returns a non-finite or non-positive
+value—the existing `itemHeight + itemPadding * 2` fixed height is used.
+
 ---
 
 ## Styling & Theming
@@ -920,6 +967,7 @@ Below is a categorized reference of `<BGrid>` props. For exact TypeScript types,
 | `summaryHeight` | `number` | `30` | Summary row height in pixels. |
 | `itemHeight` | `number` | `15` | Body row content height. |
 | `itemPadding` | `number` | `7` | Body row top/bottom padding (total row height = `itemHeight + itemPadding * 2`). |
+| `getRowHeight` | `(row: T, index: number) => number` | — | Complete rendered height for each displayed row. Invalid values fall back to `itemHeight + itemPadding * 2`. |
 | `frozenColumnIndex` | `number` | `0` | Pinned column boundary index (columns `< frozenColumnIndex` are fixed). |
 | `frozenRowCount` | `number` | `0` | Number of leading rows pinned below the top summary row. |
 | `showLineNumber` | `boolean` | `false` | Shows row index numbers and reorder handles on the left. |

package/cjs/BGrid.js

@@ -92,7 +92,7 @@ function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnI
 }
 function BGrid(_a) {
     var _b, _c, _d;
-    var ref = _a.ref, width = _a.width, height = _a.height, _e = _a.headerHeight, headerHeight = _e === void 0 ? 30 : _e, footerHeight = _a.footerHeight, _f = _a.summaryHeight, summaryHeight = _f === void 0 ? 30 : _f, _g = _a.itemHeight, itemHeight = _g === void 0 ? 15 : _g, _h = _a.itemPadding, itemPadding = _h === void 0 ? 7 : _h, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _j = _a.frozenColumnIndex, frozenColumnIndex = _j === void 0 ? 0 : _j, _k = _a.frozenRowCount, frozenRowCount = _k === void 0 ? 0 : _k, _l = _a.data, data = _l === void 0 ? [] : _l, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _m = _a.scrollTop, scrollTop = _m === void 0 ? 0 : _m, _o = _a.scrollLeft, scrollLeft = _o === void 0 ? 0 : _o, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _p = _a.loading, loading = _p === void 0 ? false : _p, spinning = _a.spinning, disabled = _a.disabled, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _q = _a.editTrigger, editTrigger = _q === void 0 ? 'dblclick' : _q, cellMergeOptions = _a.cellMergeOptions, cellSelectionOptions = _a.cellSelectionOptions, cellNavigationOptions = _a.cellNavigationOptions, variant = _a.variant, summary = _a.summary, columnSortable = _a.columnSortable, reorder = _a.reorder, pivot = _a.pivot, dataControl = _a.dataControl, icons = _a.icons, columnVisibility = _a.columnVisibility, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions;
+    var ref = _a.ref, width = _a.width, height = _a.height, _e = _a.headerHeight, headerHeight = _e === void 0 ? 30 : _e, footerHeight = _a.footerHeight, _f = _a.summaryHeight, summaryHeight = _f === void 0 ? 30 : _f, _g = _a.itemHeight, itemHeight = _g === void 0 ? 15 : _g, _h = _a.itemPadding, itemPadding = _h === void 0 ? 7 : _h, getRowHeight = _a.getRowHeight, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _j = _a.frozenColumnIndex, frozenColumnIndex = _j === void 0 ? 0 : _j, _k = _a.frozenRowCount, frozenRowCount = _k === void 0 ? 0 : _k, _l = _a.data, data = _l === void 0 ? [] : _l, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _m = _a.scrollTop, scrollTop = _m === void 0 ? 0 : _m, _o = _a.scrollLeft, scrollLeft = _o === void 0 ? 0 : _o, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _p = _a.loading, loading = _p === void 0 ? false : _p, spinning = _a.spinning, disabled = _a.disabled, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _q = _a.editTrigger, editTrigger = _q === void 0 ? 'dblclick' : _q, cellMergeOptions = _a.cellMergeOptions, cellSelectionOptions = _a.cellSelectionOptions, cellNavigationOptions = _a.cellNavigationOptions, variant = _a.variant, summary = _a.summary, columnSortable = _a.columnSortable, reorder = _a.reorder, pivot = _a.pivot, dataControl = _a.dataControl, icons = _a.icons, columnVisibility = _a.columnVisibility, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions;
     var warnedSearchControlledRef = React.useRef({
         open: false,
         query: false,
@@ -397,6 +397,7 @@ function BGrid(_a) {
         };
     }, [queryColumns, resolvedData, resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode, resolvedDataQuery, resolvedRowKey]);
     var displayData = processedResult.data;
+    var rowHeightMetrics = React.useMemo(function () { return (0, utils_1.createRowHeightMetrics)(displayData, itemHeight + itemPadding * 2, getRowHeight); }, [displayData, getRowHeight, itemHeight, itemPadding]);
     var resolvedFrozenRowCount = pivotEnabled
         ? 0
         : Math.min(Math.max(Math.floor(frozenRowCount), 0), displayData.length);
@@ -455,7 +456,7 @@ function BGrid(_a) {
         }
     }, [bottomBarHeight, footerHeight]);
     var initialStoreState = React.useMemo(function () {
-        var _a, _b;
+        var _a, _b, _c;
         var initialWidth = width !== undefined ? Math.max(width, 100) : 0;
         var initialHeight = height !== undefined ? Math.max(height, 100) : 0;
         var containerBorderWidth = 1;
@@ -489,7 +490,7 @@ function BGrid(_a) {
             itemPadding: itemPadding,
             frozenColumnIndex: resolvedFrozenColumnIndex,
             frozenRowCount: resolvedFrozenRowCount,
-            frozenRowsHeight: resolvedFrozenRowCount * (itemHeight + itemPadding * 2),
+            frozenRowsHeight: (_a = rowHeightMetrics.offsets[resolvedFrozenRowCount]) !== null && _a !== void 0 ? _a : resolvedFrozenRowCount * (itemHeight + itemPadding * 2),
             frozenColumnsWidth: (0, utils_1.getFrozenColumnsWidth)({
                 showLineNumber: resolvedShowLineNumber,
                 rowChecked: resolvedRowChecked,
@@ -497,7 +498,7 @@ function BGrid(_a) {
                 frozenColumnIndex: resolvedFrozenColumnIndex,
                 columns: computedColumns,
                 dataLength: displayData.length,
-                reorderable: (_a = resolvedReorder === null || resolvedReorder === void 0 ? void 0 : resolvedReorder.enabled) !== null && _a !== void 0 ? _a : false,
+                reorderable: (_b = resolvedReorder === null || resolvedReorder === void 0 ? void 0 : resolvedReorder.enabled) !== null && _b !== void 0 ? _b : false,
             }),
             columns: computedColumns,
             columnsGroup: visibilityProjection.columnsGroup,
@@ -520,7 +521,7 @@ function BGrid(_a) {
             searchOptions: resolvedSearchOptions,
             contextMenuOptions: resolvedContextMenuOptions,
             page: resolvedPage,
-            displayPaginationLength: resolvedPage ? (_b = resolvedPage.displayPaginationLength) !== null && _b !== void 0 ? _b : 5 : 0,
+            displayPaginationLength: resolvedPage ? (_c = resolvedPage.displayPaginationLength) !== null && _c !== void 0 ? _c : 5 : 0,
             loading: loading,
             disabled: resolvedDisabled,
             spinning: spinning,
@@ -558,6 +559,7 @@ function BGrid(_a) {
         summaryHeight,
         itemHeight,
         itemPadding,
+        rowHeightMetrics,
         resolvedPage,
         resolvedSummary,
         checkedIndexesMap,
@@ -609,7 +611,7 @@ function BGrid(_a) {
             onChangeColumns: resolvedOnChangeColumns, width: width, height: height, className: className, style: style, loading: loading, disabled: resolvedDisabled, spinning: spinning, scrollLeft: scrollLeft, scrollTop: scrollTop, headerHeight: headerHeight, footerHeight: footerHeight, bottomBarHeight: resolvedBottomBarHeight,
             scrollbar: resolvedScrollbar,
             status: resolvedStatus,
-            pagination: resolvedPagination, summaryHeight: summaryHeight, itemHeight: itemHeight, itemPadding: itemPadding, frozenColumnIndex: resolvedFrozenColumnIndex,
+            pagination: resolvedPagination, summaryHeight: summaryHeight, itemHeight: itemHeight, itemPadding: itemPadding, rowHeightMetrics: rowHeightMetrics, frozenColumnIndex: resolvedFrozenColumnIndex,
             frozenRowCount: resolvedFrozenRowCount,
             rowChecked: resolvedRowChecked, checkedIndexesMap: checkedIndexesMap, sort: resolvedSort, sortParams: sortParams, dataQuery: resolvedDataQuery,
             dataControl: resolvedDataControl, icons: icons, columnVisibilityState: columnVisibilityState, searchOptions: resolvedSearchOptions,

package/cjs/components/Table.js

@@ -321,10 +321,12 @@ function Table(props) {
         syncActiveCellToBounds: s.syncActiveCellToBounds,
     }); })), setCellSelectionRanges = _19.setCellSelectionRanges, setCellSelecting = _19.setCellSelecting, clearCellSelection = _19.clearCellSelection, setActiveCell = _19.setActiveCell, moveActiveCell = _19.moveActiveCell, setCellNavigationOptions = _19.setCellNavigationOptions, syncActiveCellToBounds = _19.syncActiveCellToBounds;
     var trHeight = itemHeight + itemPadding * 2;
+    var rowHeightMetrics = props.rowHeightMetrics;
+    var variableRowOffsets = rowHeightMetrics.variable ? rowHeightMetrics.offsets : undefined;
     var scrollableBodyHeight = Math.max(contentBodyHeight - frozenRowsHeight, 0);
     var scrollOverscanRows = Math.max(KEYBOARD_NAVIGATION_ROW_WINDOW_SIZE, Math.ceil(scrollableBodyHeight / Math.max(trHeight, 1)));
     var mainViewportWidth = Math.max(width - (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0), 0);
-    var logicalBodyContentHeight = data.length * trHeight;
+    var logicalBodyContentHeight = rowHeightMetrics.totalHeight;
     var virtualScrollWindowMetrics = React.useMemo(function () {
         return (0, utils_1.getVirtualScrollWindowMetrics)({
             logicalContentHeight: logicalBodyContentHeight,
@@ -400,11 +402,21 @@ function Table(props) {
             columns: columns,
             rowCount: data.length,
             rowHeight: trHeight,
+            rowOffsets: variableRowOffsets,
             frozenColumnCount: (_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0,
             frozenRowCount: frozenRowCount,
             frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
         });
-    }, [cellSelectionRanges, columns, data.length, frozenColumnsWidth, frozenRowCount, props.frozenColumnIndex, trHeight]);
+    }, [
+        cellSelectionRanges,
+        columns,
+        data.length,
+        frozenColumnsWidth,
+        frozenRowCount,
+        props.frozenColumnIndex,
+        trHeight,
+        variableRowOffsets,
+    ]);
     var activeFragments = React.useMemo(function () {
         var _a;
         return (0, cellSelectionGeometry_1.getCellSelectionFragments)({
@@ -412,11 +424,21 @@ function Table(props) {
             columns: columns,
             rowCount: data.length,
             rowHeight: trHeight,
+            rowOffsets: variableRowOffsets,
             frozenColumnCount: (_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0,
             frozenRowCount: frozenRowCount,
             frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
         });
-    }, [activeCellRanges, columns, data.length, frozenColumnsWidth, frozenRowCount, props.frozenColumnIndex, trHeight]);
+    }, [
+        activeCellRanges,
+        columns,
+        data.length,
+        frozenColumnsWidth,
+        frozenRowCount,
+        props.frozenColumnIndex,
+        trHeight,
+        variableRowOffsets,
+    ]);
     var activeOverlayFill = activeCellSelected;
     var activeOverlayRing = !!activeCell && !hasMultiCellSelection;
     var renderSelectionOverlay = function (quadrant) {
@@ -440,6 +462,7 @@ function Table(props) {
             overscan: ((_a = props.reorder) === null || _a === void 0 ? void 0 : _a.enabled) ? 1 : scrollOverscanRows,
             leadingOverscan: ((_b = props.reorder) === null || _b === void 0 ? void 0 : _b.enabled) ? 0 : scrollOverscanRows,
             windowSize: ((_c = props.reorder) === null || _c === void 0 ? void 0 : _c.enabled) ? 1 : KEYBOARD_NAVIGATION_ROW_WINDOW_SIZE,
+            rowOffsets: variableRowOffsets,
         });
     }, [
         data.length,
@@ -449,6 +472,7 @@ function Table(props) {
         scrollTop,
         scrollableBodyHeight,
         trHeight,
+        variableRowOffsets,
     ]);
     var frozenRowRange = React.useMemo(function () { return ({ startRowIndex: 0, endRowIndex: frozenRowCount }); }, [frozenRowCount]);
     var scrollableRowRange = React.useMemo(function () { return ({
@@ -640,6 +664,7 @@ function Table(props) {
         frozenRowsHeight: frozenRowsHeight,
         scrollTop: scrollTop,
         trHeight: trHeight,
+        rowOffsets: variableRowOffsets,
     });
     (0, react_1.useEffect)(function () {
         var _a;
@@ -652,6 +677,7 @@ function Table(props) {
             frozenRowsHeight: frozenRowsHeight,
             scrollTop: scrollTop,
             trHeight: trHeight,
+            rowOffsets: variableRowOffsets,
         };
     }, [
         columns,
@@ -662,6 +688,7 @@ function Table(props) {
         frozenRowsHeight,
         scrollTop,
         trHeight,
+        variableRowOffsets,
     ]);
     var markScrollActive = (0, react_1.useCallback)(function () {
         var _a;
@@ -765,6 +792,7 @@ function Table(props) {
             frozenRowCount: frozenRowCount,
             columns: columns,
             rowHeight: trHeight,
+            rowOffsets: variableRowOffsets,
             verticalScrollState: logicalVerticalScrollState,
             viewportInsets: viewportInsets,
         });
@@ -782,6 +810,7 @@ function Table(props) {
         stickyFixedHeight,
         frozenRowsHeight,
         trHeight,
+        variableRowOffsets,
     ]);
     var clearHoveredRow = (0, react_1.useCallback)(function () {
         if (!containerRef.current || hoveredRowIndexesRef.current.length === 0)
@@ -1525,12 +1554,20 @@ function Table(props) {
     ]);
     // [Group 4-1] Frozen rows. A top summary remains a separate band above this body area.
     (0, react_1.useEffect)(function () {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var rowCount = (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : data.length;
         var nextFrozenRowCount = Math.min(Math.max(Math.floor((_c = props.frozenRowCount) !== null && _c !== void 0 ? _c : 0), 0), rowCount);
         setFrozenRowCount(nextFrozenRowCount);
-        setFrozenRowsHeight(nextFrozenRowCount * trHeight);
-    }, [data.length, (_f = props.data) === null || _f === void 0 ? void 0 : _f.length, props.frozenRowCount, setFrozenRowCount, setFrozenRowsHeight, trHeight]);
+        setFrozenRowsHeight((_d = rowHeightMetrics.offsets[nextFrozenRowCount]) !== null && _d !== void 0 ? _d : nextFrozenRowCount * trHeight);
+    }, [
+        data.length,
+        (_f = props.data) === null || _f === void 0 ? void 0 : _f.length,
+        props.frozenRowCount,
+        rowHeightMetrics,
+        setFrozenRowCount,
+        setFrozenRowsHeight,
+        trHeight,
+    ]);
     // [Group 5] Data & columns
     (0, react_1.useEffect)(function () {
         if (props.data !== undefined &&
@@ -1763,6 +1800,7 @@ function Table(props) {
         commitScroll(nextTop, nextLeft);
     }, [commitScroll, data, props.data, props.scrollLeft, props.scrollTop]);
     React.useLayoutEffect(function () {
+        var _a, _b, _c;
         if (!rowScrollRequest)
             return;
         // Prop data reaches the per-grid store in an effect. Wait for that render
@@ -1775,14 +1813,16 @@ function Table(props) {
             return;
         if (scrollableBodyHeight <= 0)
             return;
-        var rowTop = (rowIndex - frozenRowCount) * trHeight;
-        var rowBottom = rowTop + trHeight;
-        var _a = latestScrollRef.current, top = _a.top, left = _a.left;
+        var frozenOffset = (_a = rowHeightMetrics.offsets[frozenRowCount]) !== null && _a !== void 0 ? _a : frozenRowCount * trHeight;
+        var rowTop = ((_b = rowHeightMetrics.offsets[rowIndex]) !== null && _b !== void 0 ? _b : rowIndex * trHeight) - frozenOffset;
+        var rowHeight = (_c = rowHeightMetrics.heights[rowIndex]) !== null && _c !== void 0 ? _c : trHeight;
+        var rowBottom = rowTop + rowHeight;
+        var _d = latestScrollRef.current, top = _d.top, left = _d.left;
         var nextTop = top;
         if (align === 'start')
             nextTop = rowTop;
         else if (align === 'center')
-            nextTop = rowTop - (scrollableBodyHeight - trHeight) / 2;
+            nextTop = rowTop - (scrollableBodyHeight - rowHeight) / 2;
         else if (align === 'end')
             nextTop = rowBottom - scrollableBodyHeight;
         else if (rowTop < top)
@@ -1790,7 +1830,16 @@ function Table(props) {
         else if (rowBottom > top + scrollableBodyHeight)
             nextTop = rowBottom - scrollableBodyHeight;
         commitScroll(nextTop, left);
-    }, [commitScroll, data, frozenRowCount, props.data, rowScrollRequest, scrollableBodyHeight, trHeight]);
+    }, [
+        commitScroll,
+        data,
+        frozenRowCount,
+        props.data,
+        rowHeightMetrics,
+        rowScrollRequest,
+        scrollableBodyHeight,
+        trHeight,
+    ]);
     (0, react_1.useEffect)(function () {
         latestScrollRef.current = { top: scrollTop, left: scrollLeft };
         latestCommittedScrollRef.current = { top: scrollTop, left: scrollLeft };
@@ -1875,6 +1924,7 @@ function Table(props) {
         searchOpen: searchOpen,
         searchOptions: searchOptions,
         trHeight: trHeight,
+        rowOffsets: variableRowOffsets,
         verticalScrollState: logicalVerticalScrollState,
         viewportInsets: keyboardViewportInsets,
     });
@@ -1909,6 +1959,7 @@ function Table(props) {
         searchOpen: searchOpen,
         searchOptions: searchOptions,
         trHeight: trHeight,
+        rowOffsets: variableRowOffsets,
         verticalScrollState: logicalVerticalScrollState,
         viewportInsets: keyboardViewportInsets,
     };
@@ -1926,7 +1977,7 @@ function Table(props) {
         };
         var moveWithArrowKey = function (key, extendSelection, toBoundary) {
             if (toBoundary === void 0) { toBoundary = false; }
-            var _a = keyboardRuntimeRef.current, activeCell = _a.activeCell, cellInteractionSession = _a.cellInteractionSession, cellNavigationOptions = _a.cellNavigationOptions, cellSelectionEnabled = _a.cellSelectionEnabled, columns = _a.columns, commitScroll = _a.commitScroll, dataLength = _a.dataLength, frozenColumnIndex = _a.frozenColumnIndex, frozenRowCount = _a.frozenRowCount, moveActiveCell = _a.moveActiveCell, trHeight = _a.trHeight, verticalScrollState = _a.verticalScrollState, viewportInsets = _a.viewportInsets;
+            var _a = keyboardRuntimeRef.current, activeCell = _a.activeCell, cellInteractionSession = _a.cellInteractionSession, cellNavigationOptions = _a.cellNavigationOptions, cellSelectionEnabled = _a.cellSelectionEnabled, columns = _a.columns, commitScroll = _a.commitScroll, dataLength = _a.dataLength, frozenColumnIndex = _a.frozenColumnIndex, frozenRowCount = _a.frozenRowCount, moveActiveCell = _a.moveActiveCell, trHeight = _a.trHeight, rowOffsets = _a.rowOffsets, verticalScrollState = _a.verticalScrollState, viewportInsets = _a.viewportInsets;
             var container = containerRef.current;
             var activeElement = document.activeElement;
             if (!container ||
@@ -1960,6 +2011,7 @@ function Table(props) {
                 frozenRowCount: frozenRowCount,
                 columns: columns,
                 rowHeight: trHeight,
+                rowOffsets: rowOffsets,
                 verticalScrollState: verticalScrollState,
                 viewportInsets: viewportInsets,
             });
@@ -1994,7 +2046,7 @@ function Table(props) {
         };
         var handleKeyDown = function (evt) {
             var _a, _b, _c, _d, _e;
-            var _f = keyboardRuntimeRef.current, activeCell = _f.activeCell, cellInteractionSession = _f.cellInteractionSession, cellNavigationOptions = _f.cellNavigationOptions, cellSelectionEnabled = _f.cellSelectionEnabled, clearCellSelection = _f.clearCellSelection, clearCellSelectionOnEscape = _f.clearCellSelectionOnEscape, columns = _f.columns, commitCheckboxCell = _f.commitCheckboxCell, commitScroll = _f.commitScroll, copySelectedCells = _f.copySelectedCells, data = _f.data, dataLength = _f.dataLength, disabled = _f.disabled, editable = _f.editable, editItemIndex = _f.editItemIndex, endCellSelectionDrag = _f.endCellSelectionDrag, frozenColumnIndex = _f.frozenColumnIndex, frozenRowCount = _f.frozenRowCount, height = _f.height, handleClick = _f.handleClick, moveActiveCell = _f.moveActiveCell, openCellContextMenu = _f.openCellContextMenu, selectAllCells = _f.selectAllCells, setEditItem = _f.setEditItem, requestSearchOpen = _f.requestSearchOpen, searchOpen = _f.searchOpen, searchOptions = _f.searchOptions, trHeight = _f.trHeight, verticalScrollState = _f.verticalScrollState, viewportInsets = _f.viewportInsets;
+            var _f = keyboardRuntimeRef.current, activeCell = _f.activeCell, cellInteractionSession = _f.cellInteractionSession, cellNavigationOptions = _f.cellNavigationOptions, cellSelectionEnabled = _f.cellSelectionEnabled, clearCellSelection = _f.clearCellSelection, clearCellSelectionOnEscape = _f.clearCellSelectionOnEscape, columns = _f.columns, commitCheckboxCell = _f.commitCheckboxCell, commitScroll = _f.commitScroll, copySelectedCells = _f.copySelectedCells, data = _f.data, dataLength = _f.dataLength, disabled = _f.disabled, editable = _f.editable, editItemIndex = _f.editItemIndex, endCellSelectionDrag = _f.endCellSelectionDrag, frozenColumnIndex = _f.frozenColumnIndex, frozenRowCount = _f.frozenRowCount, height = _f.height, handleClick = _f.handleClick, moveActiveCell = _f.moveActiveCell, openCellContextMenu = _f.openCellContextMenu, selectAllCells = _f.selectAllCells, setEditItem = _f.setEditItem, requestSearchOpen = _f.requestSearchOpen, searchOpen = _f.searchOpen, searchOptions = _f.searchOptions, trHeight = _f.trHeight, rowOffsets = _f.rowOffsets, verticalScrollState = _f.verticalScrollState, viewportInsets = _f.viewportInsets;
             var container = containerRef.current;
             var activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
@@ -2127,6 +2179,7 @@ function Table(props) {
                             frozenRowCount: frozenRowCount,
                             columns: columns,
                             rowHeight: trHeight,
+                            rowOffsets: rowOffsets,
                             verticalScrollState: verticalScrollState,
                             viewportInsets: viewportInsets,
                         });
@@ -2171,6 +2224,7 @@ function Table(props) {
                             frozenRowCount: frozenRowCount,
                             columns: columns,
                             rowHeight: trHeight,
+                            rowOffsets: rowOffsets,
                             verticalScrollState: verticalScrollState,
                             viewportInsets: viewportInsets,
                         });
@@ -2199,6 +2253,7 @@ function Table(props) {
                             frozenRowCount: frozenRowCount,
                             columns: columns,
                             rowHeight: trHeight,
+                            rowOffsets: rowOffsets,
                             verticalScrollState: verticalScrollState,
                             viewportInsets: viewportInsets,
                         });
@@ -2293,7 +2348,7 @@ function Table(props) {
                 if (gateway instanceof HTMLInputElement) {
                     gateway.focus({ preventScroll: true });
                 }
-            }, "data-scroll-variant": scrollbar.variant, "data-vertical-scrollbar": scrollbar.variant !== 'native' && scrollbar.vertical.visible ? 'visible' : 'hidden', "data-bgrid-cell-selection-enabled": cellSelectionEnabled ? 'true' : 'false', "data-bgrid-frozen-columns": ((_5 = props.frozenColumnIndex) !== null && _5 !== void 0 ? _5 : 0) > 0 ? 'true' : 'false', "data-bgrid-disabled": disabled ? 'true' : undefined },
+            }, "data-scroll-variant": scrollbar.variant, "data-vertical-scrollbar": scrollbar.variant !== 'native' && scrollbar.vertical.visible ? 'visible' : 'hidden', "data-bgrid-cell-selection-enabled": cellSelectionEnabled ? 'true' : 'false', "data-bgrid-frozen-columns": ((_5 = props.frozenColumnIndex) !== null && _5 !== void 0 ? _5 : 0) > 0 ? 'true' : 'false', "data-bgrid-disabled": disabled ? 'true' : undefined, "data-bgrid-variable-row-height": rowHeightMetrics.variable ? 'true' : undefined },
             scrollbar.variant !== 'native' && scrollbar.vertical.visible && (React.createElement("div", { className: 'bgrid-vertical-scrollbar-gutter', "aria-hidden": 'true' })),
             scrollbar.variant !== 'native' && scrollbar.vertical.visible && (React.createElement("div", { className: 'bgrid-vertical-scrollbar-area', style: {
                     top: 0,
@@ -2332,17 +2387,17 @@ function Table(props) {
                     React.createElement("div", { className: 'bgrid-body-scroll-content', style: { height: virtualScrollWindowMetrics.physicalContentHeight } },
                         frozenRowCount > 0 && (React.createElement("div", { className: 'bgrid-frozen-rows-layer', style: { height: frozenRowsHeight, top: stickyTopHeight }, "data-bgrid-row-band": 'frozen' },
                             (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement("div", { className: 'bgrid-frozen-rows-left bgrid-frozen-column-boundary', style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-rows-left' },
-                                React.createElement(TableBodyFrozen_1.default, { scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top-frozen', quadrant: 'top-left', allowRowReorder: false }),
+                                React.createElement(TableBodyFrozen_1.default, { rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top-frozen', quadrant: 'top-left', allowRowReorder: false }),
                                 renderSelectionOverlay('top-left'))),
                             React.createElement("div", { className: 'bgrid-frozen-rows-main', style: { left: frozenColumnsWidth }, role: 'rfdg-frozen-rows-main' },
-                                React.createElement(TableBody_1.default, { scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top', quadrant: 'top-main', allowRowReorder: false }),
+                                React.createElement(TableBody_1.default, { rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top', quadrant: 'top-main', allowRowReorder: false }),
                                 renderSelectionOverlay('top-main')))),
                         React.createElement("div", { className: 'bgrid-scrollable-rows-layer', style: { height: physicalScrollableRowsHeight }, "data-bgrid-row-band": 'scrollable' },
                             (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenScrollContent, { style: {
                                     width: frozenColumnsWidth,
                                     height: physicalScrollableRowsHeight,
                                 }, role: 'rfdg-frozen-scroll-container' },
-                                React.createElement(TableBodyFrozen_1.default, { scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, style: frozenScrollableBodyStyle, quadrant: 'body-left', onRowReorderPointerDown: rowReorderController.onPointerDown, onRowReorderKeyDown: rowReorderController.onKeyDown }),
+                                React.createElement(TableBodyFrozen_1.default, { rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, style: frozenScrollableBodyStyle, quadrant: 'body-left', onRowReorderPointerDown: rowReorderController.onPointerDown, onRowReorderKeyDown: rowReorderController.onKeyDown }),
                                 renderSelectionOverlay('body-left'))),
                             React.createElement(ScrollContent, { style: {
                                     left: frozenColumnsWidth,
@@ -2351,7 +2406,7 @@ function Table(props) {
                                         : visibleScrollableRows.paddingTop,
                                     height: physicalScrollableRowsHeight,
                                 } },
-                                React.createElement(TableBody_1.default, { scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, quadrant: 'body-main' }),
+                                React.createElement(TableBody_1.default, { rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, quadrant: 'body-main' }),
                                 renderSelectionOverlay('body-main')))),
                     summary && summary.position === 'bottom' && (React.createElement(SummaryContainer, { position: 'bottom', style: { height: summaryHeight, bottom: 0 }, role: 'rfdg-summary-container' },
                         (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenSummary, { style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-summary' },
@@ -2432,6 +2487,7 @@ function getCellPosition(target, container) {
     return { rowIndex: rowIndex, columnIndex: columnIndex, rowSpan: rowSpan };
 }
 function getCellPositionFromPointer(_a) {
+    var _b;
     var clientX = _a.clientX, clientY = _a.clientY, bodyContainer = _a.bodyContainer, scrollContainer = _a.scrollContainer, metrics = _a.metrics;
     if (!bodyContainer || !scrollContainer || metrics.columns.length === 0 || metrics.dataLength === 0)
         return undefined;
@@ -2439,10 +2495,17 @@ function getCellPositionFromPointer(_a) {
     var bodyRect = bodyContainer.getBoundingClientRect();
     var frozenRowsBottom = bodyRect.top + metrics.frozenRowsHeight;
     var rowIndex = metrics.frozenRowCount > 0 && clientY < frozenRowsBottom
-        ? (0, coordinate_1.clamp)(Math.floor((clientY - bodyRect.top) / metrics.trHeight), 0, metrics.frozenRowCount - 1)
-        : (0, coordinate_1.clamp)(metrics.frozenRowCount +
-            Math.floor((metrics.scrollTop + (0, coordinate_1.clamp)(clientY - scrollRect.top, 0, Math.max(scrollContainer.clientHeight - 1, 0))) /
-                metrics.trHeight), 0, metrics.dataLength - 1);
+        ? (0, coordinate_1.clamp)(metrics.rowOffsets
+            ? (0, utils_1.getRowIndexAtOffset)(metrics.rowOffsets, clientY - bodyRect.top)
+            : Math.floor((clientY - bodyRect.top) / metrics.trHeight), 0, metrics.frozenRowCount - 1)
+        : (0, coordinate_1.clamp)(metrics.rowOffsets
+            ? (0, utils_1.getRowIndexAtOffset)(metrics.rowOffsets, ((_b = metrics.rowOffsets[metrics.frozenRowCount]) !== null && _b !== void 0 ? _b : 0) +
+                metrics.scrollTop +
+                (0, coordinate_1.clamp)(clientY - scrollRect.top, 0, Math.max(scrollContainer.clientHeight - 1, 0)))
+            : metrics.frozenRowCount +
+                Math.floor((metrics.scrollTop +
+                    (0, coordinate_1.clamp)(clientY - scrollRect.top, 0, Math.max(scrollContainer.clientHeight - 1, 0))) /
+                    metrics.trHeight), 0, metrics.dataLength - 1);
     var columnIndex = getColumnIndexFromPointer({
         clientX: clientX,
         bodyContainer: bodyContainer,

package/cjs/components/TableBody.js

@@ -171,7 +171,7 @@ function getSearchMatchTokens(matches) {
 function TableBody(_a) {
     var _this = this;
     var _b, _c;
-    var _d = _a.region, region = _d === void 0 ? 'main' : _d, rowRange = _a.rowRange, style = _a.style, role = _a.role, quadrant = _a.quadrant, _e = _a.allowRowReorder, allowRowReorder = _e === void 0 ? true : _e, onRowReorderPointerDown = _a.onRowReorderPointerDown, onRowReorderKeyDown = _a.onRowReorderKeyDown;
+    var _d = _a.region, region = _d === void 0 ? 'main' : _d, rowRange = _a.rowRange, style = _a.style, role = _a.role, quadrant = _a.quadrant, _e = _a.allowRowReorder, allowRowReorder = _e === void 0 ? true : _e, onRowReorderPointerDown = _a.onRowReorderPointerDown, onRowReorderKeyDown = _a.onRowReorderKeyDown, rowHeightMetrics = _a.rowHeightMetrics;
     var isLeftRegion = region === 'left';
     // [Selector Group 1] Scroll & Dimensions - 스크롤 및 차원
     var _f = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
@@ -262,10 +262,11 @@ function TableBody(_a) {
         React.createElement("tbody", { role: role !== null && role !== void 0 ? role : (isLeftRegion ? 'rfdg-body-frozen' : 'rfdg-body') },
             dataSet.map(function (item, i) {
                 var _a;
-                var _b, _c, _d, _e;
+                var _b, _c, _d, _e, _f;
                 var ri = startIdx + i;
+                var resolvedRowHeight = (_b = rowHeightMetrics === null || rowHeightMetrics === void 0 ? void 0 : rowHeightMetrics.heights[ri]) !== null && _b !== void 0 ? _b : trHeight;
                 var rowStatus = getRowStatusLabel(item.status);
-                var sourceIndex = (_b = sourceIndexByVisibleIndex === null || sourceIndexByVisibleIndex === void 0 ? void 0 : sourceIndexByVisibleIndex[ri]) !== null && _b !== void 0 ? _b : ri;
+                var sourceIndex = (_c = sourceIndexByVisibleIndex === null || sourceIndexByVisibleIndex === void 0 ? void 0 : sourceIndexByVisibleIndex[ri]) !== null && _c !== void 0 ? _c : ri;
                 var trProps = {
                     editable: editable,
                 };
@@ -275,7 +276,7 @@ function TableBody(_a) {
                 var active = rowKey !== undefined && selectedRowKey !== undefined
                     ? (0, utils_1.getCellValueByRowKey)(rowKey, item.values) === selectedRowKey
                     : false;
-                var className = (_c = getRowClassName === null || getRowClassName === void 0 ? void 0 : getRowClassName(sourceIndex, item)) !== null && _c !== void 0 ? _c : '';
+                var className = (_d = getRowClassName === null || getRowClassName === void 0 ? void 0 : getRowClassName(sourceIndex, item)) !== null && _d !== void 0 ? _d : '';
                 var rowReorderRole = (reorderingInfo === null || reorderingInfo === void 0 ? void 0 : reorderingInfo.fromIndex) === undefined || reorderingInfo.toIndex === undefined
                     ? undefined
                     : (0, utils_1.getRowReorderRole)({
@@ -298,16 +299,16 @@ function TableBody(_a) {
                         : reorderingInfo.toIndex > reorderingInfo.fromIndex
                             ? 'down'
                             : undefined;
-                return (React.createElement(TableBodyTr, __assign({ key: ri, itemHeight: itemHeight, itemPadding: itemPadding, active: active, hasOnClick: hasOnClick, className: className + (active ? ' active' : ''), "data-ri": ri, "data-bgrid-row-reorder-role": rowReorderRole, "data-bgrid-row-reorder-phase": rowReorderRole ? reorderingInfo === null || reorderingInfo === void 0 ? void 0 : reorderingInfo.phase : undefined, "data-bgrid-row-reorder-direction": rowReorderRole ? rowReorderDirection : undefined, style: rowReorderRole && rowReorderRole !== 'source'
+                return (React.createElement(TableBodyTr, __assign({ key: ri, itemHeight: itemHeight, itemPadding: itemPadding, rowHeight: resolvedRowHeight, active: active, hasOnClick: hasOnClick, className: className + (active ? ' active' : ''), "data-ri": ri, "data-bgrid-row-reorder-role": rowReorderRole, "data-bgrid-row-reorder-phase": rowReorderRole ? reorderingInfo === null || reorderingInfo === void 0 ? void 0 : reorderingInfo.phase : undefined, "data-bgrid-row-reorder-direction": rowReorderRole ? rowReorderDirection : undefined, style: rowReorderRole && rowReorderRole !== 'source'
                         ? (_a = {}, _a['--bgrid-row-reorder-offset-y'] = "".concat(rowReorderOffset, "px"), _a)
                         : undefined }, trProps),
                     isLeftRegion &&
                         showLineNumber &&
                         (rowReorderEnabled ? (React.createElement(LineNumberTd, { bordered: !hasRowChecked && frozenColumnIndex > 0 && variant !== 'vertical-bordered', className: 'bgrid-line-number-drag', rowStatus: rowStatus, rowIndex: ri },
-                            React.createElement("button", { type: 'button', className: 'bgrid-row-reorder-handle drag-handle', "data-row-reorder-index": ri, "data-dragging": (reorderingInfo === null || reorderingInfo === void 0 ? void 0 : reorderingInfo.fromIndex) === ri ? 'true' : undefined, "aria-label": "Move row ".concat(ri + 1), disabled: !!disabled || !!cellInteractionSession, onPointerDown: function (event) { return onRowReorderPointerDown === null || onRowReorderPointerDown === void 0 ? void 0 : onRowReorderPointerDown(event, ri); }, onKeyDown: function (event) { return onRowReorderKeyDown === null || onRowReorderKeyDown === void 0 ? void 0 : onRowReorderKeyDown(event, ri); } }, (_d = reorder === null || reorder === void 0 ? void 0 : reorder.handleIcon) !== null && _d !== void 0 ? _d : React.createElement(GripVertical_1.GripVertical, null)),
+                            React.createElement("button", { type: 'button', className: 'bgrid-row-reorder-handle drag-handle', "data-row-reorder-index": ri, "data-dragging": (reorderingInfo === null || reorderingInfo === void 0 ? void 0 : reorderingInfo.fromIndex) === ri ? 'true' : undefined, "aria-label": "Move row ".concat(ri + 1), disabled: !!disabled || !!cellInteractionSession, onPointerDown: function (event) { return onRowReorderPointerDown === null || onRowReorderPointerDown === void 0 ? void 0 : onRowReorderPointerDown(event, ri); }, onKeyDown: function (event) { return onRowReorderKeyDown === null || onRowReorderKeyDown === void 0 ? void 0 : onRowReorderKeyDown(event, ri); } }, (_e = reorder === null || reorder === void 0 ? void 0 : reorder.handleIcon) !== null && _e !== void 0 ? _e : React.createElement(GripVertical_1.GripVertical, null)),
                             React.createElement("span", { className: 'bgrid-line-number-value' }, rowStatus !== null && rowStatus !== void 0 ? rowStatus : ri + 1))) : (React.createElement(LineNumberTd, { bordered: !hasRowChecked && frozenColumnIndex > 0 && variant !== 'vertical-bordered', rowStatus: rowStatus, rowIndex: ri }, rowStatus !== null && rowStatus !== void 0 ? rowStatus : ri + 1))),
                     isLeftRegion && hasRowChecked && (React.createElement("td", { className: frozenColumnIndex > 0 ? 'bordered' : '' },
-                        React.createElement(RowSelector_1.default, { disabled: !!disabled || ((_e = rowChecked.disabled) === null || _e === void 0 ? void 0 : _e.call(rowChecked, sourceIndex, item)), checked: checkedAll === true || checkedIndexesMap.get(sourceIndex), handleChange: function (checked) { return __awaiter(_this, void 0, void 0, function () {
+                        React.createElement(RowSelector_1.default, { disabled: !!disabled || ((_f = rowChecked.disabled) === null || _f === void 0 ? void 0 : _f.call(rowChecked, sourceIndex, item)), checked: checkedAll === true || checkedIndexesMap.get(sourceIndex), handleChange: function (checked) { return __awaiter(_this, void 0, void 0, function () {
                                 return __generator(this, function (_a) {
                                     switch (_a.label) {
                                         case 0:
@@ -455,10 +456,10 @@ function BodyTable(_a) {
 }
 function TableBodyTr(_a) {
     var _b;
-    var itemHeight = _a.itemHeight, itemPadding = _a.itemPadding, active = _a.active, editable = _a.editable, odd = _a.odd, hasOnClick = _a.hasOnClick, className = _a.className, children = _a.children, style = _a.style, rest = __rest(_a, ["itemHeight", "itemPadding", "active", "editable", "odd", "hasOnClick", "className", "children", "style"]);
+    var itemHeight = _a.itemHeight, itemPadding = _a.itemPadding, rowHeight = _a.rowHeight, active = _a.active, editable = _a.editable, odd = _a.odd, hasOnClick = _a.hasOnClick, className = _a.className, children = _a.children, style = _a.style, rest = __rest(_a, ["itemHeight", "itemPadding", "rowHeight", "active", "editable", "odd", "hasOnClick", "className", "children", "style"]);
     var clickable = !editable && hasOnClick;
     var rowClassName = ['bgrid-body-row', active ? 'bgrid-row-active' : '', className !== null && className !== void 0 ? className : ''].filter(Boolean).join(' ');
-    return (React.createElement("tr", __assign({ className: rowClassName, "data-odd": odd ? 'true' : undefined, "data-clickable": clickable ? 'true' : undefined, style: __assign((_b = {}, _b['--bgrid-item-line-height'] = "".concat(itemHeight, "px"), _b['--bgrid-item-cell-height'] = "".concat(itemHeight + itemPadding * 2, "px"), _b), style) }, rest), children));
+    return (React.createElement("tr", __assign({ className: rowClassName, "data-odd": odd ? 'true' : undefined, "data-clickable": clickable ? 'true' : undefined, style: __assign((_b = {}, _b['--bgrid-item-line-height'] = "".concat(itemHeight, "px"), _b['--bgrid-item-cell-height'] = "".concat(rowHeight !== null && rowHeight !== void 0 ? rowHeight : itemHeight + itemPadding * 2, "px"), _b), style) }, rest), children));
 }
 function NoDataTr(_a) {
     var _b;

package/cjs/components/TableBodyFrozen.js

@@ -39,6 +39,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var TableBody_1 = __importDefault(require("./TableBody"));
 function TableBodyFrozen(props) {
-    return (React.createElement(TableBody_1.default, { scrollContainerRef: props.scrollContainerRef, region: 'left', style: props.style, rowRange: props.rowRange, role: props.role, quadrant: props.quadrant, allowRowReorder: props.allowRowReorder, onRowReorderPointerDown: props.onRowReorderPointerDown, onRowReorderKeyDown: props.onRowReorderKeyDown }));
+    return (React.createElement(TableBody_1.default, { scrollContainerRef: props.scrollContainerRef, region: 'left', style: props.style, rowRange: props.rowRange, role: props.role, quadrant: props.quadrant, allowRowReorder: props.allowRowReorder, onRowReorderPointerDown: props.onRowReorderPointerDown, onRowReorderKeyDown: props.onRowReorderKeyDown, rowHeightMetrics: props.rowHeightMetrics }));
 }
 exports.default = React.memo(TableBodyFrozen);

package/cjs/components/TableHeadColumn.js

@@ -49,8 +49,9 @@ var LazyTableHeadToolbox = React.lazy(function () {
     }); });
 });
 function TableHeadColumn(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-    var column = _a.column, _q = _a.columnIndex, columnIndex = _q === void 0 ? 0 : _q;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var column = _a.column, _u = _a.columnIndex, columnIndex = _u === void 0 ? 0 : _u;
+    var toolboxMsg = (0, store_1.useAppStore)(function (s) { var _a; return (_a = s.msg) === null || _a === void 0 ? void 0 : _a.toolbox; });
     var sort = (0, store_1.useAppStore)(function (s) { return s.sort; });
     var sortParams = (0, store_1.useAppStore)(function (s) { return s.sortParams; });
     var dataQuery = (0, store_1.useAppStore)(function (s) { return s.dataQuery; });
@@ -89,22 +90,22 @@ function TableHeadColumn(_a) {
     // Tooltip
     var tooltipParts = [];
     if (isAsc)
-        tooltipParts.push('오름차순 정렬');
+        tooltipParts.push((_e = toolboxMsg === null || toolboxMsg === void 0 ? void 0 : toolboxMsg.sortAscending) !== null && _e !== void 0 ? _e : '오름차순 정렬');
     if (isDesc)
-        tooltipParts.push('내림차순 정렬');
+        tooltipParts.push((_f = toolboxMsg === null || toolboxMsg === void 0 ? void 0 : toolboxMsg.sortDescending) !== null && _f !== void 0 ? _f : '내림차순 정렬');
     if (isFiltered)
-        tooltipParts.push('필터 적용됨');
-    var tooltip = tooltipParts.length > 0 ? tooltipParts.join(', ') : '컬럼 옵션 열기';
+        tooltipParts.push((_g = toolboxMsg === null || toolboxMsg === void 0 ? void 0 : toolboxMsg.filterApplied) !== null && _g !== void 0 ? _g : '필터 적용됨');
+    var tooltip = tooltipParts.length > 0 ? tooltipParts.join(', ') : ((_h = toolboxMsg === null || toolboxMsg === void 0 ? void 0 : toolboxMsg.openColumnOptions) !== null && _h !== void 0 ? _h : '컬럼 옵션 열기');
     // Resolve icons with hierarchy (column -> global -> default)
-    var sortAscIcon = (_f = (_e = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.sortAsc) !== null && _e !== void 0 ? _e : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.sortAsc) !== null && _f !== void 0 ? _f : (React.createElement("svg", { viewBox: '0 0 16 16', width: '10', height: '10', fill: 'currentColor' },
+    var sortAscIcon = (_k = (_j = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.sortAsc) !== null && _j !== void 0 ? _j : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.sortAsc) !== null && _k !== void 0 ? _k : (React.createElement("svg", { viewBox: '0 0 16 16', width: '10', height: '10', fill: 'currentColor' },
         React.createElement("path", { d: 'M3 11.5L8 4l5 7.5H3z' })));
-    var sortDescIcon = (_h = (_g = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.sortDesc) !== null && _g !== void 0 ? _g : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.sortDesc) !== null && _h !== void 0 ? _h : (React.createElement("svg", { viewBox: '0 0 16 16', width: '10', height: '10', fill: 'currentColor' },
+    var sortDescIcon = (_m = (_l = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.sortDesc) !== null && _l !== void 0 ? _l : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.sortDesc) !== null && _m !== void 0 ? _m : (React.createElement("svg", { viewBox: '0 0 16 16', width: '10', height: '10', fill: 'currentColor' },
         React.createElement("path", { d: 'M3 4.5L8 12l5-7.5H3z' })));
-    var filterIcon = (_k = (_j = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.filter) !== null && _j !== void 0 ? _j : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.filter) !== null && _k !== void 0 ? _k : (React.createElement("svg", { viewBox: '0 0 16 16', width: '12', height: '12', fill: 'currentColor', className: 'bgrid-filter-icon' },
+    var filterIcon = (_p = (_o = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.filter) !== null && _o !== void 0 ? _o : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.filter) !== null && _p !== void 0 ? _p : (React.createElement("svg", { viewBox: '0 0 16 16', width: '12', height: '12', fill: 'currentColor', className: 'bgrid-filter-icon' },
         React.createElement("path", { d: 'M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.293V13.5a.5.5 0 0 1-.74.439l-2.5-1.5A.5.5 0 0 1 6.5 12V8.293L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z' })));
-    var filterBadgeIcon = (_m = (_l = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.filterBadge) !== null && _l !== void 0 ? _l : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.filterBadge) !== null && _m !== void 0 ? _m : (React.createElement("svg", { viewBox: '0 0 16 16', width: '10', height: '10', fill: 'currentColor', className: 'bgrid-filter-badge-icon' },
+    var filterBadgeIcon = (_r = (_q = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.filterBadge) !== null && _q !== void 0 ? _q : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.filterBadge) !== null && _r !== void 0 ? _r : (React.createElement("svg", { viewBox: '0 0 16 16', width: '10', height: '10', fill: 'currentColor', className: 'bgrid-filter-badge-icon' },
         React.createElement("path", { d: 'M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.293V13.5a.5.5 0 0 1-.74.439l-2.5-1.5A.5.5 0 0 1 6.5 12V8.293L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z' })));
-    var dropdownIcon = (_p = (_o = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.dropdown) !== null && _o !== void 0 ? _o : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.dropdown) !== null && _p !== void 0 ? _p : (React.createElement("svg", { viewBox: '0 0 16 16', width: '10', height: '10', fill: 'currentColor', className: 'bgrid-dropdown-arrow' },
+    var dropdownIcon = (_t = (_s = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.dropdown) !== null && _s !== void 0 ? _s : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.dropdown) !== null && _t !== void 0 ? _t : (React.createElement("svg", { viewBox: '0 0 16 16', width: '10', height: '10', fill: 'currentColor', className: 'bgrid-dropdown-arrow' },
         React.createElement("path", { d: 'M3 6l5 5 5-5H3z' })));
     if (isToolboxEnabled) {
         return (React.createElement("div", { className: 'bgrid-head-cell-wrapper' },