beautiful-grid 1.0.4 → 1.0.6

package/cjs/components/Table.js

@@ -163,12 +163,13 @@ var LazyGridOptionalSurfaces = React.lazy(function () {
     }); });
 });
 function Table(props) {
+    var _a;
     var _this = this;
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
     var cellSelectionOptions = props.cellSelectionOptions, onChangeData = props.onChangeData, sourceIndexByVisibleIndex = props.sourceIndexByVisibleIndex;
-    var cellSelectionEnabled = (_a = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.enabled) !== null && _a !== void 0 ? _a : true;
+    var cellSelectionEnabled = (_b = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.enabled) !== null && _b !== void 0 ? _b : true;
     // [Selector Group 1] Layout & Dimensions - 레이아웃 차원
-    var _6 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _7 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         width: s.width,
         height: s.height,
         containerBorderWidth: s.containerBorderWidth,
@@ -176,30 +177,30 @@ function Table(props) {
         style: s.style,
         itemHeight: s.itemHeight,
         itemPadding: s.itemPadding,
-    }); })), width = _6.width, height = _6.height, containerBorderWidth = _6.containerBorderWidth, className = _6.className, style = _6.style, itemHeight = _6.itemHeight, itemPadding = _6.itemPadding;
+    }); })), width = _7.width, height = _7.height, containerBorderWidth = _7.containerBorderWidth, className = _7.className, style = _7.style, itemHeight = _7.itemHeight, itemPadding = _7.itemPadding;
     // [Selector Group 2] Header, Footer, Summary - 헤더/푸터/요약
-    var _7 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _8 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         headerHeight: s.headerHeight,
         footerHeight: s.footerHeight,
         bottomBarHeight: s.bottomBarHeight,
         summaryHeight: s.summaryHeight,
-    }); })), headerHeight = _7.headerHeight, footerHeight = _7.footerHeight, bottomBarHeight = _7.bottomBarHeight, summaryHeight = _7.summaryHeight;
+    }); })), headerHeight = _8.headerHeight, footerHeight = _8.footerHeight, bottomBarHeight = _8.bottomBarHeight, summaryHeight = _8.summaryHeight;
     // [Selector Group 3] Scroll State - 스크롤 상태
-    var _8 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _9 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         scrollLeft: s.scrollLeft,
         scrollTop: s.scrollTop,
-    }); })), scrollLeft = _8.scrollLeft, scrollTop = _8.scrollTop;
+    }); })), scrollLeft = _9.scrollLeft, scrollTop = _9.scrollTop;
     // [Selector Group 4] Content, Columns, Data - 컨텐츠 관련
-    var _9 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _10 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         contentBodyHeight: s.contentBodyHeight,
         columns: s.columns,
         data: s.data,
         frozenColumnsWidth: s.frozenColumnsWidth,
         frozenRowCount: s.frozenRowCount,
         frozenRowsHeight: s.frozenRowsHeight,
-    }); })), contentBodyHeight = _9.contentBodyHeight, columns = _9.columns, data = _9.data, frozenColumnsWidth = _9.frozenColumnsWidth, frozenRowCount = _9.frozenRowCount, frozenRowsHeight = _9.frozenRowsHeight;
+    }); })), contentBodyHeight = _10.contentBodyHeight, columns = _10.columns, data = _10.data, frozenColumnsWidth = _10.frozenColumnsWidth, frozenRowCount = _10.frozenRowCount, frozenRowsHeight = _10.frozenRowsHeight;
     // [Selector Group 4-1] Cell selection & navigation - 셀 선택 및 내비게이션
-    var _10 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _11 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         cellSelectionRange: s.cellSelectionRange,
         cellSelectionRanges: s.cellSelectionRanges,
         activeCell: s.activeCell,
@@ -208,9 +209,9 @@ function Table(props) {
         editItemIndex: s.editItemIndex,
         editable: s.editable,
         handleClick: s.handleClick,
-    }); })), cellSelectionRange = _10.cellSelectionRange, cellSelectionRanges = _10.cellSelectionRanges, activeCell = _10.activeCell, activeCellHost = _10.activeCellHost, cellNavigationOptions = _10.cellNavigationOptions, editItemIndex = _10.editItemIndex, editable = _10.editable, handleClick = _10.handleClick;
+    }); })), cellSelectionRange = _11.cellSelectionRange, cellSelectionRanges = _11.cellSelectionRanges, activeCell = _11.activeCell, activeCellHost = _11.activeCellHost, cellNavigationOptions = _11.cellNavigationOptions, editItemIndex = _11.editItemIndex, editable = _11.editable, handleClick = _11.handleClick;
     // [Selector Group 5] State - 상태
-    var _11 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _12 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         rowChecked: s.rowChecked,
         page: s.page,
         loading: s.loading,
@@ -220,8 +221,8 @@ function Table(props) {
         scrollbar: s.scrollbar,
         status: s.status,
         pagination: s.pagination,
-    }); })), rowChecked = _11.rowChecked, page = _11.page, loading = _11.loading, spinning = _11.spinning, showLineNumber = _11.showLineNumber, summary = _11.summary, scrollbar = _11.scrollbar, status = _11.status, pagination = _11.pagination;
-    var _12 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    }); })), 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;
+    var _13 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         searchOpen: s.searchOpen,
         searchOptions: s.searchOptions,
         contextMenuOptions: s.contextMenuOptions,
@@ -230,9 +231,9 @@ function Table(props) {
         storeSourceIndexByVisibleIndex: s.sourceIndexByVisibleIndex,
         storeRowKey: s.rowKey,
         cellInteractionSession: s.cellInteractionSession,
-    }); })), searchOpen = _12.searchOpen, searchOptions = _12.searchOptions, contextMenuOptions = _12.contextMenuOptions, activeSearchMatchIndex = _12.activeSearchMatchIndex, searchMatches = _12.searchMatches, storeSourceIndexByVisibleIndex = _12.storeSourceIndexByVisibleIndex, storeRowKey = _12.storeRowKey, cellInteractionSession = _12.cellInteractionSession;
+    }); })), searchOpen = _13.searchOpen, searchOptions = _13.searchOptions, contextMenuOptions = _13.contextMenuOptions, activeSearchMatchIndex = _13.activeSearchMatchIndex, searchMatches = _13.searchMatches, storeSourceIndexByVisibleIndex = _13.storeSourceIndexByVisibleIndex, storeRowKey = _13.storeRowKey, cellInteractionSession = _13.cellInteractionSession;
     // [Selector Group 6] State Setters - 차원 설정자
-    var _13 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _14 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setHeight: s.setHeight,
         setWidth: s.setWidth,
         setContentBodyHeight: s.setContentBodyHeight,
@@ -245,9 +246,9 @@ function Table(props) {
         setItemPadding: s.setItemPadding,
         setLoading: s.setLoading,
         setSpinning: s.setSpinning,
-    }); })), setHeight = _13.setHeight, setWidth = _13.setWidth, setContentBodyHeight = _13.setContentBodyHeight, setDisplayItemCount = _13.setDisplayItemCount, setHeaderHeight = _13.setHeaderHeight, setFooterHeight = _13.setFooterHeight, setBottomBarHeight = _13.setBottomBarHeight, setSummaryHeight = _13.setSummaryHeight, setItemHeight = _13.setItemHeight, setItemPadding = _13.setItemPadding, setLoading = _13.setLoading, setSpinning = _13.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;
     // [Selector Group 7] Data & Column Setters - 데이터/열 설정자
-    var _14 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _15 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setData: s.setData,
         setSourceData: s.setSourceData,
         setProcessedData: s.setProcessedData,
@@ -258,9 +259,9 @@ function Table(props) {
         setFrozenColumnIndex: s.setFrozenColumnIndex,
         setFrozenRowCount: s.setFrozenRowCount,
         setFrozenRowsHeight: s.setFrozenRowsHeight,
-    }); })), setData = _14.setData, setSourceData = _14.setSourceData, setProcessedData = _14.setProcessedData, setColumns = _14.setColumns, setColumnsGroup = _14.setColumnsGroup, setColumnGroups = _14.setColumnGroups, setFrozenColumnsWidth = _14.setFrozenColumnsWidth, setFrozenColumnIndex = _14.setFrozenColumnIndex, setFrozenRowCount = _14.setFrozenRowCount, setFrozenRowsHeight = _14.setFrozenRowsHeight;
+    }); })), setData = _15.setData, setSourceData = _15.setSourceData, setProcessedData = _15.setProcessedData, setColumns = _15.setColumns, setColumnsGroup = _15.setColumnsGroup, setColumnGroups = _15.setColumnGroups, setFrozenColumnsWidth = _15.setFrozenColumnsWidth, setFrozenColumnIndex = _15.setFrozenColumnIndex, setFrozenRowCount = _15.setFrozenRowCount, setFrozenRowsHeight = _15.setFrozenRowsHeight;
     // [Selector Group 8] Row & Sort Setters - 행/정렬 설정자
-    var _15 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _16 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setRowChecked: s.setRowChecked,
         setCheckedIndexesMap: s.setCheckedIndexesMap,
         setSort: s.setSort,
@@ -268,6 +269,7 @@ function Table(props) {
         setDataQuery: s.setDataQuery,
         setDataControl: s.setDataControl,
         setIcons: s.setIcons,
+        setColumnVisibilityState: s.setColumnVisibilityState,
         setActiveToolbox: s.setActiveToolbox,
         setRowKey: s.setRowKey,
         setFocusedRowKey: s.setSelectedRowKey,
@@ -277,9 +279,9 @@ function Table(props) {
         requestSearchOpen: s.requestSearchOpen,
         openContextMenu: s.openContextMenu,
         commitCheckboxCell: s.commitCheckboxCell,
-    }); })), setRowChecked = _15.setRowChecked, setCheckedIndexesMap = _15.setCheckedIndexesMap, setSort = _15.setSort, setSortParams = _15.setSortParams, setDataQuery = _15.setDataQuery, setDataControl = _15.setDataControl, setIcons = _15.setIcons, setActiveToolbox = _15.setActiveToolbox, setRowKey = _15.setRowKey, setFocusedRowKey = _15.setFocusedRowKey, setEditItem = _15.setEditItem, setSearchOptions = _15.setSearchOptions, setContextMenuOptions = _15.setContextMenuOptions, requestSearchOpen = _15.requestSearchOpen, openContextMenu = _15.openContextMenu, commitCheckboxCell = _15.commitCheckboxCell;
+    }); })), setRowChecked = _16.setRowChecked, setCheckedIndexesMap = _16.setCheckedIndexesMap, setSort = _16.setSort, setSortParams = _16.setSortParams, setDataQuery = _16.setDataQuery, setDataControl = _16.setDataControl, setIcons = _16.setIcons, setColumnVisibilityState = _16.setColumnVisibilityState, setActiveToolbox = _16.setActiveToolbox, setRowKey = _16.setRowKey, setFocusedRowKey = _16.setFocusedRowKey, setEditItem = _16.setEditItem, setSearchOptions = _16.setSearchOptions, setContextMenuOptions = _16.setContextMenuOptions, requestSearchOpen = _16.requestSearchOpen, openContextMenu = _16.openContextMenu, commitCheckboxCell = _16.commitCheckboxCell;
     // [Selector Group 9] Pagination & Display Setters - 페이지/표시 설정자
-    var _16 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _17 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setPage: s.setPage,
         setDisplayPaginationLength: s.setDisplayPaginationLength,
         setShowLineNumber: s.setShowLineNumber,
@@ -295,9 +297,9 @@ function Table(props) {
         setScrollbar: s.setScrollbar,
         setStatus: s.setStatus,
         setPagination: s.setPagination,
-    }); })), setPage = _16.setPage, setDisplayPaginationLength = _16.setDisplayPaginationLength, setShowLineNumber = _16.setShowLineNumber, setMsg = _16.setMsg, setRowClassName = _16.setRowClassName, setCellMergeOptions = _16.setCellMergeOptions, setVariant = _16.setVariant, setSummary = _16.setSummary, setColumnSortable = _16.setColumnSortable, setReorder = _16.setReorder, setClassName = _16.setClassName, setStyle = _16.setStyle, setScrollbar = _16.setScrollbar, setStatus = _16.setStatus, setPagination = _16.setPagination;
+    }); })), setPage = _17.setPage, setDisplayPaginationLength = _17.setDisplayPaginationLength, setShowLineNumber = _17.setShowLineNumber, setMsg = _17.setMsg, setRowClassName = _17.setRowClassName, setCellMergeOptions = _17.setCellMergeOptions, setVariant = _17.setVariant, setSummary = _17.setSummary, setColumnSortable = _17.setColumnSortable, setReorder = _17.setReorder, setClassName = _17.setClassName, setStyle = _17.setStyle, setScrollbar = _17.setScrollbar, setStatus = _17.setStatus, setPagination = _17.setPagination;
     // [Selector Group 10] Edit & Event Setters - 편집/이벤트 설정자
-    var _17 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    var _18 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setEditable: s.setEditable,
         setEditTrigger: s.setEditTrigger,
         setOnClick: s.setOnClick,
@@ -306,8 +308,8 @@ function Table(props) {
         setOnLoadMore: s.setOnLoadMore,
         setScroll: s.setScroll,
         setInitialized: s.setInitialized,
-    }); })), setEditable = _17.setEditable, setEditTrigger = _17.setEditTrigger, setOnClick = _17.setOnClick, setOnChangeColumns = _17.setOnChangeColumns, setOnChangeData = _17.setOnChangeData, setOnLoadMore = _17.setOnLoadMore, setScroll = _17.setScroll, setInitialized = _17.setInitialized;
-    var _18 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+    }); })), setEditable = _18.setEditable, setEditTrigger = _18.setEditTrigger, setOnClick = _18.setOnClick, setOnChangeColumns = _18.setOnChangeColumns, setOnChangeData = _18.setOnChangeData, setOnLoadMore = _18.setOnLoadMore, setScroll = _18.setScroll, setInitialized = _18.setInitialized;
+    var _19 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setCellSelectionRanges: s.setCellSelectionRanges,
         setCellSelecting: s.setCellSelecting,
         clearCellSelection: s.clearCellSelection,
@@ -315,9 +317,10 @@ function Table(props) {
         moveActiveCell: s.moveActiveCell,
         setCellNavigationOptions: s.setCellNavigationOptions,
         syncActiveCellToBounds: s.syncActiveCellToBounds,
-    }); })), setCellSelectionRanges = _18.setCellSelectionRanges, setCellSelecting = _18.setCellSelecting, clearCellSelection = _18.clearCellSelection, setActiveCell = _18.setActiveCell, moveActiveCell = _18.moveActiveCell, setCellNavigationOptions = _18.setCellNavigationOptions, syncActiveCellToBounds = _18.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 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 virtualScrollWindowMetrics = React.useMemo(function () {
@@ -327,7 +330,7 @@ function Table(props) {
             enabled: scrollbar.variant !== 'native',
         });
     }, [contentBodyHeight, logicalBodyContentHeight, scrollbar.variant]);
-    var _19 = __read(React.useState(0), 2), virtualScrollBase = _19[0], setVirtualScrollBase = _19[1];
+    var _20 = __read(React.useState(0), 2), virtualScrollBase = _20[0], setVirtualScrollBase = _20[1];
     var virtualScrollBaseRef = (0, react_1.useRef)(0);
     var containerRef = (0, react_1.useRef)(null);
     var searchPopoverRef = (0, react_1.useRef)(null);
@@ -337,7 +340,8 @@ function Table(props) {
     var logicalVerticalScrollState = React.useMemo(function () { return ({
         scrollTop: scrollTop,
         scrollHeight: virtualScrollWindowMetrics.logicalContentHeight,
-    }); }, [scrollTop, virtualScrollWindowMetrics.logicalContentHeight]);
+        maxScrollTop: virtualScrollWindowMetrics.logicalMaxScroll,
+    }); }, [scrollTop, virtualScrollWindowMetrics.logicalContentHeight, virtualScrollWindowMetrics.logicalMaxScroll]);
     var hasMultiCellSelection = React.useMemo(function () {
         return cellSelectionRanges.length > 1 ||
             cellSelectionRanges.some(function (range) {
@@ -440,16 +444,18 @@ function Table(props) {
             }, offsetTop: !topQuadrant && virtualScrollWindowMetrics.enabled ? virtualScrollBase : 0 }));
     };
     var visibleScrollableRows = React.useMemo(function () {
-        var _a;
+        var _a, _b, _c;
         return (0, utils_1.getVisibleScrollableRowRange)({
             scrollTop: scrollTop,
             viewportHeight: scrollableBodyHeight,
             rowHeight: trHeight,
             frozenRowCount: frozenRowCount,
             totalRowCount: data.length,
-            windowSize: ((_a = props.reorder) === null || _a === void 0 ? void 0 : _a.enabled) ? 1 : KEYBOARD_NAVIGATION_ROW_WINDOW_SIZE,
+            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,
         });
-    }, [data.length, frozenRowCount, (_b = props.reorder) === null || _b === void 0 ? void 0 : _b.enabled, 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,
@@ -619,7 +625,7 @@ function Table(props) {
     var latestCommittedScrollRef = (0, react_1.useRef)({ top: scrollTop, left: scrollLeft });
     var scrollPropsRef = (0, react_1.useRef)({ top: props.scrollTop, left: props.scrollLeft });
     var syncedDataPropRef = (0, react_1.useRef)(props.data);
-    var _20 = __read(React.useState(null), 2), rowScrollRequest = _20[0], setRowScrollRequest = _20[1];
+    var _21 = __read(React.useState(null), 2), rowScrollRequest = _21[0], setRowScrollRequest = _21[1];
     React.useImperativeHandle(props.ref, function () { return ({
         scrollToRow: function (rowIndex, options) {
             var _a;
@@ -636,7 +642,7 @@ function Table(props) {
     var selectionMetricsRef = (0, react_1.useRef)({
         columns: columns,
         dataLength: data.length,
-        frozenColumnIndex: (_c = props.frozenColumnIndex) !== null && _c !== void 0 ? _c : 0,
+        frozenColumnIndex: (_d = props.frozenColumnIndex) !== null && _d !== void 0 ? _d : 0,
         frozenRowCount: frozenRowCount,
         frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
         frozenRowsHeight: frozenRowsHeight,
@@ -1498,7 +1504,7 @@ function Table(props) {
         setFrozenColumnIndex((_d = props.frozenColumnIndex) !== null && _d !== void 0 ? _d : 0);
     }, [
         props.frozenColumnIndex,
-        (_d = props.reorder) === null || _d === void 0 ? void 0 : _d.enabled,
+        (_e = props.reorder) === null || _e === void 0 ? void 0 : _e.enabled,
         showLineNumber,
         rowChecked,
         itemHeight,
@@ -1514,7 +1520,7 @@ function Table(props) {
         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, (_e = props.data) === null || _e === void 0 ? void 0 : _e.length, props.frozenRowCount, setFrozenRowCount, setFrozenRowsHeight, trHeight]);
+    }, [data.length, (_f = props.data) === null || _f === void 0 ? void 0 : _f.length, props.frozenRowCount, setFrozenRowCount, setFrozenRowsHeight, trHeight]);
     // [Group 5] Data & columns
     (0, react_1.useEffect)(function () {
         if (props.data !== undefined &&
@@ -1563,6 +1569,7 @@ function Table(props) {
         setSortParams(props.sortParams);
         setDataControl(props.dataControl);
         setIcons(props.icons);
+        setColumnVisibilityState(props.columnVisibilityState);
         setSearchOptions(props.searchOptions);
         setContextMenuOptions(props.contextMenuOptions);
     }, [
@@ -1571,6 +1578,7 @@ function Table(props) {
         props.sortParams,
         props.dataControl,
         props.icons,
+        props.columnVisibilityState,
         props.searchOptions,
         props.contextMenuOptions,
         setRowChecked,
@@ -1578,6 +1586,7 @@ function Table(props) {
         setSortParams,
         setDataControl,
         setIcons,
+        setColumnVisibilityState,
         setSearchOptions,
         setContextMenuOptions,
     ]);
@@ -1605,23 +1614,23 @@ function Table(props) {
         }
     }, [
         props.page,
-        (_f = props.page) === null || _f === void 0 ? void 0 : _f.currentPage,
-        (_g = props.page) === null || _g === void 0 ? void 0 : _g.loading,
-        (_h = props.page) === null || _h === void 0 ? void 0 : _h.pageSize,
-        (_j = props.page) === null || _j === void 0 ? void 0 : _j.totalPages,
-        (_k = props.page) === null || _k === void 0 ? void 0 : _k.totalElements,
-        (_l = props.page) === null || _l === void 0 ? void 0 : _l.onChange,
-        (_m = props.page) === null || _m === void 0 ? void 0 : _m.displayPaginationLength,
+        (_g = props.page) === null || _g === void 0 ? void 0 : _g.currentPage,
+        (_h = props.page) === null || _h === void 0 ? void 0 : _h.loading,
+        (_j = props.page) === null || _j === void 0 ? void 0 : _j.pageSize,
+        (_k = props.page) === null || _k === void 0 ? void 0 : _k.totalPages,
+        (_l = props.page) === null || _l === void 0 ? void 0 : _l.totalElements,
+        (_m = props.page) === null || _m === void 0 ? void 0 : _m.onChange,
+        (_o = props.page) === null || _o === void 0 ? void 0 : _o.displayPaginationLength,
         setPage,
         setDisplayPaginationLength,
     ]);
-    var previousPageRef = (0, react_1.useRef)((_o = props.page) === null || _o === void 0 ? void 0 : _o.currentPage);
+    var previousPageRef = (0, react_1.useRef)((_p = props.page) === null || _p === void 0 ? void 0 : _p.currentPage);
     (0, react_1.useEffect)(function () {
         var _a, _b;
         if (previousPageRef.current !== ((_a = props.page) === null || _a === void 0 ? void 0 : _a.currentPage))
             resetScrollPosition('top');
         previousPageRef.current = (_b = props.page) === null || _b === void 0 ? void 0 : _b.currentPage;
-    }, [resetScrollPosition, (_p = props.page) === null || _p === void 0 ? void 0 : _p.currentPage]);
+    }, [resetScrollPosition, (_q = props.page) === null || _q === void 0 ? void 0 : _q.currentPage]);
     // [Group 8] Row key & selection
     (0, react_1.useEffect)(function () {
         setRowKey(props.rowKey);
@@ -1693,10 +1702,10 @@ function Table(props) {
     }, [
         columns.length,
         data.length,
-        (_r = (_q = props.cellNavigationOptions) === null || _q === void 0 ? void 0 : _q.activeCell) === null || _r === void 0 ? void 0 : _r.columnIndex,
-        (_t = (_s = props.cellNavigationOptions) === null || _s === void 0 ? void 0 : _s.activeCell) === null || _t === void 0 ? void 0 : _t.rowIndex,
-        (_v = (_u = props.cellNavigationOptions) === null || _u === void 0 ? void 0 : _u.defaultActiveCell) === null || _v === void 0 ? void 0 : _v.columnIndex,
-        (_x = (_w = props.cellNavigationOptions) === null || _w === void 0 ? void 0 : _w.defaultActiveCell) === null || _x === void 0 ? void 0 : _x.rowIndex,
+        (_s = (_r = props.cellNavigationOptions) === null || _r === void 0 ? void 0 : _r.activeCell) === null || _s === void 0 ? void 0 : _s.columnIndex,
+        (_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,
         syncActiveCellToBounds,
     ]);
     // setInitialized + DOM event bindings
@@ -1818,8 +1827,8 @@ function Table(props) {
         endCellSelectionDrag();
         clearCellSelection();
     }, [cellSelectionEnabled, clearCellSelection, endCellSelectionDrag]);
-    var clearCellSelectionOnEscape = (_z = (_y = props.cellSelectionOptions) === null || _y === void 0 ? void 0 : _y.clearOnEscape) !== null && _z !== void 0 ? _z : true;
-    var clearCellSelectionOnOutsideClick = (_1 = (_0 = props.cellSelectionOptions) === null || _0 === void 0 ? void 0 : _0.clearOnOutsideClick) !== null && _1 !== void 0 ? _1 : true;
+    var clearCellSelectionOnEscape = (_0 = (_z = props.cellSelectionOptions) === null || _z === void 0 ? void 0 : _z.clearOnEscape) !== null && _0 !== void 0 ? _0 : true;
+    var clearCellSelectionOnOutsideClick = (_2 = (_1 = props.cellSelectionOptions) === null || _1 === void 0 ? void 0 : _1.clearOnOutsideClick) !== null && _2 !== void 0 ? _2 : true;
     var keyboardRuntimeRef = (0, react_1.useRef)({
         activeCell: activeCell,
         cellInteractionSession: cellInteractionSession,
@@ -1837,7 +1846,7 @@ function Table(props) {
         editable: editable,
         editItemIndex: editItemIndex,
         endCellSelectionDrag: endCellSelectionDrag,
-        frozenColumnIndex: (_2 = props.frozenColumnIndex) !== null && _2 !== void 0 ? _2 : 0,
+        frozenColumnIndex: (_3 = props.frozenColumnIndex) !== null && _3 !== void 0 ? _3 : 0,
         frozenRowCount: frozenRowCount,
         height: height,
         handleClick: handleClick,
@@ -1870,7 +1879,7 @@ function Table(props) {
         editable: editable,
         editItemIndex: editItemIndex,
         endCellSelectionDrag: endCellSelectionDrag,
-        frozenColumnIndex: (_3 = props.frozenColumnIndex) !== null && _3 !== void 0 ? _3 : 0,
+        frozenColumnIndex: (_4 = props.frozenColumnIndex) !== null && _4 !== void 0 ? _4 : 0,
         frozenRowCount: frozenRowCount,
         height: height,
         handleClick: handleClick,
@@ -2252,14 +2261,14 @@ function Table(props) {
         };
     }, []);
     return (React.createElement(EditorPortalRoot_1.EditorPortalContext.Provider, { value: editorPortalContext },
-        React.createElement(Container, { ref: containerRef, role: 'grid', style: __assign(__assign({}, style), { width: width, height: height, borderWidth: "".concat(containerBorderWidth, "px") }), 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, 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": ((_4 = props.frozenColumnIndex) !== null && _4 !== void 0 ? _4 : 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' },
             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,
@@ -2288,6 +2297,11 @@ function Table(props) {
                             React.createElement(TableSummaryFronzen_1.TableSummaryFrozen, { position: 'top' }))),
                         React.createElement(Summary, { style: { left: frozenColumnsWidth }, role: 'rfdg-summary' },
                             React.createElement(TableSummary_1.TableSummary, { position: 'top' })))),
+                    React.createElement("div", { className: 'bgrid-virtual-row-backdrop', "aria-hidden": 'true', style: {
+                            top: stickyTopHeight,
+                            height: contentBodyHeight,
+                            marginBottom: -contentBodyHeight,
+                        } }),
                     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' },
@@ -2318,7 +2332,7 @@ function Table(props) {
                         React.createElement(Summary, { style: { left: frozenColumnsWidth }, role: 'rfdg-summary' },
                             React.createElement(TableSummary_1.TableSummary, { position: 'bottom' })))))),
             React.createElement(BodyViewport, { ref: bodyContainerRef, style: { top: stickyTopHeight, height: contentBodyHeight }, "data-last": !page ? 'true' : undefined },
-                ((_5 = rowReorderController.preview) === null || _5 === void 0 ? void 0 : _5.visible) && (React.createElement("div", { className: 'bgrid-row-reorder-preview', "data-bgrid-row-reorder-phase": rowReorderController.preview.phase, "aria-hidden": 'true' }, rowReorderController.preview.text)),
+                ((_6 = rowReorderController.preview) === null || _6 === void 0 ? void 0 : _6.visible) && (React.createElement("div", { className: 'bgrid-row-reorder-preview', "data-bgrid-row-reorder-phase": rowReorderController.preview.phase, "aria-hidden": 'true' }, rowReorderController.preview.text)),
                 React.createElement(Loading_1.default, { active: !!spinning, size: 'small' })),
             React.createElement("div", { className: 'bgrid-visually-hidden', role: 'status', "aria-live": 'polite', "aria-atomic": 'true' }, rowReorderController.announcement),
             React.createElement(CellTextEditorGateway_1.CellTextEditorGateway, { containerRef: containerRef }),

package/cjs/components/TableHeadColumn.js

@@ -57,12 +57,15 @@ function TableHeadColumn(_a) {
     var activeToolboxColumnId = (0, store_1.useAppStore)(function (s) { return s.activeToolboxColumnId; });
     var setActiveToolbox = (0, store_1.useAppStore)(function (s) { return s.setActiveToolbox; });
     var globalIcons = (0, store_1.useAppStore)(function (s) { return s.icons; });
+    var columnVisibilityState = (0, store_1.useAppStore)(function (s) { return s.columnVisibilityState; });
     var columnId = (_b = column.columnId) !== null && _b !== void 0 ? _b : (0, utils_1.getColumnId)(column);
     var buttonRef = (0, react_1.useRef)(null);
     var reactId = React.useId().replace(/:/g, '');
     var triggerId = "bgrid-toolbox-btn-".concat(reactId);
     var dialogId = "bgrid-toolbox-dialog-".concat(reactId);
-    var isToolboxEnabled = !!column.toolbox;
+    var visibilityItem = columnVisibilityState === null || columnVisibilityState === void 0 ? void 0 : columnVisibilityState.items.find(function (item) { return item.columnId === columnId; });
+    var isVisibilityMenuEnabled = !!columnVisibilityState && (!!(visibilityItem === null || visibilityItem === void 0 ? void 0 : visibilityItem.hideable) || columnVisibilityState.items.some(function (item) { return item.hidden; }));
+    var isToolboxEnabled = !!column.toolbox || isVisibilityMenuEnabled;
     var isToolboxOpen = activeToolboxColumnId === columnId;
     var columnIcons = typeof column.toolbox === 'object' ? column.toolbox.icons : undefined;
     var hasCheckboxHeader = ((_c = column.editor) === null || _c === void 0 ? void 0 : _c.type) === 'checkbox' && !!column.editor.header;

package/cjs/components/toolbox/TableHeadToolbox.js

@@ -75,11 +75,13 @@ exports.TableHeadToolbox = TableHeadToolbox;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_dom_1 = require("react-dom");
+var store_1 = require("../../store");
 var ToolboxSortSection_1 = require("./ToolboxSortSection");
 var ToolboxValueFilterSection_1 = require("./ToolboxValueFilterSection");
 var ToolboxTextFilterSection_1 = require("./ToolboxTextFilterSection");
 var ToolboxNumberFilterSection_1 = require("./ToolboxNumberFilterSection");
 var ToolboxCustomSection_1 = require("./ToolboxCustomSection");
+var ToolboxColumnVisibilitySection_1 = require("./ToolboxColumnVisibilitySection");
 var EditorPortalRoot_1 = require("../EditorPortalRoot");
 function readToolboxTheme(anchorEl) {
     var e_1, _a;
@@ -155,6 +157,7 @@ function TableHeadToolbox(_a) {
     var popoverRef = (0, react_1.useRef)(null);
     var floatingPortal = React.useContext(EditorPortalRoot_1.EditorPortalContext);
     var _d = __read((0, react_1.useState)({ top: -9999, left: -9999 }), 2), position = _d[0], setPosition = _d[1];
+    var _e = __read((0, react_1.useState)('menu'), 2), visibilityMode = _e[0], setVisibilityMode = _e[1];
     var toolboxThemeStyle = React.useMemo(function () { return readToolboxTheme(anchorEl); }, [anchorEl]);
     var toolboxConfig = typeof column.toolbox === 'object' ? column.toolbox : undefined;
     var showSort = column.sortDisable !== true &&
@@ -162,6 +165,7 @@ function TableHeadToolbox(_a) {
     var filterType = typeof column.filter === 'object' && ((_b = column.filter) === null || _b === void 0 ? void 0 : _b.type) ? column.filter.type : 'values';
     var showFilter = column.filter !== false &&
         (column.toolbox === true || (toolboxConfig === null || toolboxConfig === void 0 ? void 0 : toolboxConfig.filter) === true);
+    var showColumnVisibility = !!(0, store_1.useAppStore)(function (s) { return s.columnVisibilityState; });
     // Position calculation with boundary adjustments
     var updatePosition = React.useCallback(function () {
         if (!anchorEl || !anchorEl.isConnected || !popoverRef.current) {
@@ -299,10 +303,11 @@ function TableHeadToolbox(_a) {
     if (typeof document === 'undefined')
         return null;
     return (0, react_dom_1.createPortal)(React.createElement("div", { ref: popoverRef, id: dialogId, role: "dialog", "aria-modal": "true", "aria-labelledby": triggerId, className: "bgrid-toolbox-popover", style: __assign(__assign({}, toolboxThemeStyle), { top: "".concat(position.top, "px"), left: "".concat(position.left, "px") }), onClick: function (e) { return e.stopPropagation(); } },
-        showSort && React.createElement(ToolboxSortSection_1.ToolboxSortSection, { column: column, columnId: columnId }),
-        showFilter && (React.createElement(React.Fragment, null,
+        visibilityMode === 'menu' && showSort && React.createElement(ToolboxSortSection_1.ToolboxSortSection, { column: column, columnId: columnId }),
+        visibilityMode === 'menu' && showFilter && (React.createElement(React.Fragment, null,
             filterType === 'values' && (React.createElement(ToolboxValueFilterSection_1.ToolboxValueFilterSection, { column: column, columnId: columnId })),
             filterType === 'text' && (React.createElement(ToolboxTextFilterSection_1.ToolboxTextFilterSection, { column: column, columnId: columnId })),
             filterType === 'number' && (React.createElement(ToolboxNumberFilterSection_1.ToolboxNumberFilterSection, { column: column, columnId: columnId })))),
-        toolboxConfig && (React.createElement(ToolboxCustomSection_1.ToolboxCustomSection, { column: column, columnId: columnId, columnIndex: columnIndex, config: toolboxConfig, close: onClose }))), (_c = floatingPortal === null || floatingPortal === void 0 ? void 0 : floatingPortal.portalRef.current) !== null && _c !== void 0 ? _c : document.body);
+        visibilityMode === 'menu' && toolboxConfig && (React.createElement(ToolboxCustomSection_1.ToolboxCustomSection, { column: column, columnId: columnId, columnIndex: columnIndex, config: toolboxConfig, close: onClose })),
+        showColumnVisibility && (React.createElement(ToolboxColumnVisibilitySection_1.ToolboxColumnVisibilitySection, { column: column, columnId: columnId, mode: visibilityMode, onModeChange: setVisibilityMode, close: onClose }))), (_c = floatingPortal === null || floatingPortal === void 0 ? void 0 : floatingPortal.portalRef.current) !== null && _c !== void 0 ? _c : document.body);
 }

package/cjs/components/toolbox/ToolboxColumnVisibilitySection.js

@@ -0,0 +1,131 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolboxColumnVisibilitySection = ToolboxColumnVisibilitySection;
+var React = __importStar(require("react"));
+var store_1 = require("../../store");
+function accessibleLabel(label, fallback) {
+    return typeof label === 'string' || typeof label === 'number' ? String(label) : fallback;
+}
+function ToolboxColumnVisibilitySection(_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var column = _a.column, columnId = _a.columnId, mode = _a.mode, onModeChange = _a.onModeChange, close = _a.close;
+    var visibility = (0, store_1.useAppStore)(function (s) { return s.columnVisibilityState; });
+    var globalIcons = (0, store_1.useAppStore)(function (s) { return s.icons; });
+    var columnIcons = typeof column.toolbox === 'object' ? column.toolbox.icons : undefined;
+    var hiddenItems = (_b = visibility === null || visibility === void 0 ? void 0 : visibility.items.filter(function (item) { return item.hidden; })) !== null && _b !== void 0 ? _b : [];
+    React.useEffect(function () {
+        if (mode === 'hidden' && hiddenItems.length === 0)
+            onModeChange('menu');
+    }, [hiddenItems.length, mode, onModeChange]);
+    if (!visibility)
+        return null;
+    var visibleCount = visibility.items.length - hiddenItems.length;
+    var currentItem = visibility.items.find(function (item) { return item.columnId === columnId; });
+    var canHideCurrent = !!(currentItem === null || currentItem === void 0 ? void 0 : currentItem.hideable) && visibleCount > 1;
+    var hideIcon = (_d = (_c = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.hideColumn) !== null && _c !== void 0 ? _c : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.hideColumn) !== null && _d !== void 0 ? _d : (React.createElement("svg", { className: 'bgrid-toolbox-icon', viewBox: '0 0 16 16', width: '14', height: '14', fill: 'none', stroke: 'currentColor', strokeWidth: '1.4' },
+        React.createElement("path", { d: 'M2 2l12 12' }),
+        React.createElement("path", { d: 'M6.2 4.1A6.8 6.8 0 0 1 8 3.8c3.4 0 5.6 3.2 5.6 3.2a9 9 0 0 1-1.8 2.1M9.5 9.4A2.1 2.1 0 0 1 6.6 6.5M4.2 5.1A9.4 9.4 0 0 0 2.4 7S4.6 10.2 8 10.2c.5 0 1-.1 1.4-.2' })));
+    var showIcon = (_f = (_e = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.showColumn) !== null && _e !== void 0 ? _e : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.showColumn) !== null && _f !== void 0 ? _f : (React.createElement("svg", { className: 'bgrid-toolbox-icon', viewBox: '0 0 16 16', width: '14', height: '14', fill: 'none', stroke: 'currentColor', strokeWidth: '1.4' },
+        React.createElement("path", { d: 'M2.2 8s2.2-3.4 5.8-3.4S13.8 8 13.8 8s-2.2 3.4-5.8 3.4S2.2 8 2.2 8z' }),
+        React.createElement("circle", { cx: '8', cy: '8', r: '1.7' })));
+    var columnsIcon = (_h = (_g = columnIcons === null || columnIcons === void 0 ? void 0 : columnIcons.columns) !== null && _g !== void 0 ? _g : globalIcons === null || globalIcons === void 0 ? void 0 : globalIcons.columns) !== null && _h !== void 0 ? _h : (React.createElement("svg", { className: 'bgrid-toolbox-icon', viewBox: '0 0 16 16', width: '14', height: '14', fill: 'none', stroke: 'currentColor', strokeWidth: '1.4' },
+        React.createElement("rect", { x: '2.2', y: '2.5', width: '11.6', height: '11', rx: '1' }),
+        React.createElement("path", { d: 'M6 2.5v11M10 2.5v11' })));
+    if (mode === 'hidden') {
+        return (React.createElement("div", { className: 'bgrid-toolbox-section bgrid-toolbox-visibility-section' },
+            React.createElement("div", { className: 'bgrid-toolbox-visibility-header' },
+                React.createElement("button", { type: 'button', className: 'bgrid-toolbox-icon-button', "aria-label": '\uCEEC\uB7FC \uBA54\uB274\uB85C \uB3CC\uC544\uAC00\uAE30', onClick: function () { return onModeChange('menu'); } },
+                    React.createElement("span", { "aria-hidden": 'true' }, "\u2039")),
+                React.createElement("span", { className: 'bgrid-toolbox-visibility-title' }, "\uC228\uAE34 \uCEEC\uB7FC")),
+            React.createElement("div", { className: 'bgrid-toolbox-hidden-list' }, hiddenItems.map(function (item) {
+                var label = accessibleLabel(item.column.label, item.columnId);
+                return (React.createElement("button", { key: item.columnId, type: 'button', className: 'bgrid-toolbox-menu-item', "aria-label": "".concat(label, " \uCEEC\uB7FC \uD45C\uC2DC"), onClick: function () {
+                        visibility.onChange(visibility.hiddenColumnIds.filter(function (id) { return id !== item.columnId; }), { type: 'show', columnId: item.columnId, column: item.column });
+                    } },
+                    React.createElement("span", { className: 'bgrid-toolbox-icon-wrapper' }, showIcon),
+                    React.createElement("span", { className: 'bgrid-toolbox-menu-label' }, item.column.label)));
+            })),
+            React.createElement("button", { type: 'button', className: 'bgrid-toolbox-menu-item bgrid-toolbox-show-all', onClick: function () {
+                    visibility.onChange([], { type: 'showAll' });
+                    close();
+                } },
+                React.createElement("span", { className: 'bgrid-toolbox-icon-wrapper' }, columnsIcon),
+                React.createElement("span", null, "\uBAA8\uB450 \uD45C\uC2DC"))));
+    }
+    return (React.createElement("div", { className: 'bgrid-toolbox-section bgrid-toolbox-visibility-section' },
+        React.createElement("div", { className: 'bgrid-toolbox-section-title' }, "\uCEEC\uB7FC"),
+        React.createElement("div", { className: 'bgrid-toolbox-menu-list' },
+            React.createElement("button", { type: 'button', className: 'bgrid-toolbox-menu-item', disabled: !canHideCurrent, "aria-label": "".concat(accessibleLabel(column.label, columnId), " \uCEEC\uB7FC \uC228\uAE30\uAE30"), title: !canHideCurrent && visibleCount <= 1 ? '최소 한 개의 컬럼은 표시해야 합니다.' : undefined, onClick: function () {
+                    if (!canHideCurrent)
+                        return;
+                    visibility.onChange(__spreadArray(__spreadArray([], __read(visibility.hiddenColumnIds), false), [columnId], false), { type: 'hide', columnId: columnId, column: currentItem === null || currentItem === void 0 ? void 0 : currentItem.column });
+                    close();
+                } },
+                React.createElement("span", { className: 'bgrid-toolbox-icon-wrapper' }, hideIcon),
+                React.createElement("span", null, "\uC774 \uCEEC\uB7FC \uC228\uAE30\uAE30")),
+            hiddenItems.length > 0 && (React.createElement("button", { type: 'button', className: 'bgrid-toolbox-menu-item', "aria-label": "\uC228\uAE34 \uCEEC\uB7FC ".concat(hiddenItems.length, "\uAC1C \uAD00\uB9AC"), onClick: function () { return onModeChange('hidden'); } },
+                React.createElement("span", { className: 'bgrid-toolbox-icon-wrapper' }, columnsIcon),
+                React.createElement("span", { className: 'bgrid-toolbox-menu-label' },
+                    "\uC228\uAE34 \uCEEC\uB7FC ",
+                    hiddenItems.length,
+                    "\uAC1C"),
+                React.createElement("span", { className: 'bgrid-toolbox-menu-chevron', "aria-hidden": 'true' }, "\u203A"))))));
+}

package/cjs/components/toolbox/index.js

@@ -20,3 +20,4 @@ __exportStar(require("./ToolboxValueFilterSection"), exports);
 __exportStar(require("./ToolboxTextFilterSection"), exports);
 __exportStar(require("./ToolboxNumberFilterSection"), exports);
 __exportStar(require("./ToolboxCustomSection"), exports);
+__exportStar(require("./ToolboxColumnVisibilitySection"), exports);

package/cjs/store/createAppStore.js

@@ -262,6 +262,7 @@ function AppStoreProvider(_a) {
                 dataControl: initialState === null || initialState === void 0 ? void 0 : initialState.dataControl,
                 filterDrafts: (_16 = initialState === null || initialState === void 0 ? void 0 : initialState.filterDrafts) !== null && _16 !== void 0 ? _16 : {},
                 activeToolboxColumnId: (_17 = initialState === null || initialState === void 0 ? void 0 : initialState.activeToolboxColumnId) !== null && _17 !== void 0 ? _17 : null,
+                columnVisibilityState: initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibilityState,
                 searchOptions: initialState === null || initialState === void 0 ? void 0 : initialState.searchOptions,
                 contextMenuOptions: initialState === null || initialState === void 0 ? void 0 : initialState.contextMenuOptions,
                 searchOpen: (_22 = (_20 = (_19 = (_18 = initialState === null || initialState === void 0 ? void 0 : initialState.searchOptions) === null || _18 === void 0 ? void 0 : _18.open) !== null && _19 !== void 0 ? _19 : initialState === null || initialState === void 0 ? void 0 : initialState.searchOpen) !== null && _20 !== void 0 ? _20 : (_21 = initialState === null || initialState === void 0 ? void 0 : initialState.searchOptions) === null || _21 === void 0 ? void 0 : _21.defaultOpen) !== null && _22 !== void 0 ? _22 : false,
@@ -499,6 +500,7 @@ function AppStoreProvider(_a) {
                             }, (_a = {}, _a[columnId] = appliedFilter ? __assign({}, appliedFilter) : undefined, _a)) }));
                     });
                 },
+                setColumnVisibilityState: function (columnVisibilityState) { return set({ columnVisibilityState: columnVisibilityState }); },
                 setSearchOptions: function (options) {
                     return set(function (state) {
                         var _a, _b;