beautiful-grid 1.0.4 → 1.0.6

package/README.md

@@ -2,12 +2,23 @@
 
 **Beautiful. Powerful. Naturally React.**
 
-[![NPM version](https://img.shields.io/npm/v/beautiful-grid.svg?style=flat)](https://npmjs.org/package/beautiful-grid)
-[![NPM downloads](https://img.shields.io/npm/dm/beautiful-grid.svg?style=flat)](https://npmjs.org/package/beautiful-grid)
+[![NPM version](https://img.shields.io/npm/v/beautiful-grid?logo=npm)](https://npmjs.org/package/beautiful-grid)
+[![NPM downloads](https://img.shields.io/npm/dm/beautiful-grid?color=blue&logo=npm)](https://npmjs.org/package/beautiful-grid)
+[![Bundle size](https://img.shields.io/badge/minzipped-62.6%20KiB-success)](https://bgrid.axisj.com)
+[![Unpacked size](https://img.shields.io/npm/unpacked-size/beautiful-grid?color=informational)](https://www.npmjs.com/package/beautiful-grid)
+[![Test](https://img.shields.io/github/actions/workflow/status/axisj/beautiful-grid/tests.yml?branch=main&label=tests&logo=github)](https://github.com/axisj/beautiful-grid/actions/workflows/tests.yml)
+<br />
 [![License](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](LICENSE)
-[![Coverage](https://img.shields.io/badge/coverage-85.63%25-brightgreen.svg)](https://github.com/axisj/beautiful-grid/actions/workflows/tests.yml)
+[![TypeScript](https://img.shields.io/npm/types/beautiful-grid?logo=typescript&logoColor=white)](https://www.npmjs.com/package/beautiful-grid)
+[![React](https://img.shields.io/badge/React-%5E19.0.0-61DAFB?logo=react&logoColor=black)](https://react.dev/)
+[![Node](https://img.shields.io/badge/node-%3E%3D22-339933?logo=node.js&logoColor=white)](https://nodejs.org)
+[![Last commit](https://img.shields.io/github/last-commit/axisj/beautiful-grid?logo=git)](https://github.com/axisj/beautiful-grid/commits/main)
+<br />
+[![GitHub stars](https://img.shields.io/github/stars/axisj/beautiful-grid?logo=github)](https://github.com/axisj/beautiful-grid/stargazers)
+[![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)
 
-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, server/client pagination, pivot table transforms, row reordering, and flexible theming.
+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).
 
@@ -33,6 +44,7 @@ Explore live interactive examples and in-depth documentation at [bgrid.axisj.com
   - [11. Summary Row](#11-summary-row)
   - [12. Cell Merging](#12-cell-merging)
   - [13. Pivot Table](#13-pivot-table)
+  - [14. Column Visibility](#14-column-visibility)
 - [Props Reference](#props-reference)
   - [BGridProps](#bgridprops)
   - [BGridColumn](#bgridcolumn)
@@ -846,6 +858,35 @@ const pivotConfig: BGridProps<SalesRecord>['pivot'] = {
 
 ---
 
+### 14. Column Visibility
+
+Available since BeautifulGrid `1.0.6`.
+
+Enable recoverable column hiding through the existing header toolbox. Use controlled state to persist a user's visible-column preferences.
+
+```typescript jsx
+function OrdersGrid({ data, columns }) {
+  const [hiddenColumnIds, setHiddenColumnIds] = React.useState(['owner']);
+
+  return (
+    <BGrid
+      width={800}
+      height={420}
+      data={data}
+      columns={columns}
+      columnVisibility={{
+        hiddenColumnIds,
+        onChange: setHiddenColumnIds,
+      }}
+    />
+  );
+}
+```
+
+Set `hideable: false` on columns that must remain available. The final visible column cannot be hidden, and active sort/filter conditions remain intact while their column is hidden.
+
+---
+
 ## Props Reference
 
 ### BGridProps
@@ -919,6 +960,7 @@ Below is a categorized reference of `<BGrid>` props. For exact TypeScript types,
 | `summary` | `{ position: 'top' \| 'bottom'; columns: BGridSummaryColumn<T>[] }` | Static summary row configuration. |
 | `cellMergeOptions` | `{ columnsMap: Record<number, BGridCellMergeColumn> }` | Vertical cell merge rules. |
 | `pivot` | `BGridPivotOptions<T>` | Pivot table dimensions, aggregation rules, and metrics. |
+| `columnVisibility` | `boolean \| BGridColumnVisibilityOptions<T>` | Enables controlled or uncontrolled column hiding and restore controls (since `1.0.6`). |
 | `loading` | `boolean` | Displays full-grid loading overlay. |
 | `spinning` | `boolean` | Displays body-area spinner. |
 | `msg` | `{ emptyList?: string }` | Custom empty state text. |
@@ -950,6 +992,7 @@ Below is a categorized reference of `<BGrid>` props. For exact TypeScript types,
 | `searchable` | `boolean` | Whether this column participates in grid search (defaults to `true`). |
 | `getSearchText` | `(params: BGridSearchCellParams<T>) => unknown` | Custom string extractor for grid search matching. |
 | `toolbox` | `boolean \| BGridToolboxConfig<T>` | Enables header sort/filter toolbox popup. |
+| `hideable` | `boolean` | Allows this column to be hidden through the visibility menu (defaults to `true`, since `1.0.6`). |
 | `filter` | `false \| BGridColumnFilterConfig<T>` | Column filter configuration (`type: 'values' \| 'text' \| 'number'`). |
 | `sortComparator` | `(a, b, params) => number` | Custom comparator function for sorting. |
 

package/cjs/BGrid.js

@@ -77,10 +77,28 @@ var React = __importStar(require("react"));
 var Table_1 = __importDefault(require("./components/Table"));
 var utils_1 = require("./utils");
 var store_1 = require("./store");
+function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnIds) {
+    var left = 0;
+    var previousWidth = 0;
+    return columns.map(function (column, columnIndex) {
+        var _a, _b;
+        var columnId = (0, utils_1.getColumnId)(column);
+        if (columnIndex >= frozenColumnIndex) {
+            left += previousWidth;
+            previousWidth = (_a = column.width) !== null && _a !== void 0 ? _a : 100;
+        }
+        return __assign(__assign({}, column), { columnId: columnId, keyToken: (0, utils_1.getColumnKeyToken)(column.key), toolbox: duplicateToolboxColumnIds.has(columnId) ? false : column.toolbox, left: columnIndex < frozenColumnIndex ? -1 : left, width: (_b = column.width) !== null && _b !== void 0 ? _b : 100 });
+    });
+}
 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, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions;
-    var warnedSearchControlledRef = React.useRef({ open: false, query: false, pivotContextMenu: false });
+    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 warnedSearchControlledRef = React.useRef({
+        open: false,
+        query: false,
+        pivotContextMenu: false,
+        columnVisibility: false,
+    });
     var pivotData = React.useMemo(function () {
         return (0, utils_1.createPivotData)({
             data: data,
@@ -88,26 +106,63 @@ function BGrid(_a) {
         });
     }, [data, pivot]);
     var pivotEnabled = !!pivotData;
-    var resolvedColumns = (_b = pivotData === null || pivotData === void 0 ? void 0 : pivotData.columns) !== null && _b !== void 0 ? _b : columns;
+    var resolvedColumns = ((_b = pivotData === null || pivotData === void 0 ? void 0 : pivotData.columns) !== null && _b !== void 0 ? _b : columns);
+    var visibilityOptions = typeof columnVisibility === 'object' ? columnVisibility : undefined;
+    var visibilityEnabled = columnVisibility === true || (visibilityOptions !== undefined && visibilityOptions.enabled !== false);
+    var _r = __read(React.useState(function () { var _a; return Array.from(new Set((_a = visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.defaultHiddenColumnIds) !== null && _a !== void 0 ? _a : [])); }), 2), uncontrolledHiddenColumnIds = _r[0], setUncontrolledHiddenColumnIds = _r[1];
+    var hiddenColumnIds = React.useMemo(function () {
+        var _a;
+        if (!visibilityEnabled)
+            return [];
+        var requestedIds = Array.from(new Set((_a = visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.hiddenColumnIds) !== null && _a !== void 0 ? _a : uncontrolledHiddenColumnIds));
+        if (resolvedColumns.length > 0 &&
+            resolvedColumns.every(function (column) { return requestedIds.includes((0, utils_1.getColumnId)(column)); })) {
+            var firstColumnId_1 = (0, utils_1.getColumnId)(resolvedColumns[0]);
+            return requestedIds.filter(function (columnId) { return columnId !== firstColumnId_1; });
+        }
+        return requestedIds;
+    }, [resolvedColumns, uncontrolledHiddenColumnIds, visibilityEnabled, visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.hiddenColumnIds]);
+    var hiddenColumnIdSet = React.useMemo(function () { return new Set(hiddenColumnIds); }, [hiddenColumnIds]);
     var resolvedColumnGroups = React.useMemo(function () { return (pivotEnabled ? [] : columnGroups !== null && columnGroups !== void 0 ? columnGroups : []); }, [columnGroups, pivotEnabled]);
     var resolvedColumnsGroup = React.useMemo(function () { var _a; return (_a = pivotData === null || pivotData === void 0 ? void 0 : pivotData.columnsGroup) !== null && _a !== void 0 ? _a : (resolvedColumnGroups.length ? [] : columnsGroup !== null && columnsGroup !== void 0 ? columnsGroup : []); }, [columnsGroup, pivotData === null || pivotData === void 0 ? void 0 : pivotData.columnsGroup, resolvedColumnGroups.length]);
+    var visibilityProjection = React.useMemo(function () {
+        return (0, utils_1.projectColumnVisibility)({
+            columns: resolvedColumns,
+            hiddenColumnIds: hiddenColumnIdSet,
+            frozenColumnIndex: pivotEnabled ? 0 : frozenColumnIndex,
+            columnsGroup: resolvedColumnsGroup,
+            columnGroups: resolvedColumnGroups,
+            cellMergeOptions: pivotEnabled ? undefined : cellMergeOptions,
+            summary: pivotEnabled ? undefined : summary,
+        });
+    }, [
+        cellMergeOptions,
+        frozenColumnIndex,
+        hiddenColumnIdSet,
+        pivotEnabled,
+        resolvedColumnGroups,
+        resolvedColumns,
+        resolvedColumnsGroup,
+        summary,
+    ]);
     var resolvedData = (_c = pivotData === null || pivotData === void 0 ? void 0 : pivotData.data) !== null && _c !== void 0 ? _c : data;
     var resolvedPage = pivotEnabled ? undefined : page;
-    var resolvedFrozenColumnIndex = pivotEnabled ? 0 : frozenColumnIndex;
+    var resolvedFrozenColumnIndex = visibilityProjection.frozenColumnIndex;
     var resolvedRowChecked = pivotEnabled ? undefined : rowChecked;
     var resolvedSort = pivotEnabled ? undefined : sort;
     var resolvedOnClick = pivotEnabled ? undefined : onClick;
-    var resolvedOnChangeColumns = pivotEnabled ? undefined : onChangeColumns;
+    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 resolvedShowLineNumber = pivotEnabled ? false : showLineNumber;
     var resolvedGetRowClassName = pivotEnabled ? undefined : getRowClassName;
-    var resolvedCellMergeOptions = pivotEnabled ? undefined : cellMergeOptions;
+    var resolvedCellMergeOptions = visibilityProjection.cellMergeOptions;
     var resolvedCellSelectionOptions = cellSelectionOptions;
-    var resolvedSummary = pivotEnabled ? undefined : summary;
-    var resolvedColumnSortable = pivotEnabled ? false : columnSortable;
+    var resolvedSummary = visibilityProjection.summary;
+    var hasHiddenColumns = visibilityProjection.columns.length < resolvedColumns.length;
+    var resolvedColumnSortable = pivotEnabled || hasHiddenColumns ? false : columnSortable;
     var resolvedDataControl = pivotEnabled ? undefined : dataControl;
     var resolvedSearchOptions = pivotEnabled ? undefined : searchOptions;
     var resolvedContextMenuOptions = pivotEnabled ? undefined : contextMenuOptions;
@@ -148,6 +203,15 @@ function BGrid(_a) {
                 warnedSearchControlledRef.current.pivotContextMenu = true;
                 console.warn('[BGrid] contextMenuOptions is disabled while pivot mode is active.');
             }
+            if (hasHiddenColumns && columnSortable) {
+                console.warn('[BGrid] Column reordering is disabled while columns are hidden.');
+            }
+            if ((visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.hiddenColumnIds) !== undefined &&
+                !visibilityOptions.onChange &&
+                !warnedSearchControlledRef.current.columnVisibility) {
+                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) {
@@ -173,8 +237,18 @@ function BGrid(_a) {
         resolvedSort,
         contextMenuOptions,
         searchOptions,
+        columnSortable,
+        hasHiddenColumns,
+        visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.hiddenColumnIds,
+        visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.onChange,
     ]);
-    var duplicateToolboxColumnIds = React.useMemo(function () { return (0, utils_1.findDuplicateColumnIds)(resolvedColumns, true); }, [resolvedColumns]);
+    var duplicateToolboxColumnIds = React.useMemo(function () {
+        var duplicates = (0, utils_1.findDuplicateColumnIds)(resolvedColumns, true);
+        if (visibilityEnabled) {
+            (0, utils_1.findDuplicateColumnIds)(resolvedColumns).forEach(function (columnId) { return duplicates.add(columnId); });
+        }
+        return duplicates;
+    }, [resolvedColumns, visibilityEnabled]);
     var warnedDuplicateIdsRef = React.useRef(new Set());
     React.useEffect(function () {
         if (process.env.NODE_ENV === 'production')
@@ -183,30 +257,82 @@ function BGrid(_a) {
         if (newDuplicateIds.length === 0)
             return;
         newDuplicateIds.forEach(function (id) { return warnedDuplicateIdsRef.current.add(id); });
-        console.warn("[BGrid] Duplicate column IDs detected: ".concat(newDuplicateIds.join(', '), ". Toolbox is disabled for those columns; specify an explicit unique 'id'."));
-    }, [duplicateToolboxColumnIds]);
+        console.warn("[BGrid] Duplicate column IDs detected: ".concat(newDuplicateIds.join(', '), ". Toolbox").concat(visibilityEnabled ? ' and column visibility are' : ' is', " disabled for those columns; specify an explicit unique 'id'."));
+    }, [duplicateToolboxColumnIds, visibilityEnabled]);
+    var requestColumnVisibilityChange = React.useCallback(function (nextHiddenColumnIds, event) {
+        var _a;
+        var uniqueIds = Array.from(new Set(nextHiddenColumnIds));
+        if (event.type === 'hide') {
+            var visibleCount = resolvedColumns.reduce(function (count, column) { return count + (uniqueIds.includes((0, utils_1.getColumnId)(column)) ? 0 : 1); }, 0);
+            if (visibleCount === 0)
+                return;
+        }
+        if ((visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.hiddenColumnIds) === undefined) {
+            setUncontrolledHiddenColumnIds(uniqueIds);
+        }
+        (_a = visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.onChange) === null || _a === void 0 ? void 0 : _a.call(visibilityOptions, uniqueIds, event);
+    }, [resolvedColumns, visibilityOptions]);
+    var columnVisibilityState = React.useMemo(function () {
+        return visibilityEnabled
+            ? {
+                items: resolvedColumns.map(function (column) {
+                    var columnId = (0, utils_1.getColumnId)(column);
+                    return {
+                        column: column,
+                        columnId: columnId,
+                        hidden: hiddenColumnIdSet.has(columnId),
+                        hideable: column.hideable !== false && !duplicateToolboxColumnIds.has(columnId),
+                    };
+                }),
+                hiddenColumnIds: hiddenColumnIds,
+                onChange: requestColumnVisibilityChange,
+            }
+            : undefined;
+    }, [
+        duplicateToolboxColumnIds,
+        hiddenColumnIdSet,
+        hiddenColumnIds,
+        requestColumnVisibilityChange,
+        resolvedColumns,
+        visibilityEnabled,
+    ]);
     var computedColumns = React.useMemo(function () {
-        var left = 0;
-        var prevWidth = 0;
-        return __spreadArray(__spreadArray([], __read(resolvedColumns.slice(0, resolvedFrozenColumnIndex).map(function (column) {
-            var _a;
-            var columnId = (0, utils_1.getColumnId)(column);
-            return __assign(__assign({}, column), { columnId: columnId, keyToken: (0, utils_1.getColumnKeyToken)(column.key), toolbox: duplicateToolboxColumnIds.has(columnId) ? false : column.toolbox, left: -1, width: (_a = column.width) !== null && _a !== void 0 ? _a : 100 });
-        })), false), __read(resolvedColumns.slice(resolvedFrozenColumnIndex).map(function (column) {
-            var _a, _b;
-            left += prevWidth;
-            prevWidth = (_a = column.width) !== null && _a !== void 0 ? _a : 100;
-            var columnId = (0, utils_1.getColumnId)(column);
-            return __assign(__assign({}, column), { columnId: columnId, keyToken: (0, utils_1.getColumnKeyToken)(column.key), toolbox: duplicateToolboxColumnIds.has(columnId) ? false : column.toolbox, left: left, width: (_b = column.width) !== null && _b !== void 0 ? _b : 100 });
-        })), false);
-    }, [duplicateToolboxColumnIds, resolvedColumns, resolvedFrozenColumnIndex]);
+        return computeModelColumns(visibilityProjection.columns, resolvedFrozenColumnIndex, duplicateToolboxColumnIds);
+    }, [duplicateToolboxColumnIds, resolvedFrozenColumnIndex, visibilityProjection.columns]);
+    var queryColumns = React.useMemo(function () { return computeModelColumns(resolvedColumns, pivotEnabled ? 0 : frozenColumnIndex, duplicateToolboxColumnIds); }, [duplicateToolboxColumnIds, frozenColumnIndex, pivotEnabled, resolvedColumns]);
+    var projectedOnChangeColumns = React.useCallback(function (visibleColumnIndex, info) {
+        var _a;
+        if (!baseOnChangeColumns)
+            return;
+        if (!hasHiddenColumns) {
+            baseOnChangeColumns(visibleColumnIndex, info);
+            return;
+        }
+        var nextColumns = __spreadArray([], __read(resolvedColumns), false);
+        visibilityProjection.visibleOriginalIndexes.forEach(function (originalIndex, visibleIndex) {
+            var updatedColumn = info.columns[visibleIndex];
+            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,
+        hasHiddenColumns,
+        resolvedColumnGroups,
+        resolvedColumns,
+        resolvedColumnsGroup,
+        visibilityProjection.visibleOriginalIndexes,
+    ]);
+    var resolvedOnChangeColumns = baseOnChangeColumns ? projectedOnChangeColumns : undefined;
     var headerMatrixDiagnostics = React.useMemo(function () {
         return (0, utils_1.buildHeaderMatrix)({
             columns: computedColumns,
-            columnsGroup: resolvedColumnsGroup,
-            columnGroups: resolvedColumnGroups,
+            columnsGroup: visibilityProjection.columnsGroup,
+            columnGroups: visibilityProjection.columnGroups,
         });
-    }, [computedColumns, resolvedColumnGroups, resolvedColumnsGroup]);
+    }, [computedColumns, visibilityProjection.columnGroups, visibilityProjection.columnsGroup]);
     React.useEffect(function () {
         if (process.env.NODE_ENV === 'production')
             return;
@@ -221,9 +347,9 @@ function BGrid(_a) {
     var unknownQueryColumnIds = React.useMemo(function () {
         if (!resolvedDataControl)
             return [];
-        var knownIds = new Set(computedColumns.map(function (column) { return column.columnId; }));
+        var knownIds = new Set(queryColumns.map(function (column) { return column.columnId; }));
         return Array.from(new Set(__spreadArray(__spreadArray([], __read(resolvedDataControl.query.sortParams.map(function (param) { var _a; return (_a = param.columnId) !== null && _a !== void 0 ? _a : param.key; })), false), __read(resolvedDataControl.query.filterParams.map(function (param) { return param.columnId; })), false).filter(function (id) { return !!id && !knownIds.has(id); })));
-    }, [computedColumns, resolvedDataControl]);
+    }, [queryColumns, resolvedDataControl]);
     var warnedUnknownQueryIdsRef = React.useRef(new Set());
     React.useEffect(function () {
         if (process.env.NODE_ENV === 'production')
@@ -257,7 +383,7 @@ function BGrid(_a) {
         if ((resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode) === 'client') {
             return (0, utils_1.processDataQuery)({
                 data: resolvedData,
-                columns: computedColumns,
+                columns: queryColumns,
                 query: resolvedDataQuery,
                 rowKey: resolvedRowKey,
                 includeRows: false,
@@ -271,7 +397,7 @@ function BGrid(_a) {
             sourceIndexByVisibleIndex: sourceIndexByVisibleIndex,
             visibleIndexBySourceIndex: visibleIndexBySourceIndex,
         };
-    }, [computedColumns, resolvedData, resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode, resolvedDataQuery, resolvedRowKey]);
+    }, [queryColumns, resolvedData, resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode, resolvedDataQuery, resolvedRowKey]);
     var displayData = processedResult.data;
     var resolvedFrozenRowCount = pivotEnabled
         ? 0
@@ -376,8 +502,8 @@ function BGrid(_a) {
                 reorderable: (_a = resolvedReorder === null || resolvedReorder === void 0 ? void 0 : resolvedReorder.enabled) !== null && _a !== void 0 ? _a : false,
             }),
             columns: computedColumns,
-            columnsGroup: resolvedColumnsGroup,
-            columnGroups: resolvedColumnGroups,
+            columnsGroup: visibilityProjection.columnsGroup,
+            columnGroups: visibilityProjection.columnGroups,
             data: displayData,
             sourceData: resolvedData,
             sourceIndexByVisibleIndex: processedResult.sourceIndexByVisibleIndex,
@@ -392,6 +518,7 @@ function BGrid(_a) {
             dataQuery: resolvedDataQuery,
             dataControl: resolvedDataControl,
             icons: icons,
+            columnVisibilityState: columnVisibilityState,
             searchOptions: resolvedSearchOptions,
             contextMenuOptions: resolvedContextMenuOptions,
             page: resolvedPage,
@@ -445,13 +572,14 @@ function BGrid(_a) {
         resolvedRowChecked,
         computedColumns,
         resolvedReorder,
-        resolvedColumnsGroup,
-        resolvedColumnGroups,
+        visibilityProjection.columnsGroup,
+        visibilityProjection.columnGroups,
         resolvedSort,
         sortParams,
         resolvedDataQuery,
         resolvedDataControl,
         icons,
+        columnVisibilityState,
         resolvedSearchOptions,
         resolvedContextMenuOptions,
         loading,
@@ -476,15 +604,15 @@ function BGrid(_a) {
     ]);
     return (React.createElement(store_1.AppStoreProvider, { initialState: initialStoreState },
         React.createElement(Table_1.default, { ref: ref, columns: computedColumns,
-            columnsGroup: resolvedColumnsGroup,
-            columnGroups: resolvedColumnGroups,
+            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,
             scrollbar: resolvedScrollbar,
             status: resolvedStatus,
             pagination: resolvedPagination, summaryHeight: summaryHeight, itemHeight: itemHeight, itemPadding: itemPadding, frozenColumnIndex: resolvedFrozenColumnIndex,
             frozenRowCount: resolvedFrozenRowCount,
             rowChecked: resolvedRowChecked, checkedIndexesMap: checkedIndexesMap, sort: resolvedSort, sortParams: sortParams, dataQuery: resolvedDataQuery,
-            dataControl: resolvedDataControl, icons: icons, searchOptions: resolvedSearchOptions,
+            dataControl: resolvedDataControl, icons: icons, columnVisibilityState: columnVisibilityState, searchOptions: resolvedSearchOptions,
             contextMenuOptions: resolvedContextMenuOptions,
             page: resolvedPage,
             data: displayData,