@expcat/tigercat-react 1.2.39 → 1.2.43

package/dist/{chunk-M36PT6BS.js → chunk-XUETAIF3.js}

@@ -118,10 +118,13 @@ var LoadingSpinner = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
 
 
 
+
 function useTableState(input) {
   const {
     columns,
     dataSource,
+    hiddenColumnKeys,
+    defaultHiddenColumnKeys,
     sort,
     defaultSort,
     filters,
@@ -143,6 +146,7 @@ function useTableState(input) {
     onSelectionChange,
     onSortChange,
     onFilterChange,
+    onHiddenColumnsChange,
     onPageChange,
     onExpandChange,
     onCellChange,
@@ -152,6 +156,7 @@ function useTableState(input) {
   } = input;
   const isSortControlled = sort !== void 0;
   const isFiltersControlled = filters !== void 0;
+  const isHiddenColumnsControlled = hiddenColumnKeys !== void 0;
   const paginationConfig = pagination !== false && typeof pagination === "object" ? pagination : null;
   const isCurrentPageControlled = _optionalChain([paginationConfig, 'optionalAccess', _ => _.current]) !== void 0;
   const isPageSizeControlled = _optionalChain([paginationConfig, 'optionalAccess', _2 => _2.pageSize]) !== void 0;
@@ -160,6 +165,9 @@ function useTableState(input) {
   const [uncontrolledSortState, setUncontrolledSortState] = _react.useState.call(void 0, 
     _nullishCoalesce(defaultSort, () => ( { key: null, direction: null }))
   );
+  const [uncontrolledHiddenColumnKeys, setUncontrolledHiddenColumnKeys] = _react.useState.call(void 0, 
+    _nullishCoalesce(_nullishCoalesce(defaultHiddenColumnKeys, () => ( hiddenColumnKeys)), () => ( []))
+  );
   const [uncontrolledFilterState, setUncontrolledFilterState] = _react.useState.call(void 0, 
     _nullishCoalesce(defaultFilters, () => ( {}))
   );
@@ -172,6 +180,7 @@ function useTableState(input) {
   const [uncontrolledSelectedRowKeys, setUncontrolledSelectedRowKeys] = _react.useState.call(void 0, _nullishCoalesce(_nullishCoalesce(_optionalChain([rowSelection, 'optionalAccess', _9 => _9.defaultSelectedRowKeys]), () => ( _optionalChain([rowSelection, 'optionalAccess', _10 => _10.selectedRowKeys]))), () => ( [])));
   const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = _react.useState.call(void 0, _nullishCoalesce(_nullishCoalesce(_optionalChain([expandable, 'optionalAccess', _11 => _11.defaultExpandedRowKeys]), () => ( _optionalChain([expandable, 'optionalAccess', _12 => _12.expandedRowKeys]))), () => ( [])));
   const sortState = isSortControlled ? sort : uncontrolledSortState;
+  const effectiveHiddenColumnKeys = isHiddenColumnsControlled ? hiddenColumnKeys : uncontrolledHiddenColumnKeys;
   const filterState = isFiltersControlled ? filters : uncontrolledFilterState;
   const currentPage = isCurrentPageControlled ? paginationConfig.current : uncontrolledCurrentPage;
   const currentPageSize = isPageSizeControlled ? paginationConfig.pageSize : uncontrolledCurrentPageSize;
@@ -202,6 +211,11 @@ function useTableState(input) {
       setUncontrolledSelectedRowKeys(_nullishCoalesce(_optionalChain([rowSelection, 'optionalAccess', _17 => _17.selectedRowKeys]), () => ( [])));
     }
   }, [isSelectionControlled, _optionalChain([rowSelection, 'optionalAccess', _18 => _18.selectedRowKeys])]);
+  _react.useEffect.call(void 0, () => {
+    if (isHiddenColumnsControlled && hiddenColumnKeys) {
+      setUncontrolledHiddenColumnKeys(hiddenColumnKeys);
+    }
+  }, [isHiddenColumnsControlled, hiddenColumnKeys]);
   _react.useEffect.call(void 0, () => {
     if (isExpandControlled) {
       setUncontrolledExpandedRowKeys(_nullishCoalesce(_optionalChain([expandable, 'optionalAccess', _19 => _19.expandedRowKeys]), () => ( [])));
@@ -209,14 +223,15 @@ function useTableState(input) {
   }, [isExpandControlled, _optionalChain([expandable, 'optionalAccess', _20 => _20.expandedRowKeys])]);
   const [fixedOverrides, setFixedOverrides] = _react.useState.call(void 0, {});
   const displayColumns = _react.useMemo.call(void 0, () => {
-    return columns.map((column) => {
+    const mapped = columns.map((column) => {
       const hasOverride = Object.prototype.hasOwnProperty.call(fixedOverrides, column.key);
       return {
         ...column,
         fixed: hasOverride ? fixedOverrides[column.key] : column.fixed
       };
     });
-  }, [columns, fixedOverrides]);
+    return _tigercatcore.filterHiddenColumns.call(void 0, mapped, effectiveHiddenColumnKeys);
+  }, [columns, fixedOverrides, effectiveHiddenColumnKeys]);
   const totalColumnCount = _react.useMemo.call(void 0, () => {
     let count = displayColumns.length;
     if (rowSelection && rowSelection.showCheckbox !== false) count++;
@@ -234,9 +249,15 @@ function useTableState(input) {
     () => _tigercatcore.getFixedColumnOffsets.call(void 0, displayColumns, measuredColumnWidths),
     [displayColumns, measuredColumnWidths]
   );
+  function handleSetHiddenColumns(hiddenKeys) {
+    if (!isHiddenColumnsControlled) {
+      setUncontrolledHiddenColumnKeys(hiddenKeys);
+    }
+    _optionalChain([onHiddenColumnsChange, 'optionalCall', _21 => _21(hiddenKeys)]);
+  }
   function toggleColumnLock(columnKey) {
     setFixedOverrides((prev) => {
-      const original = _optionalChain([columns, 'access', _21 => _21.find, 'call', _22 => _22((c) => c.key === columnKey), 'optionalAccess', _23 => _23.fixed]);
+      const original = _optionalChain([columns, 'access', _22 => _22.find, 'call', _23 => _23((c) => c.key === columnKey), 'optionalAccess', _24 => _24.fixed]);
       const current = Object.prototype.hasOwnProperty.call(prev, columnKey) ? prev[columnKey] : original;
       const isLocked = current === "left" || current === "right";
       return {
@@ -254,7 +275,7 @@ function useTableState(input) {
     }
     if (sortState.key && sortState.direction) {
       const column = columnByKey[sortState.key];
-      data = _tigercatcore.sortData.call(void 0, data, sortState.key, sortState.direction, _optionalChain([column, 'optionalAccess', _24 => _24.sortFn]));
+      data = _tigercatcore.sortData.call(void 0, data, sortState.key, sortState.direction, _optionalChain([column, 'optionalAccess', _25 => _25.sortFn]));
     }
     return data;
   }, [dataSource, filterState, sortState, columnByKey, filterMode, advancedFilterRules]);
@@ -280,15 +301,15 @@ function useTableState(input) {
     if (pagination === false) {
       return null;
     }
-    const total = _optionalChain([paginationConfig, 'optionalAccess', _25 => _25.total]) !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : processedData.length;
+    const total = _optionalChain([paginationConfig, 'optionalAccess', _26 => _26.total]) !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : processedData.length;
     return _tigercatcore.calculatePagination.call(void 0, total, currentPage, currentPageSize);
-  }, [processedData.length, currentPage, currentPageSize, pagination, _optionalChain([paginationConfig, 'optionalAccess', _26 => _26.total])]);
+  }, [processedData.length, currentPage, currentPageSize, pagination, _optionalChain([paginationConfig, 'optionalAccess', _27 => _27.total])]);
   function handleSetSort(newSortState) {
     if (!isSortControlled) {
       setUncontrolledSortState(newSortState);
     }
-    _optionalChain([onSortChange, 'optionalCall', _27 => _27(newSortState)]);
-    _optionalChain([onChange, 'optionalCall', _28 => _28({
+    _optionalChain([onSortChange, 'optionalCall', _28 => _28(newSortState)]);
+    _optionalChain([onChange, 'optionalCall', _29 => _29({
       sort: newSortState,
       filters: filterState,
       pagination: pagination !== false ? { current: currentPage, pageSize: currentPageSize } : null
@@ -316,8 +337,8 @@ function useTableState(input) {
       setUncontrolledFilterState(newFilterState);
     }
     setUncontrolledCurrentPage(1);
-    _optionalChain([onFilterChange, 'optionalCall', _29 => _29(newFilterState)]);
-    _optionalChain([onChange, 'optionalCall', _30 => _30({
+    _optionalChain([onFilterChange, 'optionalCall', _30 => _30(newFilterState)]);
+    _optionalChain([onChange, 'optionalCall', _31 => _31({
       sort: sortState,
       filters: newFilterState,
       pagination: pagination !== false ? { current: 1, pageSize: currentPageSize } : null
@@ -325,8 +346,8 @@ function useTableState(input) {
   }
   function handlePageChange(page) {
     setUncontrolledCurrentPage(page);
-    _optionalChain([onPageChange, 'optionalCall', _31 => _31({ current: page, pageSize: currentPageSize })]);
-    _optionalChain([onChange, 'optionalCall', _32 => _32({
+    _optionalChain([onPageChange, 'optionalCall', _32 => _32({ current: page, pageSize: currentPageSize })]);
+    _optionalChain([onChange, 'optionalCall', _33 => _33({
       sort: sortState,
       filters: filterState,
       pagination: { current: page, pageSize: currentPageSize }
@@ -335,8 +356,8 @@ function useTableState(input) {
   function handlePageSizeChange(pageSize) {
     setUncontrolledCurrentPageSize(pageSize);
     setUncontrolledCurrentPage(1);
-    _optionalChain([onPageChange, 'optionalCall', _33 => _33({ current: 1, pageSize })]);
-    _optionalChain([onChange, 'optionalCall', _34 => _34({
+    _optionalChain([onPageChange, 'optionalCall', _34 => _34({ current: 1, pageSize })]);
+    _optionalChain([onChange, 'optionalCall', _35 => _35({
       sort: sortState,
       filters: filterState,
       pagination: { current: 1, pageSize }
@@ -348,12 +369,12 @@ function useTableState(input) {
     if (!isExpandControlled) {
       setUncontrolledExpandedRowKeys(newKeys);
     }
-    _optionalChain([onExpandChange, 'optionalCall', _35 => _35(newKeys, record, !isExpanded)]);
+    _optionalChain([onExpandChange, 'optionalCall', _36 => _36(newKeys, record, !isExpanded)]);
   }
   function handleRowClick(record, index, key) {
-    _optionalChain([onRowClick, 'optionalCall', _36 => _36(record, index)]);
-    if (_optionalChain([expandable, 'optionalAccess', _37 => _37.expandRowByClick])) {
-      const isExpandableRow = _optionalChain([expandable, 'optionalAccess', _38 => _38.rowExpandable]) ? expandable.rowExpandable(record) : true;
+    _optionalChain([onRowClick, 'optionalCall', _37 => _37(record, index)]);
+    if (_optionalChain([expandable, 'optionalAccess', _38 => _38.expandRowByClick])) {
+      const isExpandableRow = _optionalChain([expandable, 'optionalAccess', _39 => _39.rowExpandable]) ? expandable.rowExpandable(record) : true;
       if (isExpandableRow) {
         handleToggleExpand(key, record);
       }
@@ -361,7 +382,7 @@ function useTableState(input) {
   }
   function handleSelectRow(key, checked) {
     let newKeys;
-    if (_optionalChain([rowSelection, 'optionalAccess', _39 => _39.type]) === "radio") {
+    if (_optionalChain([rowSelection, 'optionalAccess', _40 => _40.type]) === "radio") {
       newKeys = checked ? [key] : [];
     } else {
       if (checked) {
@@ -373,7 +394,7 @@ function useTableState(input) {
     if (!isSelectionControlled) {
       setUncontrolledSelectedRowKeys(newKeys);
     }
-    _optionalChain([onSelectionChange, 'optionalCall', _40 => _40(newKeys)]);
+    _optionalChain([onSelectionChange, 'optionalCall', _41 => _41(newKeys)]);
   }
   function handleSelectAll(checked) {
     if (checked) {
@@ -381,12 +402,12 @@ function useTableState(input) {
       if (!isSelectionControlled) {
         setUncontrolledSelectedRowKeys(newKeys);
       }
-      _optionalChain([onSelectionChange, 'optionalCall', _41 => _41(newKeys)]);
+      _optionalChain([onSelectionChange, 'optionalCall', _42 => _42(newKeys)]);
     } else {
       if (!isSelectionControlled) {
         setUncontrolledSelectedRowKeys([]);
       }
-      _optionalChain([onSelectionChange, 'optionalCall', _42 => _42([])]);
+      _optionalChain([onSelectionChange, 'optionalCall', _43 => _43([])]);
     }
   }
   const allSelected = _react.useMemo.call(void 0, () => {
@@ -404,7 +425,7 @@ function useTableState(input) {
   function isCellEditable(columnKey, rowIndex) {
     if (!editable) return false;
     if (!editableCells) return true;
-    return !!_optionalChain([editableCells, 'access', _43 => _43.get, 'call', _44 => _44(columnKey), 'optionalAccess', _45 => _45.has, 'call', _46 => _46(rowIndex)]);
+    return !!_optionalChain([editableCells, 'access', _44 => _44.get, 'call', _45 => _45(columnKey), 'optionalAccess', _46 => _46.has, 'call', _47 => _47(rowIndex)]);
   }
   function startEditing(rowIndex, columnKey, currentValue) {
     setEditingCell({ rowIndex, columnKey });
@@ -412,7 +433,7 @@ function useTableState(input) {
   }
   function commitEdit() {
     if (editingCell) {
-      _optionalChain([onCellChange, 'optionalCall', _47 => _47(editingCell.rowIndex, editingCell.columnKey, editingValue)]);
+      _optionalChain([onCellChange, 'optionalCall', _48 => _48(editingCell.rowIndex, editingCell.columnKey, editingValue)]);
       setEditingCell(null);
     }
   }
@@ -422,7 +443,7 @@ function useTableState(input) {
   function handleExport() {
     const content = _tigercatcore.exportTableData.call(void 0, displayColumns, processedData, exportFormat);
     _tigercatcore.downloadTableExport.call(void 0, content, exportFilename, exportFormat);
-    _optionalChain([onExport, 'optionalCall', _48 => _48(content)]);
+    _optionalChain([onExport, 'optionalCall', _49 => _49(content)]);
   }
   const [dragColumnKey, setDragColumnKey] = _react.useState.call(void 0, null);
   function handleDragStart(columnKey) {
@@ -436,7 +457,7 @@ function useTableState(input) {
     if (fromIdx >= 0 && toIdx >= 0) {
       const [moved] = cols.splice(fromIdx, 1);
       cols.splice(toIdx, 0, moved);
-      _optionalChain([onColumnOrderChange, 'optionalCall', _49 => _49(cols)]);
+      _optionalChain([onColumnOrderChange, 'optionalCall', _50 => _50(cols)]);
     }
     setDragColumnKey(null);
   }
@@ -452,7 +473,7 @@ function useTableState(input) {
     if (fromIdx >= 0 && toIdx >= 0) {
       const [moved] = rows.splice(fromIdx, 1);
       rows.splice(toIdx, 0, moved);
-      _optionalChain([onRowOrderChange, 'optionalCall', _50 => _50(rows)]);
+      _optionalChain([onRowOrderChange, 'optionalCall', _51 => _51(rows)]);
     }
     setDragRowKey(null);
   }
@@ -477,10 +498,12 @@ function useTableState(input) {
     sortState,
     currentPage,
     currentPageSize,
+    hiddenColumnKeys: effectiveHiddenColumnKeys,
     editingCell,
     editingValue,
     setEditingValue,
     toggleColumnLock,
+    handleSetHiddenColumns,
     handleSort,
     handleFilter,
     handlePageChange,
@@ -516,7 +539,7 @@ function useTableState(input) {
 function renderTableHeader(ctx, view) {
   const { size, stickyHeader, rowSelection, expandable, columnLockable, columnDraggable } = view;
   const expandHeaderTh = expandable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { className: _tigercatcore.getExpandIconCellClasses.call(void 0, size), "aria-label": "Expand" }) : null;
-  const expandAtStart = _optionalChain([expandable, 'optionalAccess', _51 => _51.expandIconPosition]) !== "end";
+  const expandAtStart = _optionalChain([expandable, 'optionalAccess', _52 => _52.expandIconPosition]) !== "end";
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { className: _tigercatcore.getTableHeaderClasses.call(void 0, stickyHeader), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
     expandAtStart && expandHeaderTh,
     rowSelection && rowSelection.showCheckbox !== false && rowSelection.type !== "radio" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { className: _tigercatcore.getCheckboxCellClasses.call(void 0, size), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -654,7 +677,7 @@ function renderTableBody(ctx, view) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { colSpan: ctx.totalColumnCount, className: _tigercatcore.tableEmptyStateClasses, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "status", "aria-live": "polite", children: emptyText }) }) }) });
   }
   function getDelegatedRow(event) {
-    const row = _optionalChain([event, 'access', _52 => _52.target, 'optionalAccess', _53 => _53.closest, 'call', _54 => _54(
+    const row = _optionalChain([event, 'access', _53 => _53.target, 'optionalAccess', _54 => _54.closest, 'call', _55 => _55(
       "tr[data-tiger-table-row-index]"
     )]);
     if (!row) return null;
@@ -706,7 +729,7 @@ function renderTableBody(ctx, view) {
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandIcon, { expanded: isExpanded })
       }
     ) }) : null;
-    const expandAtStart = _optionalChain([expandable, 'optionalAccess', _55 => _55.expandIconPosition]) !== "end";
+    const expandAtStart = _optionalChain([expandable, 'optionalAccess', _56 => _56.expandIconPosition]) !== "end";
     const rowNode = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "tr",
       {
@@ -721,10 +744,10 @@ function renderTableBody(ctx, view) {
           rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { className: _tigercatcore.getCheckboxCellClasses.call(void 0, size), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "input",
             {
-              type: _optionalChain([rowSelection, 'optionalAccess', _56 => _56.type]) === "radio" ? "radio" : "checkbox",
-              className: _optionalChain([rowSelection, 'optionalAccess', _57 => _57.type]) === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
+              type: _optionalChain([rowSelection, 'optionalAccess', _57 => _57.type]) === "radio" ? "radio" : "checkbox",
+              className: _optionalChain([rowSelection, 'optionalAccess', _58 => _58.type]) === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
               checked: isSelected,
-              disabled: _optionalChain([rowSelection, 'optionalAccess', _58 => _58.getCheckboxProps, 'optionalCall', _59 => _59(record), 'optionalAccess', _60 => _60.disabled]),
+              disabled: _optionalChain([rowSelection, 'optionalAccess', _59 => _59.getCheckboxProps, 'optionalCall', _60 => _60(record), 'optionalAccess', _61 => _61.disabled]),
               onChange: (e) => ctx.handleSelectRow(key, e.target.checked),
               onClick: (e) => e.stopPropagation()
             }
@@ -748,7 +771,7 @@ function renderTableBody(ctx, view) {
               hoverable,
               fixedInfo: ctx.fixedColumnsInfo
             });
-            const isEditing = _optionalChain([ctx, 'access', _61 => _61.editingCell, 'optionalAccess', _62 => _62.rowIndex]) === index && _optionalChain([ctx, 'access', _63 => _63.editingCell, 'optionalAccess', _64 => _64.columnKey]) === column.key;
+            const isEditing = _optionalChain([ctx, 'access', _62 => _62.editingCell, 'optionalAccess', _63 => _63.rowIndex]) === index && _optionalChain([ctx, 'access', _64 => _64.editingCell, 'optionalAccess', _65 => _65.columnKey]) === column.key;
             const cellEditable = ctx.isCellEditable(column.key, index);
             return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "td",
@@ -835,7 +858,7 @@ function renderTableBody(ctx, view) {
 
 function renderSummaryRow(ctx, view) {
   const { size, rowSelection, expandable, summaryRow } = view;
-  if (!_optionalChain([summaryRow, 'optionalAccess', _65 => _65.show])) return null;
+  if (!_optionalChain([summaryRow, 'optionalAccess', _66 => _66.show])) return null;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tfoot", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { className: _tigercatcore.tableSummaryRowClasses, children: [
     rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { className: _tigercatcore.getTableCellClasses.call(void 0, size, "left") }),
     expandable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { className: _tigercatcore.getTableCellClasses.call(void 0, size, "left") }),
@@ -868,7 +891,7 @@ function renderPagination(ctx, view) {
   const total = paginationConfig.total !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : ctx.processedData.length;
   const locale = view.disableI18n ? void 0 : view.locale;
   const labels = _tigercatcore.getPaginationLabels.call(void 0, locale);
-  const localeCode = _optionalChain([locale, 'optionalAccess', _66 => _66.locale]);
+  const localeCode = _optionalChain([locale, 'optionalAccess', _67 => _67.locale]);
   const finalTotalText = paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : _tigercatcore.formatPaginationTotal.call(void 0, labels.totalText, total, [startIndex, endIndex], localeCode);
   const finalPrevText = paginationConfig.prevText || labels.prevPageAriaLabel;
   const finalNextText = paginationConfig.nextText || labels.nextPageAriaLabel;
@@ -938,6 +961,8 @@ function Table({
   columns,
   columnLockable = false,
   dataSource = [],
+  hiddenColumnKeys,
+  defaultHiddenColumnKeys,
   sort,
   defaultSort,
   filters,
@@ -992,6 +1017,7 @@ function Table({
   onSelectionChange,
   onSortChange,
   onFilterChange,
+  onHiddenColumnsChange,
   onPageChange,
   onExpandChange,
   onCellChange,
@@ -1021,7 +1047,9 @@ function Table({
     () => tableLocaleInput ? _tigercatcore.getImmediateTigerLocale.call(void 0, tableLocaleInput) : void 0,
     [tableLocaleInput]
   );
-  const [resolvedTableLocale, setResolvedTableLocale] = _react.useState.call(void 0, immediateTableLocale);
+  const [resolvedTableLocale, setResolvedTableLocale] = _react.useState.call(void 0, 
+    immediateTableLocale
+  );
   _react.useEffect.call(void 0, () => {
     let active = true;
     setResolvedPaginationLocale(immediatePaginationLocale);
@@ -1069,6 +1097,8 @@ function Table({
   const ctx = useTableState({
     columns,
     dataSource,
+    hiddenColumnKeys,
+    defaultHiddenColumnKeys,
     sort,
     defaultSort,
     filters,
@@ -1090,6 +1120,7 @@ function Table({
     onSelectionChange,
     onSortChange,
     onFilterChange,
+    onHiddenColumnsChange,
     onPageChange,
     onExpandChange,
     onCellChange,
@@ -1204,7 +1235,7 @@ function Table({
             className: _tigercatcore.getTableResponsiveCardListClasses.call(void 0, cardBreakpoint),
             "data-tiger-table-mobile": "card",
             children: [
-              _optionalChain([internalRowSelection, 'optionalAccess', _67 => _67.type]) !== "radio" && _optionalChain([internalRowSelection, 'optionalAccess', _68 => _68.showCheckbox]) !== false && internalRowSelection && ctx.paginatedData.length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-between rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] px-3 py-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _optionalChain([internalRowSelection, 'optionalAccess', _68 => _68.type]) !== "radio" && _optionalChain([internalRowSelection, 'optionalAccess', _69 => _69.showCheckbox]) !== false && internalRowSelection && ctx.paginatedData.length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-between rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] px-3 py-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 _chunkF7H4ALKNjs.Checkbox,
                 {
                   size: "sm",
@@ -1251,7 +1282,7 @@ function Table({
                 const isExpanded = ctx.expandedRowKeySet.has(key);
                 const isSelected = ctx.selectedRowKeySet.has(key);
                 const isRowExpandable = internalExpandable ? internalExpandable.rowExpandable ? internalExpandable.rowExpandable(record) : true : false;
-                const expandedContent = internalExpandable && isExpanded && isRowExpandable ? _optionalChain([internalExpandable, 'access', _69 => _69.expandedRowRender, 'optionalCall', _70 => _70(record, index)]) : null;
+                const expandedContent = internalExpandable && isExpanded && isRowExpandable ? _optionalChain([internalExpandable, 'access', _70 => _70.expandedRowRender, 'optionalCall', _71 => _71(record, index)]) : null;
                 const expandedNode = expandedContent;
                 const renderContext = {
                   record,
@@ -1262,7 +1293,7 @@ function Table({
                   toggleExpand: () => ctx.handleToggleExpand(key, record),
                   selectRow: (checked) => ctx.handleSelectRow(key, checked)
                 };
-                const customCard = _optionalChain([renderCard, 'optionalCall', _71 => _71(renderContext)]);
+                const customCard = _optionalChain([renderCard, 'optionalCall', _72 => _72(renderContext)]);
                 const resolvedCardClassName = typeof cardClassName === "function" ? cardClassName(record, index) : cardClassName;
                 return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   "div",
@@ -1270,17 +1301,17 @@ function Table({
                     className: _tigercatcore.classNames.call(void 0, _tigercatcore.tableResponsiveCardClasses, resolvedCardClassName),
                     onClick: () => ctx.handleRowClick(record, index, key),
                     children: customCard !== void 0 && customCard !== null ? customCard : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-                      _optionalChain([internalRowSelection, 'optionalAccess', _72 => _72.showCheckbox]) !== false && internalRowSelection || internalExpandable && isRowExpandable ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-center gap-3", children: [
+                      _optionalChain([internalRowSelection, 'optionalAccess', _73 => _73.showCheckbox]) !== false && internalRowSelection || internalExpandable && isRowExpandable ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-center gap-3", children: [
                         internalRowSelection && internalRowSelection.showCheckbox !== false && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { onClick: (event) => event.stopPropagation(), children: internalRowSelection.type === "radio" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                           _chunkTMON4MPOjs.Radio,
                           {
                             value: key,
                             checked: isSelected,
-                            disabled: _optionalChain([internalRowSelection, 'access', _73 => _73.getCheckboxProps, 'optionalCall', _74 => _74(record), 'optionalAccess', _75 => _75.disabled]),
+                            disabled: _optionalChain([internalRowSelection, 'access', _74 => _74.getCheckboxProps, 'optionalCall', _75 => _75(record), 'optionalAccess', _76 => _76.disabled]),
                             "aria-label": _tigercatcore.formatTableSelectRowAriaLabel.call(void 0, 
                               tableLabels.selectRowAriaLabel,
                               index + 1,
-                              _optionalChain([tableLocale, 'optionalAccess', _76 => _76.locale])
+                              _optionalChain([tableLocale, 'optionalAccess', _77 => _77.locale])
                             ),
                             onChange: () => ctx.handleSelectRow(key, true)
                           }
@@ -1289,11 +1320,11 @@ function Table({
                           {
                             size: "sm",
                             checked: isSelected,
-                            disabled: _optionalChain([internalRowSelection, 'access', _77 => _77.getCheckboxProps, 'optionalCall', _78 => _78(record), 'optionalAccess', _79 => _79.disabled]),
+                            disabled: _optionalChain([internalRowSelection, 'access', _78 => _78.getCheckboxProps, 'optionalCall', _79 => _79(record), 'optionalAccess', _80 => _80.disabled]),
                             "aria-label": _tigercatcore.formatTableSelectRowAriaLabel.call(void 0, 
                               tableLabels.selectRowAriaLabel,
                               index + 1,
-                              _optionalChain([tableLocale, 'optionalAccess', _80 => _80.locale])
+                              _optionalChain([tableLocale, 'optionalAccess', _81 => _81.locale])
                             ),
                             onChange: (checked) => ctx.handleSelectRow(key, checked)
                           }

package/dist/{chunk-PCPAMUAE.mjs → chunk-ZDS5WL22.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-ZDEOTMXP.mjs";
+} from "./chunk-C44WSDEY.mjs";
 import {
   renderBodyPortal
 } from "./chunk-SEWNVIHH.mjs";

package/dist/{chunk-73OAHAPC.mjs → chunk-ZL44XLSB.mjs}

@@ -1,6 +1,6 @@
 import {
   DropdownContext
-} from "./chunk-WVTUGFWO.mjs";
+} from "./chunk-TYZNV54N.mjs";
 
 // src/components/DropdownItem.tsx
 import { useContext } from "react";

package/dist/components/DataTableWithToolbar.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { TableToolbarProps, TableToolbarFilterValue, TableToolbarAction } from '@expcat/tigercat-core';
-import { T as TableProps } from '../types-mtq1tZJd.mjs';
+import { T as TableProps } from '../types-CHmCMNEM.mjs';
 
 interface DataTableWithToolbarProps<T = Record<string, unknown>> extends Omit<TableProps<T>, 'className' | 'onPageChange'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
     /**
@@ -41,6 +41,6 @@ interface DataTableWithToolbarProps<T = Record<string, unknown>> extends Omit<Ta
      */
     tableClassName?: string;
 }
-declare const DataTableWithToolbar: <T extends Record<string, unknown> = Record<string, unknown>>({ toolbar, locale, labels, onSearchChange, onSearch, onFiltersChange, onBulkAction, pagination, onPageChange, onPageSizeChange, className, tableClassName, ...tableProps }: DataTableWithToolbarProps<T>) => react_jsx_runtime.JSX.Element;
+declare const DataTableWithToolbar: <T extends Record<string, unknown> = Record<string, unknown>>({ toolbar, locale, labels, onSearchChange, onSearch, onFiltersChange, onBulkAction, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnsChange, pagination, onPageChange, onPageSizeChange, className, tableClassName, ...tableProps }: DataTableWithToolbarProps<T>) => react_jsx_runtime.JSX.Element;
 
 export { DataTableWithToolbar, type DataTableWithToolbarProps, DataTableWithToolbar as default };

package/dist/components/DataTableWithToolbar.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { TableToolbarProps, TableToolbarFilterValue, TableToolbarAction } from '@expcat/tigercat-core';
-import { T as TableProps } from '../types-mtq1tZJd.js';
+import { T as TableProps } from '../types-CHmCMNEM.js';
 
 interface DataTableWithToolbarProps<T = Record<string, unknown>> extends Omit<TableProps<T>, 'className' | 'onPageChange'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
     /**
@@ -41,6 +41,6 @@ interface DataTableWithToolbarProps<T = Record<string, unknown>> extends Omit<Ta
      */
     tableClassName?: string;
 }
-declare const DataTableWithToolbar: <T extends Record<string, unknown> = Record<string, unknown>>({ toolbar, locale, labels, onSearchChange, onSearch, onFiltersChange, onBulkAction, pagination, onPageChange, onPageSizeChange, className, tableClassName, ...tableProps }: DataTableWithToolbarProps<T>) => react_jsx_runtime.JSX.Element;
+declare const DataTableWithToolbar: <T extends Record<string, unknown> = Record<string, unknown>>({ toolbar, locale, labels, onSearchChange, onSearch, onFiltersChange, onBulkAction, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnsChange, pagination, onPageChange, onPageSizeChange, className, tableClassName, ...tableProps }: DataTableWithToolbarProps<T>) => react_jsx_runtime.JSX.Element;
 
 export { DataTableWithToolbar, type DataTableWithToolbarProps, DataTableWithToolbar as default };

package/dist/components/DataTableWithToolbar.js

@@ -1,11 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkFZX7USS4js = require('../chunk-FZX7USS4.js');
-require('../chunk-M36PT6BS.js');
+var _chunkLHBE3N3Ujs = require('../chunk-LHBE3N3U.js');
+require('../chunk-XUETAIF3.js');
 require('../chunk-6Z4LLPZA.js');
+require('../chunk-LYYL2JMP.js');
 require('../chunk-TMON4MPO.js');
 require('../chunk-ZFMMAYSX.js');
+require('../chunk-JIFSUUGA.js');
 require('../chunk-TDODFBBO.js');
 require('../chunk-ZYJTHGQW.js');
 require('../chunk-ZRHDNGWO.js');
@@ -14,7 +16,8 @@ require('../chunk-JLRRXRZO.js');
 require('../chunk-UKGQ7256.js');
 require('../chunk-56ZV3VVY.js');
 require('../chunk-YMKA4L3Z.js');
+require('../chunk-STTQ5LXX.js');
 
 
 
-exports.DataTableWithToolbar = _chunkFZX7USS4js.DataTableWithToolbar; exports.default = _chunkFZX7USS4js.DataTableWithToolbar_default;
+exports.DataTableWithToolbar = _chunkLHBE3N3Ujs.DataTableWithToolbar; exports.default = _chunkLHBE3N3Ujs.DataTableWithToolbar_default;

package/dist/components/DataTableWithToolbar.mjs

@@ -1,11 +1,13 @@
 import {
   DataTableWithToolbar,
   DataTableWithToolbar_default
-} from "../chunk-JDJFSO2D.mjs";
-import "../chunk-TSZKBVTA.mjs";
+} from "../chunk-2VE2CP7E.mjs";
+import "../chunk-WYGO6XC7.mjs";
 import "../chunk-T4OVGM4X.mjs";
+import "../chunk-TANTMMR7.mjs";
 import "../chunk-NPTXXUXF.mjs";
 import "../chunk-IG75YSX3.mjs";
+import "../chunk-C44WSDEY.mjs";
 import "../chunk-QAIBQHIO.mjs";
 import "../chunk-WNLUUD5N.mjs";
 import "../chunk-WIWTY74F.mjs";
@@ -14,6 +16,7 @@ import "../chunk-DKT2EYVM.mjs";
 import "../chunk-UQMPEMY7.mjs";
 import "../chunk-USWK2S3Y.mjs";
 import "../chunk-ZJWUBR2X.mjs";
+import "../chunk-SEWNVIHH.mjs";
 export {
   DataTableWithToolbar,
   DataTableWithToolbar_default as default

package/dist/components/Dropdown.js

@@ -2,10 +2,10 @@
 
 
 
-var _chunkAKZY7QYAjs = require('../chunk-AKZY7QYA.js');
+var _chunkJLQBG5XUjs = require('../chunk-JLQBG5XU.js');
 require('../chunk-STTQ5LXX.js');
 
 
 
 
-exports.Dropdown = _chunkAKZY7QYAjs.Dropdown; exports.DropdownContext = _chunkAKZY7QYAjs.DropdownContext; exports.DropdownMenu = _chunkAKZY7QYAjs.DropdownMenu;
+exports.Dropdown = _chunkJLQBG5XUjs.Dropdown; exports.DropdownContext = _chunkJLQBG5XUjs.DropdownContext; exports.DropdownMenu = _chunkJLQBG5XUjs.DropdownMenu;

package/dist/components/Dropdown.mjs

@@ -2,7 +2,7 @@ import {
   Dropdown,
   DropdownContext,
   DropdownMenu
-} from "../chunk-WVTUGFWO.mjs";
+} from "../chunk-TYZNV54N.mjs";
 import "../chunk-SEWNVIHH.mjs";
 export {
   Dropdown,

package/dist/components/DropdownItem.js

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkC3NKZZQQjs = require('../chunk-C3NKZZQQ.js');
-require('../chunk-AKZY7QYA.js');
+var _chunkAE2QE2C6js = require('../chunk-AE2QE2C6.js');
+require('../chunk-JLQBG5XU.js');
 require('../chunk-STTQ5LXX.js');
 
 
-exports.DropdownItem = _chunkC3NKZZQQjs.DropdownItem;
+exports.DropdownItem = _chunkAE2QE2C6js.DropdownItem;

package/dist/components/DropdownItem.mjs

@@ -1,7 +1,7 @@
 import {
   DropdownItem
-} from "../chunk-73OAHAPC.mjs";
-import "../chunk-WVTUGFWO.mjs";
+} from "../chunk-ZL44XLSB.mjs";
+import "../chunk-TYZNV54N.mjs";
 import "../chunk-SEWNVIHH.mjs";
 export {
   DropdownItem

package/dist/components/DropdownMenu.js

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAKZY7QYAjs = require('../chunk-AKZY7QYA.js');
+var _chunkJLQBG5XUjs = require('../chunk-JLQBG5XU.js');
 require('../chunk-STTQ5LXX.js');
 
 
 
-exports.DropdownMenu = _chunkAKZY7QYAjs.DropdownMenu; exports.default = _chunkAKZY7QYAjs.DropdownMenu;
+exports.DropdownMenu = _chunkJLQBG5XUjs.DropdownMenu; exports.default = _chunkJLQBG5XUjs.DropdownMenu;

package/dist/components/DropdownMenu.mjs

@@ -1,6 +1,6 @@
 import {
   DropdownMenu
-} from "../chunk-WVTUGFWO.mjs";
+} from "../chunk-TYZNV54N.mjs";
 import "../chunk-SEWNVIHH.mjs";
 export {
   DropdownMenu,

package/dist/components/Popconfirm.js

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkLJDILPI6js = require('../chunk-LJDILPI6.js');
-require('../chunk-3LCISRAV.js');
+var _chunk36I5APFXjs = require('../chunk-36I5APFX.js');
+require('../chunk-JIFSUUGA.js');
 require('../chunk-STTQ5LXX.js');
 
 
-exports.Popconfirm = _chunkLJDILPI6js.Popconfirm;
+exports.Popconfirm = _chunk36I5APFXjs.Popconfirm;

package/dist/components/Popconfirm.mjs

@@ -1,7 +1,7 @@
 import {
   Popconfirm
-} from "../chunk-PCPAMUAE.mjs";
-import "../chunk-ZDEOTMXP.mjs";
+} from "../chunk-ZDS5WL22.mjs";
+import "../chunk-C44WSDEY.mjs";
 import "../chunk-SEWNVIHH.mjs";
 export {
   Popconfirm