@expcat/tigercat-vue 1.2.39 → 1.2.41

package/dist/{chunk-MD7S2A55.js → chunk-5TJI4HOT.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkFKCZSBM6js = require('./chunk-FKCZSBM6.js');
+var _chunk7IVLFDZIjs = require('./chunk-7IVLFDZI.js');
 
 // src/components/DropdownItem.ts
 var _vue = require('vue');
@@ -47,7 +47,7 @@ var DropdownItem = _vue.defineComponent.call(void 0, {
     const attrsRecord = attrs;
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
-    const context = _vue.inject.call(void 0, _chunkFKCZSBM6js.DropdownContextKey, null);
+    const context = _vue.inject.call(void 0, _chunk7IVLFDZIjs.DropdownContextKey, null);
     const handleClick = (event) => {
       if (props.disabled) {
         event.preventDefault();

package/dist/{chunk-FKCZSBM6.js → chunk-7IVLFDZI.js}

@@ -2,6 +2,7 @@
 
 
 
+
 var _chunkEQW6IUHGjs = require('./chunk-EQW6IUHG.js');
 
 // src/components/Dropdown.ts
@@ -33,6 +34,7 @@ var _vue = require('vue');
 
 
 
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var DropdownMenu = _vue.defineComponent.call(void 0, {
   name: "TigerDropdownMenu",
@@ -147,6 +149,15 @@ var Dropdown = _vue.defineComponent.call(void 0, {
       type: Boolean,
       default: true
     },
+    /**
+     * Render the menu into document.body (Teleport) so it is not clipped or
+     * covered by overflow/sticky ancestors (e.g. fixed table columns).
+     * @default true
+     */
+    portal: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Additional CSS classes
      */
@@ -239,7 +250,7 @@ var Dropdown = _vue.defineComponent.call(void 0, {
         if (enabled) {
           cleanupClickOutside = _chunkEQW6IUHGjs.useVueClickOutside.call(void 0, {
             enabled: currentVisible,
-            containerRef,
+            refs: [containerRef, floatingRef],
             onOutsideClick: () => setVisible(false),
             defer: true
           });
@@ -277,11 +288,12 @@ var Dropdown = _vue.defineComponent.call(void 0, {
     );
     const mergedStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrsStyle, props.style));
     const triggerClasses = _vue.computed.call(void 0, () => _tigercatcore.getDropdownTriggerClasses.call(void 0, props.disabled));
-    const menuWrapperClasses = _tigercatcore.classNames.call(void 0, "absolute z-50", _tigercatcore.DROPDOWN_ENTER_CLASS);
+    const menuWrapperClasses = _tigercatcore.classNames.call(void 0, "absolute", _tigercatcore.DROPDOWN_ENTER_CLASS);
     const menuWrapperStyles = _vue.computed.call(void 0, () => ({
       position: "absolute",
       left: `${x.value}px`,
       top: `${y.value}px`,
+      zIndex: _tigercatcore.FLOATING_OVERLAY_Z_INDEX,
       transformOrigin: _tigercatcore.getTransformOrigin.call(void 0, currentPlacement.value)
     }));
     _vue.provide.call(void 0, DropdownContextKey, {
@@ -329,12 +341,13 @@ var Dropdown = _vue.defineComponent.call(void 0, {
         },
         [triggerNode, chevronNode]
       ) : null;
-      const menu = menuNode ? _vue.h.call(void 0, 
+      const menuWrapper = menuNode ? _vue.h.call(void 0, 
         "div",
         {
           ref: floatingRef,
           class: menuWrapperClasses,
           style: menuWrapperStyles.value,
+          "data-tiger-dropdown-menu": "",
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           onKeydown: handleMenuKeyDown,
@@ -342,6 +355,7 @@ var Dropdown = _vue.defineComponent.call(void 0, {
         },
         [_vue.cloneVNode.call(void 0, menuNode, { id: menuId })]
       ) : null;
+      const menu = menuWrapper ? _chunkEQW6IUHGjs.renderVueBodyTeleport.call(void 0, menuWrapper, !props.portal) : null;
       const {
         class: _class,
         style: _style,

package/dist/{chunk-5Z2OCSVJ.mjs → chunk-CHDKJDZQ.mjs}

@@ -63,6 +63,14 @@ var tableProps = {
     type: Array,
     default: () => []
   },
+  hiddenColumnKeys: {
+    type: Array,
+    default: void 0
+  },
+  defaultHiddenColumnKeys: {
+    type: Array,
+    default: void 0
+  },
   sort: {
     type: Object
   },
@@ -184,6 +192,8 @@ var tableEmits = [
   "selection-change",
   "sort-change",
   "filter-change",
+  "update:hiddenColumnKeys",
+  "hidden-columns-change",
   "page-change",
   "expand-change",
   "cell-change",
@@ -203,7 +213,8 @@ import {
   filterDataAdvanced,
   groupDataByColumn,
   getFixedColumnOffsets,
-  getFixedVirtualRange
+  getFixedVirtualRange,
+  filterHiddenColumns
 } from "@expcat/tigercat-core";
 import { exportTableData, downloadTableExport } from "@expcat/tigercat-core";
 function useTableState(props, emit, measuredColumnWidths) {
@@ -211,10 +222,14 @@ function useTableState(props, emit, measuredColumnWidths) {
     return props.pagination !== false && typeof props.pagination === "object" ? props.pagination : null;
   });
   const isSortControlled = computed(() => props.sort !== void 0);
+  const isHiddenColumnsControlled = computed(() => props.hiddenColumnKeys !== void 0);
   const isFiltersControlled = computed(() => props.filters !== void 0);
   const isSelectionControlled = computed(() => props.rowSelection?.selectedRowKeys !== void 0);
   const isExpandControlled = computed(() => props.expandable?.expandedRowKeys !== void 0);
   const uncontrolledSortState = ref(props.defaultSort ?? { key: null, direction: null });
+  const uncontrolledHiddenColumnKeys = ref(
+    props.defaultHiddenColumnKeys ?? props.hiddenColumnKeys ?? []
+  );
   const uncontrolledFilterState = ref(props.defaultFilters ?? {});
   const uncontrolledCurrentPage = ref(
     paginationConfig.value?.defaultCurrent ?? paginationConfig.value?.current ?? 1
@@ -229,6 +244,9 @@ function useTableState(props, emit, measuredColumnWidths) {
     props.expandable?.defaultExpandedRowKeys ?? props.expandable?.expandedRowKeys ?? []
   );
   const sortState = computed(() => props.sort ?? uncontrolledSortState.value);
+  const hiddenColumnKeys = computed(
+    () => props.hiddenColumnKeys ?? uncontrolledHiddenColumnKeys.value
+  );
   const filterState = computed(() => props.filters ?? uncontrolledFilterState.value);
   const currentPage = computed(() => {
     return paginationConfig.value?.current ?? uncontrolledCurrentPage.value;
@@ -258,6 +276,14 @@ function useTableState(props, emit, measuredColumnWidths) {
       }
     }
   );
+  watch(
+    () => props.hiddenColumnKeys,
+    (next) => {
+      if (next !== void 0) {
+        uncontrolledHiddenColumnKeys.value = next;
+      }
+    }
+  );
   watch(
     () => paginationConfig.value?.current,
     (next) => {
@@ -292,13 +318,14 @@ function useTableState(props, emit, measuredColumnWidths) {
   );
   const fixedOverrides = ref({});
   const displayColumns = computed(() => {
-    return props.columns.map((column) => {
+    const mapped = props.columns.map((column) => {
       const hasOverride = column.key in fixedOverrides.value;
       return {
         ...column,
         fixed: hasOverride ? fixedOverrides.value[column.key] : column.fixed
       };
     });
+    return filterHiddenColumns(mapped, hiddenColumnKeys.value);
   });
   const fixedColumnsInfo = computed(() => {
     return getFixedColumnOffsets(displayColumns.value, measuredColumnWidths.value);
@@ -310,6 +337,13 @@ function useTableState(props, emit, measuredColumnWidths) {
     }
     return map;
   });
+  function handleSetHiddenColumns(hiddenKeys) {
+    if (!isHiddenColumnsControlled.value) {
+      uncontrolledHiddenColumnKeys.value = hiddenKeys;
+    }
+    emit("update:hiddenColumnKeys", hiddenKeys);
+    emit("hidden-columns-change", hiddenKeys);
+  }
   function toggleColumnLock(columnKey) {
     const original = props.columns.find((c) => c.key === columnKey)?.fixed;
     const hasOverride = columnKey in fixedOverrides.value;
@@ -579,12 +613,14 @@ function useTableState(props, emit, measuredColumnWidths) {
     filterState,
     currentPage,
     currentPageSize,
+    hiddenColumnKeys,
     selectedRowKeys,
     expandedRowKeys,
     editingCell,
     editingValue,
     virtualScrollTop,
     toggleColumnLock,
+    handleSetHiddenColumns,
     handleSetSort,
     handleSort,
     handleFilter,

package/dist/{chunk-O23S65U3.js → chunk-EWQJGR7E.js}

@@ -1,17 +1,23 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunk5BILS3SGjs = require('./chunk-5BILS3SG.js');
+var _chunkOFTAQ2A4js = require('./chunk-OFTAQ2A4.js');
 
 
 var _chunkBGMAWKWVjs = require('./chunk-BGMAWKWV.js');
 
 
+var _chunkLUAI6VXVjs = require('./chunk-LUAI6VXV.js');
+
+
 var _chunk25EYT2CBjs = require('./chunk-25EYT2CB.js');
 
 
 var _chunkBYNMOQBBjs = require('./chunk-BYNMOQBB.js');
 
 
+var _chunk2YFXJUBTjs = require('./chunk-2YFXJUBT.js');
+
+
 var _chunk4VLNT2EDjs = require('./chunk-4VLNT2ED.js');
 
 // src/components/DataTableWithToolbar.ts
@@ -49,6 +55,14 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
       type: Array,
       default: () => []
     },
+    hiddenColumnKeys: {
+      type: Array,
+      default: void 0
+    },
+    defaultHiddenColumnKeys: {
+      type: Array,
+      default: void 0
+    },
     sort: {
       type: Object,
       default: void 0
@@ -153,11 +167,16 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
     "bulk-action": (_action, _keys) => true,
     "selection-change": (_keys) => true,
     "page-change": (_current, _pageSize) => true,
-    "page-size-change": (_current, _pageSize) => true
+    "page-size-change": (_current, _pageSize) => true,
+    "update:hiddenColumnKeys": (_hiddenKeys) => true,
+    "hidden-columns-change": (_hiddenKeys) => true
   },
   setup(props, { attrs, emit }) {
     const config = _chunk25EYT2CBjs.useTigerConfig.call(void 0, );
     const internalSearch = _vue.ref.call(void 0, _nullishCoalesce(_optionalChain([props, 'access', _ => _.toolbar, 'optionalAccess', _2 => _2.defaultSearchValue]), () => ( "")));
+    const internalHiddenKeys = _vue.ref.call(void 0, 
+      _nullishCoalesce(_nullishCoalesce(props.defaultHiddenColumnKeys, () => ( props.hiddenColumnKeys)), () => ( []))
+    );
     const internalFilters = _vue.ref.call(void 0, {});
     const previousPageSize = _vue.ref.call(void 0, 
       props.pagination && typeof props.pagination === "object" ? _nullishCoalesce(_nullishCoalesce(props.pagination.pageSize, () => ( props.pagination.defaultPageSize)), () => ( 10)) : void 0
@@ -209,6 +228,14 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         }
       }
     );
+    _vue.watch.call(void 0, 
+      () => props.hiddenColumnKeys,
+      (nextValue) => {
+        if (nextValue !== void 0) {
+          internalHiddenKeys.value = nextValue;
+        }
+      }
+    );
     _vue.watch.call(void 0, 
       () => _optionalChain([props, 'access', _7 => _7.toolbar, 'optionalAccess', _8 => _8.filters]),
       (filters) => {
@@ -241,14 +268,29 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
     });
     const hasFilters = _vue.computed.call(void 0, () => Boolean(_optionalChain([props, 'access', _15 => _15.toolbar, 'optionalAccess', _16 => _16.filters, 'optionalAccess', _17 => _17.length])));
     const hasBulkActions = _vue.computed.call(void 0, () => Boolean(_optionalChain([props, 'access', _18 => _18.toolbar, 'optionalAccess', _19 => _19.bulkActions, 'optionalAccess', _20 => _20.length])));
+    const hasColumnSettings = _vue.computed.call(void 0, () => Boolean(_optionalChain([props, 'access', _21 => _21.toolbar, 'optionalAccess', _22 => _22.showColumnSettings])));
+    const resolvedHiddenKeys = _vue.computed.call(void 0, () => _nullishCoalesce(props.hiddenColumnKeys, () => ( internalHiddenKeys.value)));
+    const handleHiddenColumnsChange = (nextHiddenKeys) => {
+      if (props.hiddenColumnKeys === void 0) {
+        internalHiddenKeys.value = nextHiddenKeys;
+      }
+      emit("update:hiddenColumnKeys", nextHiddenKeys);
+      emit("hidden-columns-change", nextHiddenKeys);
+    };
+    const handleToggleColumnVisibility = (columnKey, visible) => {
+      const nextHiddenKeys = visible ? resolvedHiddenKeys.value.filter((key) => key !== columnKey) : [...resolvedHiddenKeys.value, columnKey];
+      handleHiddenColumnsChange(nextHiddenKeys);
+    };
     const canSearch = _vue.computed.call(void 0, () => Boolean(vnodeProps.onSearch));
     const selectedKeys = _vue.computed.call(void 0, 
-      () => _nullishCoalesce(_nullishCoalesce(_optionalChain([props, 'access', _21 => _21.toolbar, 'optionalAccess', _22 => _22.selectedKeys]), () => ( _optionalChain([props, 'access', _23 => _23.rowSelection, 'optionalAccess', _24 => _24.selectedRowKeys]))), () => ( []))
+      () => _nullishCoalesce(_nullishCoalesce(_optionalChain([props, 'access', _23 => _23.toolbar, 'optionalAccess', _24 => _24.selectedKeys]), () => ( _optionalChain([props, 'access', _25 => _25.rowSelection, 'optionalAccess', _26 => _26.selectedRowKeys]))), () => ( []))
     );
     const selectedCount = _vue.computed.call(void 0, 
-      () => _optionalChain([props, 'access', _25 => _25.toolbar, 'optionalAccess', _26 => _26.selectedCount]) !== void 0 ? props.toolbar.selectedCount : selectedKeys.value.length
+      () => _optionalChain([props, 'access', _27 => _27.toolbar, 'optionalAccess', _28 => _28.selectedCount]) !== void 0 ? props.toolbar.selectedCount : selectedKeys.value.length
+    );
+    const bulkLabel = _vue.computed.call(void 0, 
+      () => _nullishCoalesce(_optionalChain([props, 'access', _29 => _29.toolbar, 'optionalAccess', _30 => _30.bulkActionsLabel]), () => ( tableLabels.value.selectedText))
     );
-    const bulkLabel = _vue.computed.call(void 0, () => _nullishCoalesce(_optionalChain([props, 'access', _27 => _27.toolbar, 'optionalAccess', _28 => _28.bulkActionsLabel]), () => ( tableLabels.value.selectedText)));
     const wrapperClasses = _vue.computed.call(void 0, 
       () => _tigercatcore.classNames.call(void 0, 
         "tiger-data-table-with-toolbar flex flex-col",
@@ -259,7 +301,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
     );
     const wrapperStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style));
     const handleSearchChange = (value) => {
-      if (_optionalChain([props, 'access', _29 => _29.toolbar, 'optionalAccess', _30 => _30.searchValue]) === void 0) {
+      if (_optionalChain([props, 'access', _31 => _31.toolbar, 'optionalAccess', _32 => _32.searchValue]) === void 0) {
         internalSearch.value = value;
       }
       emit("search-change", value);
@@ -282,7 +324,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
     };
     const handleBulkAction = (action) => {
       const keys = _nullishCoalesce(selectedKeys.value, () => ( []));
-      _optionalChain([action, 'access', _31 => _31.onClick, 'optionalCall', _32 => _32(keys)]);
+      _optionalChain([action, 'access', _33 => _33.onClick, 'optionalCall', _34 => _34(keys)]);
       emit("bulk-action", action, keys);
     };
     const handleTablePageChange = ({
@@ -295,11 +337,78 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
       }
       previousPageSize.value = pageSize;
     };
+    const renderColumnSettings = () => {
+      const lockedKeys = new Set(_nullishCoalesce(_optionalChain([props, 'access', _35 => _35.toolbar, 'optionalAccess', _36 => _36.columnSettings, 'optionalAccess', _37 => _37.lockedColumnKeys]), () => ( [])));
+      const panelTitle = _nullishCoalesce(_optionalChain([props, 'access', _38 => _38.toolbar, 'optionalAccess', _39 => _39.columnSettings, 'optionalAccess', _40 => _40.title]), () => ( tableLabels.value.columnSettingsText));
+      return _vue.h.call(void 0, 
+        _chunkLUAI6VXVjs.Popover,
+        {
+          trigger: "click",
+          placement: "bottom-end"
+        },
+        {
+          default: () => _vue.h.call(void 0, 
+            _chunk4VLNT2EDjs.Button,
+            {
+              size: "sm",
+              variant: "outline",
+              class: "shrink-0 px-2",
+              "aria-label": tableLabels.value.columnSettingsAriaLabel
+            },
+            {
+              default: () => _vue.h.call(void 0, 
+                "svg",
+                {
+                  class: "w-3.5 h-3.5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  viewBox: "0 0 24 24",
+                  "aria-hidden": "true"
+                },
+                [
+                  _vue.h.call(void 0, "path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                  }),
+                  _vue.h.call(void 0, "path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                  })
+                ]
+              )
+            }
+          ),
+          title: () => panelTitle,
+          content: () => _vue.h.call(void 0, 
+            "div",
+            { class: "flex flex-col gap-2 min-w-[160px]" },
+            props.columns.map((column) => {
+              const locked = lockedKeys.has(column.key) || column.hideable === false;
+              return _vue.h.call(void 0, 
+                _chunk2YFXJUBTjs.Checkbox,
+                {
+                  key: column.key,
+                  size: "sm",
+                  modelValue: !resolvedHiddenKeys.value.includes(column.key),
+                  disabled: locked,
+                  "onUpdate:modelValue": (checked) => handleToggleColumnVisibility(column.key, checked)
+                },
+                { default: () => column.title }
+              );
+            })
+          )
+        }
+      );
+    };
     const renderToolbar = () => {
-      if (!hasSearch.value && !hasFilters.value && !hasBulkActions.value) return null;
+      if (!hasSearch.value && !hasFilters.value && !hasBulkActions.value && !hasColumnSettings.value)
+        return null;
       const leftNodes = [];
       if (hasSearch.value) {
-        const showButton = _nullishCoalesce(_optionalChain([props, 'access', _33 => _33.toolbar, 'optionalAccess', _34 => _34.showSearchButton]), () => ( true));
+        const showButton = _nullishCoalesce(_optionalChain([props, 'access', _41 => _41.toolbar, 'optionalAccess', _42 => _42.showSearchButton]), () => ( true));
         leftNodes.push(
           _vue.h.call(void 0, 
             "div",
@@ -311,7 +420,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
                   type: "search",
                   size: "sm",
                   modelValue: searchValue.value,
-                  placeholder: _nullishCoalesce(_optionalChain([props, 'access', _35 => _35.toolbar, 'optionalAccess', _36 => _36.searchPlaceholder]), () => ( tableLabels.value.searchPlaceholder)),
+                  placeholder: _nullishCoalesce(_optionalChain([props, 'access', _43 => _43.toolbar, 'optionalAccess', _44 => _44.searchPlaceholder]), () => ( tableLabels.value.searchPlaceholder)),
                   "onUpdate:modelValue": (value) => handleSearchChange(String(_nullishCoalesce(value, () => ( "")))),
                   onKeydown: (event) => {
                     if (event.key === "Enter") {
@@ -349,14 +458,16 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
                   onClick: handleSearchSubmit,
                   disabled: !canSearch.value
                 },
-                { default: () => _nullishCoalesce(_optionalChain([props, 'access', _37 => _37.toolbar, 'optionalAccess', _38 => _38.searchButtonText]), () => ( tableLabels.value.searchButtonText)) }
+                {
+                  default: () => _nullishCoalesce(_optionalChain([props, 'access', _45 => _45.toolbar, 'optionalAccess', _46 => _46.searchButtonText]), () => ( tableLabels.value.searchButtonText))
+                }
               ) : null
             ]
           )
         );
       }
       if (hasFilters.value) {
-        _optionalChain([props, 'access', _39 => _39.toolbar, 'optionalAccess', _40 => _40.filters, 'optionalAccess', _41 => _41.forEach, 'call', _42 => _42((filter) => {
+        _optionalChain([props, 'access', _47 => _47.toolbar, 'optionalAccess', _48 => _48.filters, 'optionalAccess', _49 => _49.forEach, 'call', _50 => _50((filter) => {
           const currentValue = resolvedFilters.value[filter.key];
           const clearable = filter.clearable !== false;
           leftNodes.push(
@@ -401,7 +512,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
           );
         }
         ;
-        (_nullishCoalesce(_optionalChain([props, 'access', _43 => _43.toolbar, 'optionalAccess', _44 => _44.bulkActions]), () => ( []))).forEach((action) => {
+        (_nullishCoalesce(_optionalChain([props, 'access', _51 => _51.toolbar, 'optionalAccess', _52 => _52.bulkActions]), () => ( []))).forEach((action) => {
           bulkChildren.push(
             _vue.h.call(void 0, 
               _chunk4VLNT2EDjs.Button,
@@ -433,7 +544,10 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
             "div",
             { class: "flex items-center gap-2.5 flex-wrap ml-auto shrink-0" },
             bulkChildren
-          ) : null
+          ) : null,
+          hasColumnSettings.value ? _vue.h.call(void 0, "div", { class: _tigercatcore.classNames.call(void 0, "shrink-0", !hasBulkActions.value && "ml-auto") }, [
+            renderColumnSettings()
+          ]) : null
         ]
       );
     };
@@ -444,6 +558,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         columns: props.columns,
         columnLockable: props.columnLockable,
         dataSource: props.dataSource,
+        hiddenColumnKeys: resolvedHiddenKeys.value,
         ...props.sort !== void 0 ? { sort: props.sort } : {},
         ...props.defaultSort !== void 0 ? { defaultSort: props.defaultSort } : {},
         ...props.filters !== void 0 ? { filters: props.filters } : {},
@@ -476,7 +591,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
           style: wrapperStyle.value,
           "data-tiger-data-table-with-toolbar": ""
         },
-        [renderToolbar(), _vue.h.call(void 0, _chunk5BILS3SGjs.Table, tableProps)]
+        [renderToolbar(), _vue.h.call(void 0, _chunkOFTAQ2A4js.Table, tableProps)]
       );
     };
   }

package/dist/{chunk-G7O3G2LI.mjs → chunk-FI2EIJIF.mjs}

@@ -1,6 +1,6 @@
 import {
   useFloatingPopup
-} from "./chunk-JPZJZFC4.mjs";
+} from "./chunk-M4EP4OVR.mjs";
 import {
   renderVueBodyTeleport
 } from "./chunk-BDTPFPSB.mjs";

package/dist/{chunk-YCYS6LAQ.js → chunk-GD2WAN62.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkNNFDOVVAjs = require('./chunk-NNFDOVVA.js');
+var _chunkQOMWROWEjs = require('./chunk-QOMWROWE.js');
 
 
 var _chunkEQW6IUHGjs = require('./chunk-EQW6IUHG.js');
@@ -93,7 +93,7 @@ var Popconfirm = _vue.defineComponent.call(void 0, {
       floatingRef,
       floatingStyles,
       actualPlacement
-    } = _chunkNNFDOVVAjs.useFloatingPopup.call(void 0, { props, emit, multiTrigger: false });
+    } = _chunkQOMWROWEjs.useFloatingPopup.call(void 0, { props, emit, multiTrigger: false });
     const popconfirmId = createPopconfirmId();
     const titleId = `${popconfirmId}-title`;
     const descriptionId = `${popconfirmId}-description`;