beautiful-grid 1.0.6 → 1.0.7

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, 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, 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,
@@ -150,30 +150,32 @@ function BGrid(_a) {
     var resolvedFrozenColumnIndex = visibilityProjection.frozenColumnIndex;
     var resolvedRowChecked = pivotEnabled ? undefined : rowChecked;
     var resolvedSort = pivotEnabled ? undefined : sort;
-    var resolvedOnClick = pivotEnabled ? undefined : onClick;
+    var resolvedDisabled = !!disabled;
+    var resolvedOnClick = pivotEnabled || resolvedDisabled ? undefined : onClick;
     var baseOnChangeColumns = pivotEnabled ? undefined : onChangeColumns;
     var resolvedOnChangeData = pivotEnabled ? undefined : onChangeData;
     var resolvedRowKey = pivotEnabled ? undefined : rowKey;
     var resolvedSelectedRowKey = pivotEnabled ? undefined : selectedRowKey;
-    var resolvedEditable = pivotEnabled ? false : editable;
+    var resolvedEditable = pivotEnabled || resolvedDisabled ? false : editable;
     var resolvedShowLineNumber = pivotEnabled ? false : showLineNumber;
     var resolvedGetRowClassName = pivotEnabled ? undefined : getRowClassName;
     var resolvedCellMergeOptions = visibilityProjection.cellMergeOptions;
-    var resolvedCellSelectionOptions = cellSelectionOptions;
+    var resolvedCellSelectionOptions = resolvedDisabled
+        ? __assign(__assign({}, cellSelectionOptions), { enabled: false }) : cellSelectionOptions;
     var resolvedSummary = visibilityProjection.summary;
     var hasHiddenColumns = visibilityProjection.columns.length < resolvedColumns.length;
-    var resolvedColumnSortable = pivotEnabled || hasHiddenColumns ? false : columnSortable;
+    var resolvedColumnSortable = pivotEnabled || hasHiddenColumns || resolvedDisabled ? false : columnSortable;
     var resolvedDataControl = pivotEnabled ? undefined : dataControl;
-    var resolvedSearchOptions = pivotEnabled ? undefined : searchOptions;
-    var resolvedContextMenuOptions = pivotEnabled ? undefined : contextMenuOptions;
+    var resolvedSearchOptions = pivotEnabled || resolvedDisabled ? undefined : searchOptions;
+    var resolvedContextMenuOptions = pivotEnabled || resolvedDisabled ? undefined : contextMenuOptions;
     var hasActiveClientQuery = (resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode) === 'client' &&
         (resolvedDataControl.query.sortParams.length > 0 || resolvedDataControl.query.filterParams.length > 0);
     var resolvedReorder = React.useMemo(function () {
-        return pivotEnabled
+        return pivotEnabled || resolvedDisabled
             ? undefined
             : (hasActiveClientQuery || frozenRowCount > 0) && reorder
                 ? __assign(__assign({}, reorder), { enabled: false }) : reorder;
-    }, [frozenRowCount, hasActiveClientQuery, pivotEnabled, reorder]);
+    }, [frozenRowCount, hasActiveClientQuery, pivotEnabled, reorder, resolvedDisabled]);
     // Development warnings
     React.useEffect(function () {
         var _a, _b;
@@ -212,9 +214,7 @@ function BGrid(_a) {
                 warnedSearchControlledRef.current.columnVisibility = true;
                 console.warn('[BGrid] Controlled columnVisibility.hiddenColumnIds requires onChange to respond to user actions.');
             }
-            if ((searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.open) !== undefined &&
-                !searchOptions.onOpenChange &&
-                !warnedSearchControlledRef.current.open) {
+            if ((searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.open) !== undefined && !searchOptions.onOpenChange && !warnedSearchControlledRef.current.open) {
                 warnedSearchControlledRef.current.open = true;
                 console.warn('[BGrid] Controlled searchOptions.open requires onOpenChange to respond to user actions.');
             }
@@ -314,9 +314,7 @@ function BGrid(_a) {
             if (updatedColumn)
                 nextColumns[originalIndex] = updatedColumn;
         });
-        baseOnChangeColumns(visibleColumnIndex === null
-            ? null
-            : (_a = visibilityProjection.visibleOriginalIndexes[visibleColumnIndex]) !== null && _a !== void 0 ? _a : null, __assign(__assign({}, info), { columns: nextColumns, columnsGroup: resolvedColumnsGroup, columnGroups: resolvedColumnGroups }));
+        baseOnChangeColumns(visibleColumnIndex === null ? null : (_a = visibilityProjection.visibleOriginalIndexes[visibleColumnIndex]) !== null && _a !== void 0 ? _a : null, __assign(__assign({}, info), { columns: nextColumns, columnsGroup: resolvedColumnsGroup, columnGroups: resolvedColumnGroups }));
     }, [
         baseOnChangeColumns,
         hasHiddenColumns,
@@ -524,6 +522,7 @@ function BGrid(_a) {
             page: resolvedPage,
             displayPaginationLength: resolvedPage ? (_b = resolvedPage.displayPaginationLength) !== null && _b !== void 0 ? _b : 5 : 0,
             loading: loading,
+            disabled: resolvedDisabled,
             spinning: spinning,
             scrollTop: scrollTop,
             scrollLeft: scrollLeft,
@@ -583,6 +582,7 @@ function BGrid(_a) {
         resolvedSearchOptions,
         resolvedContextMenuOptions,
         loading,
+        resolvedDisabled,
         spinning,
         scrollTop,
         scrollLeft,
@@ -606,7 +606,7 @@ function BGrid(_a) {
         React.createElement(Table_1.default, { ref: ref, columns: computedColumns,
             columnsGroup: visibilityProjection.columnsGroup,
             columnGroups: visibilityProjection.columnGroups,
-            onChangeColumns: resolvedOnChangeColumns, width: width, height: height, className: className, style: style, loading: loading, spinning: spinning, scrollLeft: scrollLeft, scrollTop: scrollTop, headerHeight: headerHeight, footerHeight: footerHeight, bottomBarHeight: resolvedBottomBarHeight,
+            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,

package/cjs/components/ColResizer.js

@@ -79,9 +79,12 @@ function ColResizer(_a) {
     var setColumnWidth = (0, store_1.useAppStore)(function (s) { return s.setColumnWidth; });
     var setColumnResizing = (0, store_1.useAppStore)(function (s) { return s.setColumnResizing; });
     var endCellEdit = (0, store_1.useAppStore)(function (s) { return s.endCellEdit; });
+    var disabled = (0, store_1.useAppStore)(function (s) { return s.disabled; });
     var columnsGroup = (0, store_1.useAppStore)(function (s) { return s.columnsGroup; });
     var onPointerDownResizerHandle = React.useCallback(function (evt, columnIndex) {
         var _a, _b;
+        if (disabled)
+            return;
         evt.preventDefault();
         evt.stopPropagation();
         endCellEdit();
@@ -101,13 +104,15 @@ function ColResizer(_a) {
             pointerId: evt.pointerId,
             initialClientX: evt.clientX,
         });
-    }, [container, endCellEdit, setColumnResizing, setColumnWidth]);
+    }, [container, disabled, endCellEdit, setColumnResizing, setColumnWidth]);
     var onMouseDoubleClick = React.useCallback(function (evt, columnIndex) { return __awaiter(_this, void 0, void 0, function () {
         var headFrozenHTML, headHTML, bodyFrozenHTML, bodyHTML, targetDiv, bodyTarget, targetTd;
         var _a, _b, _c, _d, _e;
         return __generator(this, function (_f) {
             switch (_f.label) {
                 case 0:
+                    if (disabled)
+                        return [2 /*return*/];
                     evt.preventDefault();
                     evt.stopPropagation();
                     endCellEdit();
@@ -135,13 +140,13 @@ function ColResizer(_a) {
                 case 2: return [2 /*return*/];
             }
         });
-    }); }, [container, endCellEdit, setColumnWidth]);
+    }); }, [container, disabled, endCellEdit, setColumnWidth]);
     return (React.createElement("div", { className: [
             'bgrid-col-resizer',
             hideHandle ? '' : 'bgrid-col-resizer-handle',
             frozenBoundary ? 'bgrid-col-resizer-frozen-boundary' : '',
         ]
             .filter(Boolean)
-            .join(' '), "data-bgrid-frozen-boundary": frozenBoundary ? 'true' : undefined, style: !hideHandle ? (_b = {}, _b['--bgrid-resizer-height'] = bordered ? '100%' : '1em', _b) : undefined, onPointerDown: function (evt) { return onPointerDownResizerHandle(evt, columnIndex); }, onDoubleClick: function (evt) { return onMouseDoubleClick(evt, columnIndex); }, onClick: function (evt) { return evt.stopPropagation(); } }));
+            .join(' '), "data-bgrid-frozen-boundary": frozenBoundary ? 'true' : undefined, "data-bgrid-disabled": disabled ? 'true' : undefined, style: !hideHandle ? (_b = {}, _b['--bgrid-resizer-height'] = bordered ? '100%' : '1em', _b) : undefined, onPointerDown: function (evt) { return onPointerDownResizerHandle(evt, columnIndex); }, onDoubleClick: function (evt) { return onMouseDoubleClick(evt, columnIndex); }, onClick: function (evt) { return evt.stopPropagation(); } }));
 }
 exports.default = ColResizer;

package/cjs/components/Pagination.js

@@ -54,18 +54,21 @@ function Pagination(props) {
     var _b = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         page: s.page,
         displayPaginationLength: s.displayPaginationLength,
-    }); })), page = _b.page, displayPaginationLength = _b.displayPaginationLength;
+        disabled: s.disabled,
+    }); })), page = _b.page, displayPaginationLength = _b.displayPaginationLength, disabled = _b.disabled;
     // [Selector Group 2] Pagination Actions - 페이지네이션 액션
     var setPage = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setPage: s.setPage,
     }); })).setPage;
     var onClickPageNo = React.useCallback(function (pageNo) {
         var _a;
+        if (disabled)
+            return;
         if (page) {
             setPage(__assign(__assign({}, page), { currentPage: pageNo }));
             (_a = page === null || page === void 0 ? void 0 : page.onChange) === null || _a === void 0 ? void 0 : _a.call(page, pageNo, page === null || page === void 0 ? void 0 : page.pageSize);
         }
-    }, [page, setPage]);
+    }, [disabled, page, setPage]);
     if (page && page.totalPages !== undefined && page.currentPage !== undefined && page.totalPages > 0) {
         var displayLength_1 = Math.min(displayPaginationLength !== null && displayPaginationLength !== void 0 ? displayPaginationLength : 0, (_a = page.totalPages) !== null && _a !== void 0 ? _a : 5);
         var pageStartNumber_1 = (function () {
@@ -75,18 +78,18 @@ function Pagination(props) {
         var pageNumber_1 = 0;
         return (React.createElement("div", { className: 'bgrid-pagination' },
             pageStartNumber_1 > 1 && (React.createElement(React.Fragment, null,
-                React.createElement("span", { role: 'page-number', className: 'bgrid-page-no', onClick: function () { return onClickPageNo(1); } }, "1"),
+                React.createElement("span", { role: 'page-number', className: 'bgrid-page-no', "aria-disabled": disabled ? 'true' : undefined, onClick: function () { return onClickPageNo(1); } }, "1"),
                 pageStartNumber_1 > 2 && '...')),
             Array.from({ length: displayLength_1 }).map(function (_, i) {
                 var _a;
                 if (i <= ((_a = page.totalPages) !== null && _a !== void 0 ? _a : 1)) {
                     var num_1 = (pageNumber_1 = pageStartNumber_1 + i);
-                    return (React.createElement("span", { role: 'page-number', key: num_1, className: 'bgrid-page-no', "data-active": page.currentPage === num_1, onClick: function () { return onClickPageNo(num_1); } }, (0, number_1.toMoney)(num_1)));
+                    return (React.createElement("span", { role: 'page-number', key: num_1, className: 'bgrid-page-no', "data-active": page.currentPage === num_1, "aria-disabled": disabled ? 'true' : undefined, onClick: function () { return onClickPageNo(num_1); } }, (0, number_1.toMoney)(num_1)));
                 }
             }),
             page.totalPages && pageNumber_1 < page.totalPages && (React.createElement(React.Fragment, null,
                 pageNumber_1 < page.totalPages - 1 && '...',
-                React.createElement("span", { role: 'page-number', className: 'bgrid-page-no', onClick: function () { var _a; return onClickPageNo((_a = page.totalPages) !== null && _a !== void 0 ? _a : 0); } }, (0, number_1.toMoney)(page.totalPages))))));
+                React.createElement("span", { role: 'page-number', className: 'bgrid-page-no', "aria-disabled": disabled ? 'true' : undefined, onClick: function () { var _a; return onClickPageNo((_a = page.totalPages) !== null && _a !== void 0 ? _a : 0); } }, (0, number_1.toMoney)(page.totalPages))))));
     }
     return null;
 }

package/cjs/components/Table.js

@@ -216,12 +216,13 @@ function Table(props) {
         page: s.page,
         loading: s.loading,
         spinning: s.spinning,
+        disabled: s.disabled,
         showLineNumber: s.showLineNumber,
         summary: s.summary,
         scrollbar: s.scrollbar,
         status: s.status,
         pagination: s.pagination,
-    }); })), rowChecked = _12.rowChecked, page = _12.page, loading = _12.loading, spinning = _12.spinning, showLineNumber = _12.showLineNumber, summary = _12.summary, scrollbar = _12.scrollbar, status = _12.status, pagination = _12.pagination;
+    }); })), rowChecked = _12.rowChecked, page = _12.page, loading = _12.loading, spinning = _12.spinning, disabled = _12.disabled, showLineNumber = _12.showLineNumber, summary = _12.summary, scrollbar = _12.scrollbar, status = _12.status, pagination = _12.pagination;
     var _13 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         searchOpen: s.searchOpen,
         searchOptions: s.searchOptions,
@@ -246,7 +247,8 @@ function Table(props) {
         setItemPadding: s.setItemPadding,
         setLoading: s.setLoading,
         setSpinning: s.setSpinning,
-    }); })), setHeight = _14.setHeight, setWidth = _14.setWidth, setContentBodyHeight = _14.setContentBodyHeight, setDisplayItemCount = _14.setDisplayItemCount, setHeaderHeight = _14.setHeaderHeight, setFooterHeight = _14.setFooterHeight, setBottomBarHeight = _14.setBottomBarHeight, setSummaryHeight = _14.setSummaryHeight, setItemHeight = _14.setItemHeight, setItemPadding = _14.setItemPadding, setLoading = _14.setLoading, setSpinning = _14.setSpinning;
+        setDisabled: s.setDisabled,
+    }); })), setHeight = _14.setHeight, setWidth = _14.setWidth, setContentBodyHeight = _14.setContentBodyHeight, setDisplayItemCount = _14.setDisplayItemCount, setHeaderHeight = _14.setHeaderHeight, setFooterHeight = _14.setFooterHeight, setBottomBarHeight = _14.setBottomBarHeight, setSummaryHeight = _14.setSummaryHeight, setItemHeight = _14.setItemHeight, setItemPadding = _14.setItemPadding, setLoading = _14.setLoading, setSpinning = _14.setSpinning, setDisabled = _14.setDisabled;
     // [Selector Group 7] Data & Column Setters - 데이터/열 설정자
     var _15 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setData: s.setData,
@@ -402,15 +404,7 @@ function Table(props) {
             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]);
     var activeFragments = React.useMemo(function () {
         var _a;
         return (0, cellSelectionGeometry_1.getCellSelectionFragments)({
@@ -422,15 +416,7 @@ function Table(props) {
             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]);
     var activeOverlayFill = activeCellSelected;
     var activeOverlayRing = !!activeCell && !hasMultiCellSelection;
     var renderSelectionOverlay = function (quadrant) {
@@ -455,7 +441,15 @@ function Table(props) {
             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,
         });
-    }, [data.length, frozenRowCount, (_c = props.reorder) === null || _c === void 0 ? void 0 : _c.enabled, scrollOverscanRows, scrollTop, scrollableBodyHeight, trHeight]);
+    }, [
+        data.length,
+        frozenRowCount,
+        (_c = props.reorder) === null || _c === void 0 ? void 0 : _c.enabled,
+        scrollOverscanRows,
+        scrollTop,
+        scrollableBodyHeight,
+        trHeight,
+    ]);
     var frozenRowRange = React.useMemo(function () { return ({ startRowIndex: 0, endRowIndex: frozenRowCount }); }, [frozenRowCount]);
     var scrollableRowRange = React.useMemo(function () { return ({
         startRowIndex: visibleScrollableRows.startRowIndex,
@@ -480,6 +474,8 @@ function Table(props) {
         (searchSurfaceEnabled && searchOptions.contextMenu !== false);
     var openCellContextMenu = React.useCallback(function (cell, clientX, clientY, keyboard) {
         var _a, _b, _c, _d, _e, _f, _g;
+        if (disabled)
+            return false;
         var logical = (0, utils_1.resolveLogicalCell)(data, props.cellMergeOptions, cell);
         var visibleIndex = logical.cell.rowIndex;
         var columnIndex = logical.cell.columnIndex;
@@ -561,6 +557,7 @@ function Table(props) {
         columns,
         contextMenuOptions,
         data,
+        disabled,
         openContextMenu,
         props.cellMergeOptions,
         requestSearchOpen,
@@ -570,12 +567,7 @@ function Table(props) {
         storeRowKey,
         storeSourceIndexByVisibleIndex,
     ]);
-    var scrollableColumnsWidth = React.useMemo(function () {
-        var _a;
-        return columns
-            .slice((_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0)
-            .reduce(function (totalWidth, column) { var _a; return totalWidth + ((_a = column.width) !== null && _a !== void 0 ? _a : 100); }, 0);
-    }, [columns, props.frozenColumnIndex]);
+    var scrollableColumnsWidth = React.useMemo(function () { var _a; return columns.slice((_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0).reduce(function (totalWidth, column) { var _a; return totalWidth + ((_a = column.width) !== null && _a !== void 0 ? _a : 100); }, 0); }, [columns, props.frozenColumnIndex]);
     var stickyTopHeight = headerHeight + ((summary === null || summary === void 0 ? void 0 : summary.position) === 'top' ? summaryHeight : 0);
     var stickyBottomHeight = (summary === null || summary === void 0 ? void 0 : summary.position) === 'bottom' ? summaryHeight : 0;
     var stickyFixedHeight = stickyTopHeight + stickyBottomHeight;
@@ -661,7 +653,16 @@ function Table(props) {
             scrollTop: scrollTop,
             trHeight: trHeight,
         };
-    }, [columns, data.length, props.frozenColumnIndex, frozenColumnsWidth, frozenRowCount, frozenRowsHeight, scrollTop, trHeight]);
+    }, [
+        columns,
+        data.length,
+        props.frozenColumnIndex,
+        frozenColumnsWidth,
+        frozenRowCount,
+        frozenRowsHeight,
+        scrollTop,
+        trHeight,
+    ]);
     var markScrollActive = (0, react_1.useCallback)(function () {
         var _a;
         (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('data-bgrid-scrolling', 'true');
@@ -831,6 +832,10 @@ function Table(props) {
     }, [columns.length, data.length, setCellSelectionRanges]);
     var onBodyPointerOverCapture = (0, react_1.useCallback)(function (evt) {
         var _a;
+        if (disabled) {
+            clearHoveredRow();
+            return;
+        }
         var target = evt.target;
         updateAxisSelectionByTarget(target);
         var physicalCellPosition = getCellPosition(target, containerRef.current);
@@ -855,6 +860,7 @@ function Table(props) {
     }, [
         cellSelectionEnabled,
         clearHoveredRow,
+        disabled,
         setCellSelectionRanges,
         setHoveredRows,
         toLogicalCellPosition,
@@ -862,6 +868,8 @@ function Table(props) {
     ]);
     var onBodyPointerDownCapture = (0, react_1.useCallback)(function (evt) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (disabled)
+            return;
         var navEnabled = (_a = cellNavigationOptions === null || cellNavigationOptions === void 0 ? void 0 : cellNavigationOptions.enabled) !== null && _a !== void 0 ? _a : true;
         if (!cellSelectionEnabled && !navEnabled)
             return;
@@ -963,6 +971,7 @@ function Table(props) {
         cellSelectionRanges,
         columns.length,
         data.length,
+        disabled,
         setActiveCell,
         setCellSelecting,
         setCellSelectionRanges,
@@ -1487,7 +1496,8 @@ function Table(props) {
             setLoading(props.loading);
         if (props.spinning !== undefined)
             setSpinning(props.spinning);
-    }, [props.loading, props.spinning, setLoading, setSpinning]);
+        setDisabled(props.disabled);
+    }, [props.loading, props.spinning, props.disabled, setLoading, setSpinning, setDisabled]);
     // [Group 4] Frozen columns
     (0, react_1.useEffect)(function () {
         var _a, _b, _c, _d;
@@ -1638,11 +1648,15 @@ function Table(props) {
     }, [props.rowKey, props.selectedRowKey, setRowKey, setFocusedRowKey]);
     // [Group 9] Edit options
     (0, react_1.useEffect)(function () {
-        if (props.editable !== undefined)
+        if (props.disabled) {
+            setEditable(false);
+        }
+        else if (props.editable !== undefined) {
             setEditable(props.editable);
+        }
         if (props.editTrigger !== undefined)
             setEditTrigger(props.editTrigger);
-    }, [props.editable, props.editTrigger, setEditable, setEditTrigger]);
+    }, [props.disabled, props.editable, props.editTrigger, setEditable, setEditTrigger]);
     // [Group 10] Event callbacks
     (0, react_1.useEffect)(function () {
         setOnClick(props.onClick);
@@ -1706,6 +1720,7 @@ function Table(props) {
         (_u = (_t = props.cellNavigationOptions) === null || _t === void 0 ? void 0 : _t.activeCell) === null || _u === void 0 ? void 0 : _u.rowIndex,
         (_w = (_v = props.cellNavigationOptions) === null || _v === void 0 ? void 0 : _v.defaultActiveCell) === null || _w === void 0 ? void 0 : _w.columnIndex,
         (_y = (_x = props.cellNavigationOptions) === null || _x === void 0 ? void 0 : _x.defaultActiveCell) === null || _y === void 0 ? void 0 : _y.rowIndex,
+        disabled,
         syncActiveCellToBounds,
     ]);
     // setInitialized + DOM event bindings
@@ -1843,6 +1858,7 @@ function Table(props) {
         copySelectedCells: copySelectedCells,
         dataLength: data.length,
         data: data,
+        disabled: disabled,
         editable: editable,
         editItemIndex: editItemIndex,
         endCellSelectionDrag: endCellSelectionDrag,
@@ -1876,6 +1892,7 @@ function Table(props) {
         copySelectedCells: copySelectedCells,
         dataLength: data.length,
         data: data,
+        disabled: disabled,
         editable: editable,
         editItemIndex: editItemIndex,
         endCellSelectionDrag: endCellSelectionDrag,
@@ -1977,11 +1994,15 @@ 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, 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, verticalScrollState = _f.verticalScrollState, viewportInsets = _f.viewportInsets;
             var container = containerRef.current;
             var activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
                 return;
+            if (disabled) {
+                stopArrowRepeat();
+                return;
+            }
             var isCtrlOrMeta = evt.ctrlKey || evt.metaKey;
             var isFindShortcut = isCtrlOrMeta && evt.key.toLowerCase() === 'f';
             if (isFindShortcut && searchOptions && searchOptions.enabled !== false && searchOptions.shortcut !== false) {
@@ -2202,6 +2223,8 @@ function Table(props) {
             var activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
                 return;
+            if (keyboardRuntimeRef.current.disabled)
+                return;
             if (isInteractiveTarget(evt.target))
                 return;
             evt.preventDefault();
@@ -2213,6 +2236,8 @@ function Table(props) {
             var activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
                 return;
+            if (keyboardRuntimeRef.current.disabled)
+                return;
             if (keyboardRuntimeRef.current.editItemIndex !== undefined && keyboardRuntimeRef.current.editItemIndex >= 0) {
                 return;
             }
@@ -2261,14 +2286,14 @@ function Table(props) {
         };
     }, []);
     return (React.createElement(EditorPortalRoot_1.EditorPortalContext.Provider, { value: editorPortalContext },
-        React.createElement(Container, { ref: containerRef, role: 'grid', style: __assign(__assign({}, style), (_a = { width: width, height: height, borderWidth: "".concat(containerBorderWidth, "px") }, _a['--bgrid-virtual-row-height'] = "".concat(trHeight, "px"), _a)), className: className, tabIndex: 0, onFocus: function (event) {
+        React.createElement(Container, { ref: containerRef, role: 'grid', style: __assign(__assign({}, style), (_a = { width: width, height: height, borderWidth: "".concat(containerBorderWidth, "px") }, _a['--bgrid-virtual-row-height'] = "".concat(trHeight, "px"), _a)), className: className, tabIndex: 0, "aria-disabled": disabled ? 'true' : undefined, onFocus: function (event) {
                 if (event.target !== event.currentTarget)
                     return;
                 var gateway = event.currentTarget.querySelector('[data-bgrid-text-editor-gateway="true"]');
                 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-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 },
             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,
@@ -2276,6 +2301,8 @@ function Table(props) {
                 } },
                 React.createElement(scrollbar_1.CustomScrollbar, { orientation: 'vertical', variant: scrollbar.variant, metrics: scrollbarMetrics.vertical, scrollOffset: scrollTop, onScrollChange: handleScrollTopChange }))),
             React.createElement(ScrollContainer, { ref: scrollContainerRef, role: 'rfdg-scroll-container', "data-bgrid-scroll-plane": 'sticky', style: { height: scrollViewportHeight }, onPointerDownCapture: onBodyPointerDownCapture, onPointerOverCapture: onBodyPointerOverCapture, onPointerLeave: onBodyPointerLeave, onContextMenuCapture: function (event) {
+                    if (disabled)
+                        return;
                     if (isInteractiveTarget(event.target))
                         return;
                     var cell = getCellPosition(event.target, containerRef.current);
@@ -2414,8 +2441,7 @@ function getCellPositionFromPointer(_a) {
     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))) /
+            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,

package/cjs/components/TableBody.js

@@ -204,8 +204,9 @@ function TableBody(_a) {
     var _j = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         editable: s.editable,
         editTrigger: s.editTrigger,
+        disabled: s.disabled,
         cellInteractionSession: s.cellInteractionSession,
-    }); })), editable = _j.editable, editTrigger = _j.editTrigger, cellInteractionSession = _j.cellInteractionSession;
+    }); })), editable = _j.editable, editTrigger = _j.editTrigger, disabled = _j.disabled, cellInteractionSession = _j.cellInteractionSession;
     // [Selector Group 5] Display Options - 표시 옵션
     var _k = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         msg: s.msg,
@@ -247,10 +248,11 @@ function TableBody(_a) {
             endCIdx: endColumnIndex,
         };
     }, [scrollLeft, width, frozenColumnsWidth, columns, frozenColumnIndex, isLeftRegion]), startCIdx = _p.startCIdx, endCIdx = _p.endCIdx;
-    var hasOnClick = !!onClick;
+    var hasOnClick = !!onClick && !disabled;
     var hasRowChecked = !!rowChecked;
     var isRadio = rowChecked === null || rowChecked === void 0 ? void 0 : rowChecked.isRadio;
-    var rowReorderEnabled = isLeftRegion &&
+    var rowReorderEnabled = !disabled &&
+        isLeftRegion &&
         allowRowReorder &&
         !!(reorder === null || reorder === void 0 ? void 0 : reorder.enabled) &&
         !!onRowReorderPointerDown &&
@@ -302,10 +304,10 @@ function TableBody(_a) {
                     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: !!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); } }, (_d = reorder === null || reorder === void 0 ? void 0 : reorder.handleIcon) !== null && _d !== void 0 ? _d : 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: (_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 || ((_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 () {
                                 return __generator(this, function (_a) {
                                     switch (_a.label) {
                                         case 0:
@@ -337,10 +339,7 @@ function TableBody(_a) {
                             cellInteractionSession.hostCell.rowIndex === ri &&
                             cellInteractionSession.hostCell.columnIndex === columnIndex;
                         var logicalRowsEditable = logicalCell.rowIndexes.every(function (rowIndex) { var _a; return ((_a = data[rowIndex]) === null || _a === void 0 ? void 0 : _a.status) !== types_1.BGridDataItemStatus.remove; });
-                        var tdEditable = logicalRowsEditable &&
-                            editable &&
-                            column.editable !== false &&
-                            isHostEditing;
+                        var tdEditable = logicalRowsEditable && editable && column.editable !== false && isHostEditing;
                         var rowSpan = (mergeColumns === null || mergeColumns === void 0 ? void 0 : mergeColumns[columnIndex]) ? getRowSpan(ri, columnIndex) : 1;
                         if (rowSpan === 0)
                             return null;
@@ -415,9 +414,7 @@ function TableBody(_a) {
                                     });
                                 }); },
                                 editable: tdEditable, cellEditable: cellEditable, interactionEditing: isLogicalEditing,
-                                editSession: tdEditable && (cellInteractionSession === null || cellInteractionSession === void 0 ? void 0 : cellInteractionSession.kind) === 'editor'
-                                    ? cellInteractionSession
-                                    : undefined })));
+                                editSession: tdEditable && (cellInteractionSession === null || cellInteractionSession === void 0 ? void 0 : cellInteractionSession.kind) === 'editor' ? cellInteractionSession : undefined })));
                     }),
                     !isLeftRegion && React.createElement("td", { "data-none": true, onClick: function () { return handleClick(ri, -1); } })));
             }),
@@ -460,9 +457,7 @@ 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 clickable = !editable && hasOnClick;
-    var rowClassName = ['bgrid-body-row', active ? 'bgrid-row-active' : '', className !== null && className !== void 0 ? className : '']
-        .filter(Boolean)
-        .join(' ');
+    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));
 }
 function NoDataTr(_a) {

package/cjs/components/TableHead.js

@@ -100,7 +100,8 @@ function TableHead(_a) {
         frozenColumnIndex: s.frozenColumnIndex,
         columnResizing: s.columnResizing,
         columnSortable: s.columnSortable,
-    }); })), sort = _b.sort, dataControl = _b.dataControl, headerHeight = _b.headerHeight, columns = _b.columns, columnsGroup = _b.columnsGroup, columnGroups = _b.columnGroups, frozenColumnIndex = _b.frozenColumnIndex, columnResizing = _b.columnResizing, columnSortable = _b.columnSortable;
+        disabled: s.disabled,
+    }); })), sort = _b.sort, dataControl = _b.dataControl, headerHeight = _b.headerHeight, columns = _b.columns, columnsGroup = _b.columnsGroup, columnGroups = _b.columnGroups, frozenColumnIndex = _b.frozenColumnIndex, columnResizing = _b.columnResizing, columnSortable = _b.columnSortable, disabled = _b.disabled;
     // [Selector Group 2] Action Setters - 액션 설정자
     var _c = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         toggleColumnSort: s.toggleColumnSort,
@@ -120,7 +121,7 @@ function TableHead(_a) {
     var nestedGroupsActive = columnGroups.length > 0;
     var handleSorted = React.useCallback(function () { return setSorted(true); }, []);
     (0, useColumnSortable_1.useColumnSortable)({
-        enabled: !!columnSortable && !sorted,
+        enabled: !disabled && !!columnSortable && !sorted,
         tbodyRef: tbodyRef,
         columnsTable: columnsTable,
         nestedGroupsActive: nestedGroupsActive,
@@ -141,18 +142,15 @@ function TableHead(_a) {
                     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                     if (c.type === 'group') {
                         return (React.createElement(HeadGroupTd, { key: c.key, "data-column-index": c.startColumnIndex, "data-group-id": c.groupId, "data-header-cell-type": 'group', "data-bgrid-axis-selectable": 'true', colSpan: c.colSpan, className: [
-                                columnSortable && !nestedGroupsActive ? 'drag-item' : '',
+                                !disabled && columnSortable && !nestedGroupsActive ? 'drag-item' : '',
                                 (_a = c.className) !== null && _a !== void 0 ? _a : '',
                             ]
                                 .filter(Boolean)
                                 .join(' '), style: __assign(__assign({}, c.headerStyle), { textAlign: (_d = (_b = c.headerAlign) !== null && _b !== void 0 ? _b : (_c = c.headerStyle) === null || _c === void 0 ? void 0 : _c.textAlign) !== null && _d !== void 0 ? _d : 'center' }) },
                             React.createElement("span", { className: 'bgrid-column-drag-handle' }, c.label)));
                     }
-                    var sortEnabled = !((_e = c.column) === null || _e === void 0 ? void 0 : _e.sortDisable) && (!!sort || !!dataControl);
-                    return (React.createElement(HeadTd, { "data-column-index": c.columnIndex, "data-header-cell-type": 'column', "data-bgrid-axis-selectable": !sortEnabled ? 'true' : undefined, "data-parent-group-id": c.parentGroupId, key: c.key, rowSpan: c.rowSpan, bottomBorder: isHeadCellOnBottomRow(ri, c.rowSpan, columnsTable.length), style: __assign(__assign({}, c.headerStyle), { textAlign: (_h = (_f = c.headerAlign) !== null && _f !== void 0 ? _f : (_g = c.headerStyle) === null || _g === void 0 ? void 0 : _g.textAlign) !== null && _h !== void 0 ? _h : 'center' }), className: [
-                            columnSortable ? 'drag-item' : '',
-                            (_j = c.className) !== null && _j !== void 0 ? _j : '',
-                        ]
+                    var sortEnabled = !disabled && !((_e = c.column) === null || _e === void 0 ? void 0 : _e.sortDisable) && (!!sort || !!dataControl);
+                    return (React.createElement(HeadTd, { "data-column-index": c.columnIndex, "data-header-cell-type": 'column', "data-bgrid-axis-selectable": !sortEnabled ? 'true' : undefined, "data-parent-group-id": c.parentGroupId, key: c.key, rowSpan: c.rowSpan, bottomBorder: isHeadCellOnBottomRow(ri, c.rowSpan, columnsTable.length), style: __assign(__assign({}, c.headerStyle), { textAlign: (_h = (_f = c.headerAlign) !== null && _f !== void 0 ? _f : (_g = c.headerStyle) === null || _g === void 0 ? void 0 : _g.textAlign) !== null && _h !== void 0 ? _h : 'center' }), className: [!disabled && columnSortable ? 'drag-item' : '', (_j = c.className) !== null && _j !== void 0 ? _j : '']
                             .filter(Boolean)
                             .join(' '), hasOnClick: sortEnabled, columnResizing: columnResizing, onClick: function (evt) {
                             evt.preventDefault();