@soft-stech/bootsman-ui-shadcn 1.4.24 → 1.4.26

package/dist/components/ui/tooltip/BuiTooltipContent.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../../../BuiTooltipContent.vue_vue_type_script_setup_true_lang-ZfTnapKW.js";
+import { _ as f } from "../../../BuiTooltipContent.vue_vue_type_script_setup_true_lang-CZ1I3edy.js";
 export {
   f as default
 };

package/dist/components/ui/tooltip/index.js

@@ -1,5 +1,5 @@
 import { _ as i } from "../../../BuiTooltip.vue_vue_type_script_setup_true_lang-Cas1FHjM.js";
-import { _ as p } from "../../../BuiTooltipContent.vue_vue_type_script_setup_true_lang-ZfTnapKW.js";
+import { _ as p } from "../../../BuiTooltipContent.vue_vue_type_script_setup_true_lang-CZ1I3edy.js";
 import { _ as T } from "../../../BuiTooltipTrigger.vue_vue_type_script_setup_true_lang-CnGv207Y.js";
 import { _ as f } from "../../../BuiTooltipProvider.vue_vue_type_script_setup_true_lang-CCOYEiUg.js";
 export {

package/dist/index.js

@@ -113,7 +113,7 @@ import { BuiTabsList as Rt, BuiTabsTrigger as Gt, tabsListVariants as Et, tabsTr
 import { BuiTextarea as Nt, textareaVariants as jt } from "./components/ui/textarea/index.js";
 import { BuiToast as Jt, BuiToaster as Kt, toastVariants as Ut } from "./components/ui/toast/index.js";
 import { _ as zt } from "./BuiTooltip.vue_vue_type_script_setup_true_lang-Cas1FHjM.js";
-import { _ as Wt } from "./BuiTooltipContent.vue_vue_type_script_setup_true_lang-ZfTnapKW.js";
+import { _ as Wt } from "./BuiTooltipContent.vue_vue_type_script_setup_true_lang-CZ1I3edy.js";
 import { _ as Zt } from "./BuiTooltipTrigger.vue_vue_type_script_setup_true_lang-CnGv207Y.js";
 import { _ as oa } from "./BuiTooltipProvider.vue_vue_type_script_setup_true_lang-CCOYEiUg.js";
 import { BuiToggle as ea, toggleVariants as ta } from "./components/ui/toggle/index.js";
@@ -145,11 +145,11 @@ import { _ as ai } from "./BuiAlertDescription.vue_vue_type_script_setup_true_la
 import { _ as ui } from "./BuiAvatarImage.vue_vue_type_script_setup_true_lang-DELf2i8H.js";
 import { _ as si } from "./BuiAvatarFallback.vue_vue_type_script_setup_true_lang-B1ncuXZ0.js";
 import "./BuiCalendar.vue_vue_type_style_index_0_lang-DK4yUiXC.js";
-import { _ as Bi } from "./BuiTable.vue_vue_type_script_setup_true_lang-D8Tseif4.js";
+import { _ as Bi } from "./BuiTable.vue_vue_type_script_setup_true_lang-QoPGiEYZ.js";
 import { _ as fi } from "./BuiTableBody.vue_vue_type_script_setup_true_lang-DblqmDim.js";
 import { _ as _i } from "./BuiTableCell.vue_vue_type_script_setup_true_lang-CYBx0oJL.js";
 import { _ as di } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-BDSRArVd.js";
-import { _ as Ci } from "./BuiTableHeader.vue_vue_type_script_setup_true_lang-B2getNR7.js";
+import { _ as Ci } from "./BuiTableHeader.vue_vue_type_script_setup_true_lang-BXgL487_.js";
 import { _ as Fi } from "./BuiTableRow.vue_vue_type_script_setup_true_lang-Bl4nF6yV.js";
 import { _ as Si } from "./BuiTableCaption.vue_vue_type_script_setup_true_lang-CTEP1Sde.js";
 import { _ as Ai } from "./BuiTableEmpty.vue_vue_type_script_setup_true_lang-BTyX0sT5.js";
@@ -165,12 +165,13 @@ import { _ as ji } from "./BuiSheetHeader.vue_vue_type_script_setup_true_lang-vG
 import { _ as Ji } from "./BuiSheetTitle.vue_vue_type_script_setup_true_lang-D-bamlaT.js";
 import { _ as Ui } from "./BuiSheetTrigger.vue_vue_type_script_setup_true_lang-Bo3F1V-i.js";
 import { Form as zi, Field as Qi, FieldArray as Wi, useField as Xi, useFieldArray as Zi, useForm as $i } from "vee-validate";
-import { _ as ru } from "./BuiToastViewport.vue_vue_type_script_setup_true_lang-BBDzM6Br.js";
-import { _ as tu } from "./BuiToastClose.vue_vue_type_script_setup_true_lang-fLjieQsa.js";
-import { _ as iu } from "./BuiToastTitle.vue_vue_type_script_setup_true_lang-D1VfRzjv.js";
-import { _ as pu } from "./BuiToastDescription.vue_vue_type_script_setup_true_lang-CZ5Gk9K4.js";
-import { _ as mu } from "./BuiToastProvider.vue_vue_type_script_setup_true_lang-ZXzJkgBD.js";
-import { toast as xu, useToast as fu } from "./components/ui/toast/use-toast.js";
+import { _ as ru } from "./BuiDataTableColumnList.vue_vue_type_script_setup_true_lang-DsrMMFKz.js";
+import { _ as tu } from "./BuiToastViewport.vue_vue_type_script_setup_true_lang-BBDzM6Br.js";
+import { _ as iu } from "./BuiToastClose.vue_vue_type_script_setup_true_lang-fLjieQsa.js";
+import { _ as pu } from "./BuiToastTitle.vue_vue_type_script_setup_true_lang-D1VfRzjv.js";
+import { _ as mu } from "./BuiToastDescription.vue_vue_type_script_setup_true_lang-CZ5Gk9K4.js";
+import { _ as xu } from "./BuiToastProvider.vue_vue_type_script_setup_true_lang-ZXzJkgBD.js";
+import { toast as nu, useToast as _u } from "./components/ui/toast/use-toast.js";
 export {
   a as BuiAccordion,
   u as BuiAccordionContent,
@@ -244,6 +245,7 @@ export {
   pr as BuiContextMenuSubTrigger,
   Oo as BuiContextMenuTrigger,
   vt as BuiDataTable,
+  ru as BuiDataTableColumnList,
   xr as BuiDialog,
   nr as BuiDialogClose,
   br as BuiDialogContent,
@@ -343,11 +345,11 @@ export {
   Nt as BuiTextarea,
   Jt as BuiToast,
   vi as BuiToastAction,
-  tu as BuiToastClose,
-  pu as BuiToastDescription,
-  mu as BuiToastProvider,
-  iu as BuiToastTitle,
-  ru as BuiToastViewport,
+  iu as BuiToastClose,
+  mu as BuiToastDescription,
+  xu as BuiToastProvider,
+  pu as BuiToastTitle,
+  tu as BuiToastViewport,
   Kt as BuiToaster,
   ea as BuiToggle,
   ia as BuiToggleGroup,
@@ -380,12 +382,12 @@ export {
   Ot as tabsTriggerVariants,
   oi as tailwind,
   jt as textareaVariants,
-  xu as toast,
+  nu as toast,
   Ut as toastVariants,
   ta as toggleVariants,
   Xi as useBuiField,
   Zi as useBuiFieldArray,
   $i as useBuiForm,
-  fu as useToast,
+  _u as useToast,
   $ as valueUpdater
 };

package/dist/variables.css

@@ -1 +1 @@
-:root{--background: 0 0% 100%;--foreground: 242 24% 21%;--muted: 210 40% 96.1%;--muted-foreground: 225 5% 47%;--popover: 0 0% 100%;--popover-foreground: 222.2 84% 4.9%;--card: 0 0% 100%;--card-foreground: 222.2 84% 4.9%;--card-shadow: 241 92% 71%, .16;--tab-shadow: 228, 51%, 11%, .08;--border: 241 92% 71%;--input: 225 11% 84%;--primary: 241 92% 71%;--primary-hover: 241 76% 62%;--primary-active: 241 54% 54%;--primary-foreground: 0 0% 100%;--secondary: 210 40% 96.1%;--secondary-foreground: 241 76% 62%;--accent: 241 92% 71%;--accent-foreground: 241 76% 62%;--destructive: 328, 68%, 63%, .16;--destructive-foreground: 328, 68%, 63%;--success: 181, 34%, 39%, .16;--success-foreground: 181, 34%, 39%;--warning: 48, 79%, 45%, .16;--warning-foreground: 48, 79%, 45%;--info: 198, 85%, 45%, .16;--info-foreground: 198 85% 45%;--ring: 241 92% 71%;--radius: .5rem;--tooltip: 225 5% 47%}.dark{--background: 242 24% 21%;--foreground: 0 0% 100%;--muted: 217.2 32.6% 17.5%;--muted-foreground: 0, 0%, 100%, .32;--popover: 222.2 84% 4.9%;--popover-foreground: 210 40% 98%;--card: 242 24% 21%;--card-foreground: 210 40% 98%;--card-shadow: 241 92% 71%, .4;--tab-shadow: 228, 51%, 11%, .08;--border: 241 92% 71%;--input: 0, 0%, 100%, .32;--primary: 241 92% 71%;--primary-hover: 241 76% 62%;--primary-active: 241 54% 54%;--primary-foreground: 0 0% 100%;--secondary: 217.2 32.6% 17.5%;--secondary-foreground: 210 40% 98%;--accent: 241 92% 71%;--accent-foreground: 240 100% 77%;--destructive: 328, 68%, 63%, .16;--destructive-foreground: 328, 68%, 63%;--success: 181, 34%, 39%, .16;--success-foreground: 152 80% 38%}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground))}
+:root{--background: 0 0% 100%;--foreground: 242 24% 21%;--muted: 210 40% 96.1%;--muted-foreground: 225 5% 47%;--popover: 0 0% 100%;--popover-foreground: 222.2 84% 4.9%;--card: 0 0% 100%;--card-foreground: 222.2 84% 4.9%;--card-shadow: 241, 92%, 71%, .16;--tab-shadow: 228, 51%, 11%, .08;--border: 241 92% 71%;--input: 225 11% 84%;--primary: 241 92% 71%;--primary-hover: 241 76% 62%;--primary-active: 241 54% 54%;--primary-foreground: 0 0% 100%;--secondary: 210 40% 96.1%;--secondary-foreground: 241 76% 62%;--accent: 241 92% 71%;--accent-foreground: 241 76% 62%;--destructive: 328, 68%, 63%, .16;--destructive-foreground: 328 68% 63%;--success: 181, 34%, 39%, .16;--success-foreground: 181 34% 39%;--warning: 48, 79%, 45%, .16;--warning-foreground: 48 79% 45%;--info: 198, 85%, 45%, .16;--info-foreground: 198 85% 45%;--ring: 241 92% 71%;--radius: .5rem;--tooltip: 225 5% 47%;--tooltip-link: 241 100% 88%}.dark{--background: 242 24% 21%;--foreground: 0 0% 100%;--muted: 217.2 32.6% 17.5%;--muted-foreground: 0, 0%, 100%, .32;--popover: 222.2 84% 4.9%;--popover-foreground: 210 40% 98%;--card: 242 24% 21%;--card-foreground: 210 40% 98%;--card-shadow: 241, 92%, 71%, .4;--tab-shadow: 228, 51%, 11%, .08;--border: 241 92% 71%;--input: 0, 0%, 100%, .32;--primary: 241 92% 71%;--primary-hover: 241 76% 62%;--primary-active: 241 54% 54%;--primary-foreground: 0 0% 100%;--secondary: 217.2 32.6% 17.5%;--secondary-foreground: 210 40% 98%;--accent: 241 92% 71%;--accent-foreground: 240 100% 77%;--destructive: 328, 68%, 63%, .16;--destructive-foreground: 328 68% 63%;--success: 154, 84%, 45%, .16;--success-foreground: 181 35% 49%}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.4.24",
+  "version": "1.4.26",
   "type": "module",
   "files": [
     "dist",
@@ -15,19 +15,21 @@
     "url": "https://github.com/soft-stech/bootsman-ui-shadcn"
   },
   "peerDependencies": {
-    "vue": "^3.5.6",
-    "zod": "^3.23.6",
-    "vee-validate": "^4.13.2",
     "@tanstack/vue-table": "8.20.5",
     "@vee-validate/zod": "4.13.2",
-    "@vueuse/core": "11.1.0"
+    "@vueuse/core": "11.1.0",
+    "vee-validate": "^4.13.2",
+    "vue": "^3.5.6",
+    "zod": "^3.23.6"
   },
   "dependencies": {
     "@internationalized/date": "^3.5.5",
+    "@vueuse/integrations": "^13.0.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "lucide-vue-next": "0.441.0",
     "radix-vue": "1.9.8",
+    "sortablejs": "^1",
     "tailwind-merge": "2.5.2",
     "tailwindcss-animate": "1.0.7",
     "v-calendar": "3.1.2"

package/src/assets/variables.css

@@ -10,7 +10,7 @@
 
   --card: 0 0% 100%;
   --card-foreground: 222.2 84% 4.9%;
-  --card-shadow: 241 92% 71%, 0.16;
+  --card-shadow: 241, 92%, 71%, 0.16;
   --tab-shadow: 228, 51%, 11%, 0.08;
 
   --border: 241 92% 71%;
@@ -28,13 +28,13 @@
   --accent-foreground: 241 76% 62%;
 
   --destructive: 328, 68%, 63%, 0.16;
-  --destructive-foreground: 328, 68%, 63%;
+  --destructive-foreground: 328 68% 63%;
 
   --success: 181, 34%, 39%, 0.16;
-  --success-foreground: 181, 34%, 39%;
+  --success-foreground: 181 34% 39%;
 
   --warning: 48, 79%, 45%, 0.16;
-  --warning-foreground: 48, 79%, 45%;
+  --warning-foreground: 48 79% 45%;
 
   --info: 198, 85%, 45%, 0.16;
   --info-foreground: 198 85% 45%;
@@ -44,6 +44,7 @@
   --radius: 0.5rem;
 
   --tooltip: 225 5% 47%;
+  --tooltip-link: 241 100% 88%;
 }
 
 .dark {
@@ -58,7 +59,7 @@
 
   --card: 242 24% 21%;
   --card-foreground: 210 40% 98%;
-  --card-shadow: 241 92% 71%, 0.4;
+  --card-shadow: 241, 92%, 71%, 0.4;
   --tab-shadow: 228, 51%, 11%, 0.08;
 
   --border: 241 92% 71%;
@@ -76,10 +77,10 @@
   --accent-foreground: 240 100% 77%;
 
   --destructive: 328, 68%, 63%, 0.16;
-  --destructive-foreground: 328, 68%, 63%;
+  --destructive-foreground: 328 68% 63%;
 
-  --success: 181, 34%, 39%, 0.16;
-  --success-foreground: 152 80% 38%;
+  --success: 154, 84%, 45%, 0.16;
+  --success-foreground: 181 35% 49%;
 }
 
 * {

package/src/components/stories/BuiDataTable.story.vue

@@ -3,7 +3,15 @@ import { BuiDataTable } from '@/components/ui/table'
 import RowActionsMenuContent from './components/ActionsMenuContent.vue'
 import { BuiButton, BuiCheckbox, BuiTabs, BuiTabsList, BuiTabsTrigger } from '@/index'
 import { tableColumnSortCommon } from '@/lib/utils'
-import type { ColumnDef, PaginationState, Row, RowSelectionState } from '@tanstack/vue-table'
+import type {
+  ColumnDef,
+  PaginationState,
+  Row,
+  RowSelectionState,
+  ColumnSizingState,
+  VisibilityState,
+  ColumnOrderState
+} from '@tanstack/vue-table'
 import { sort, type ISortByObjectSorter } from 'fast-sort'
 import { logEvent } from 'histoire/client'
 import {
@@ -55,7 +63,8 @@ const columns: ColumnDef<Task>[] = [
           ariaLabel: 'Select row'
         }),
         `${row.getValue('id')}`
-      ])
+      ]),
+    enableHiding: false
   },
   {
     accessorKey: 'title',
@@ -63,7 +72,8 @@ const columns: ColumnDef<Task>[] = [
   },
   {
     accessorKey: 'status',
-    header: ({ column }) => tableColumnSortCommon(column, 'Status')
+    header: ({ column }) => tableColumnSortCommon(column, 'Status'),
+    meta: { title: 'Статус таска' }
   },
   {
     accessorKey: 'priority',
@@ -96,6 +106,10 @@ function updateSelection(val: RowSelectionState) {
   selection.value = val
 }
 
+const columnVisibility = ref<VisibilityState>({ hiddenColumn: false })
+const columnSizing = ref<ColumnSizingState>({ title: 300 })
+const columnOrder = ref<ColumnOrderState>()
+
 type GroupBy = 'none' | 'status' | 'priority'
 const groupBy = ref<GroupBy>('none')
 const groupLabels = {
@@ -175,6 +189,9 @@ function groupName(group: string | number) {
         :data="sortedData"
         v-model:sorting="sorting"
         v-model:pagination="pagination"
+        v-model:column-sizing="columnSizing"
+        v-model:column-visibility="columnVisibility"
+        v-model:column-order="columnOrder"
         @update:selection="updateSelection"
         :total-items="totalItems"
         class="caption-top"
@@ -183,7 +200,6 @@ function groupName(group: string | number) {
         :groupBy="groupBy === 'none' ? undefined : groupBy"
         :groupLabels="groupLabels"
         :renderSubComponent="renderSubComponent"
-        :columnVisibility="{ hiddenColumn: false }"
       >
         <template #caption="{ table }">
           <div class="flex justify-between">

package/src/components/ui/table/BuiDataTable.vue

@@ -6,9 +6,12 @@ import {
 } from '@/components/ui/collapsible'
 import { BuiPaginationCommon, type PageSize } from '@/components/ui/pagination'
 import BuiTableRowSubrow from '@/components/ui/table/BuiTableRowSubrow.vue'
-import { valueUpdater } from '@/lib/utils'
+import { valueUpdater, cn } from '@/lib/utils'
 import type {
+  Column,
   ColumnDef,
+  ColumnOrderState,
+  ColumnSizingState,
   PaginationState,
   Row,
   RowSelectionState,
@@ -22,7 +25,7 @@ import {
   getSortedRowModel,
   useVueTable
 } from '@tanstack/vue-table'
-import { computed, watchEffect } from 'vue'
+import { computed, watchEffect, ref, watch } from 'vue'
 import {
   BuiTable,
   BuiTableBody,
@@ -31,8 +34,19 @@ import {
   BuiTableHead,
   BuiTableHeader,
   BuiTableRow,
-  getPinningStyle
+  getPinningStyle,
+  BuiDataTableColumnList
 } from './'
+import {
+  BuiCommand,
+  BuiCommandEmpty,
+  BuiCommandInput,
+  BuiCommandList
+} from '@/components/ui/command'
+import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/ui/popover'
+import { BuiScrollArea } from '@/components/ui/scroll-area'
+import { BuiButton } from '@/components/ui/button'
+import { Settings2Icon } from 'lucide-vue-next'
 
 const NO_GROUP_KEY = '#UNDEFINED#'
 
@@ -50,21 +64,37 @@ const props = withDefaults(
     getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
     renderSubComponent?: (row: Row<TData>) => (() => any) | undefined
     freezeHeader?: boolean
+    columnSearchPlaceholder?: string
+    columnSearchNotFound?: string
   }>(),
-  { pageSize: 10, showPagination: true, manualPagination: true, manualSorting: true, totalItems: 0 }
+  {
+    pageSize: 10,
+    showPagination: true,
+    manualPagination: true,
+    manualSorting: true,
+    totalItems: 0,
+    columnSearchPlaceholder: 'Column name',
+    columnSearchNotFound: 'Not found'
+  }
 )
 
 const sorting = defineModel<SortingState>('sorting')
 const pagination = defineModel<PaginationState>('pagination')
 const rowSelection = defineModel<RowSelectionState>('selection')
 const columnVisibility = defineModel<VisibilityState>('columnVisibility')
+const columnSizing = defineModel<ColumnSizingState>('columnSizing')
+const columnOrder = defineModel<ColumnOrderState>('columnOrder')
 const computedItems = computed(() =>
   props.manualPagination ? props.totalItems : props.data.length
 )
+const pinnedColumns = props.columns
+  .map((col) => (col.meta?.pinLeft && col.id ? col.id : ''))
+  .filter(Boolean)
+
 const table = useVueTable({
   initialState: {
     // TODO: column freeze
-    //columnPinning: { left: ['id'] },
+    columnPinning: { left: pinnedColumns },
     pagination: { pageSize: props.pageSize }
   },
   get data() {
@@ -85,9 +115,21 @@ const table = useVueTable({
   onRowSelectionChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, rowSelection)
   },
+  onColumnVisibilityChange: (updaterOrValue) => {
+    valueUpdater(updaterOrValue, columnVisibility)
+  },
+  onColumnSizingChange: (updaterOrValue) => {
+    valueUpdater(updaterOrValue, columnSizing)
+  },
+  onColumnOrderChange: (updaterOrValue) => {
+    valueUpdater(updaterOrValue, columnOrder)
+  },
   autoResetPageIndex: false,
   manualPagination: props.manualPagination, // set to false to enable client-side pagination
   manualSorting: props.manualSorting,
+  enableColumnResizing: true,
+  columnResizeMode: 'onChange',
+  columnResizeDirection: 'ltr',
   state: {
     get sorting() {
       return sorting.value
@@ -100,6 +142,12 @@ const table = useVueTable({
     },
     get columnVisibility() {
       return columnVisibility.value
+    },
+    get columnSizing() {
+      return columnSizing.value
+    },
+    get columnOrder() {
+      return columnOrder.value
     }
   },
   getRowId: props.getRowId
@@ -150,6 +198,31 @@ function getGroupLabel(index: number) {
   const labels = props.groupBy && props.groupLabels ? props.groupLabels[props.groupBy] || [] : []
   return labels[index]
 }
+
+const columnsList = ref<Column<TData, unknown>[]>(
+  table
+    .getAllColumns()
+    .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())
+    .sort((a, b) => {
+      if (!columnOrder.value) return 0
+      else if (columnOrder.value?.indexOf(a.id) < 0 && columnOrder.value?.indexOf(b.id) >= 0)
+        return 1
+      else if (columnOrder.value?.indexOf(a.id) >= 0 && columnOrder.value?.indexOf(b.id) < 0)
+        return -1
+      else return columnOrder.value?.indexOf(a.id) - columnOrder.value?.indexOf(b.id)
+    })
+)
+const columnsListIds = computed(() => columnsList.value.map((col) => col.id))
+const open = ref(false)
+const searchColumn = ref('')
+
+const tableHeaders = computed(() =>
+  table.getHeaderGroups().length > 0 ? table.getHeaderGroups()[0].headers : undefined
+)
+
+watch(columnsListIds, () => {
+  table.setColumnOrder(columnsListIds.value)
+})
 </script>
 
 <template>
@@ -157,21 +230,64 @@ function getGroupLabel(index: number) {
     <slot name="caption" :table="table" />
   </div>
   <BuiTable>
-    <BuiTableHeader :freeze-header="props.freezeHeader">
-      <BuiTableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-        <BuiTableHead
-          v-for="header in headerGroup.headers"
-          :key="header.id"
-          :style="{ ...getPinningStyle(header.column) }"
-          :freeze-header="props.freezeHeader"
-        >
-          <FlexRender
-            v-if="!header.isPlaceholder"
-            :render="header.column.columnDef.header"
-            :props="header.getContext()"
-          />
-        </BuiTableHead>
-      </BuiTableRow>
+    <template #columnVisibility>
+      <BuiPopover v-model:open="open">
+        <BuiPopoverTrigger as-child>
+          <div class="absolute right-0 top-0 z-10 h-10 bg-background">
+            <div
+              class="flex h-full items-center border-l border-border/[0.16] bg-foreground/[0.04] px-1"
+            >
+              <BuiButton
+                variant="ghost"
+                class="flex h-8 w-8 items-center justify-center text-foreground"
+              >
+                <Settings2Icon class="h-4 w-4 flex-shrink-0 opacity-50" />
+              </BuiButton>
+            </div>
+          </div>
+        </BuiPopoverTrigger>
+        <BuiPopoverContent class="w-[250px] p-0" align="start">
+          <BuiCommand>
+            <BuiCommandInput
+              :placeholder="columnSearchPlaceholder"
+              v-model="searchColumn"
+              @input="(event) => (searchColumn = event.target.value)"
+            />
+            <BuiCommandList>
+              <BuiScrollArea class="h-[300px]">
+                <BuiCommandEmpty>{{ columnSearchNotFound }}</BuiCommandEmpty>
+                <BuiDataTableColumnList
+                  v-model:columns-list="columnsList as Column<TData, unknown>[]"
+                />
+              </BuiScrollArea>
+            </BuiCommandList>
+          </BuiCommand>
+        </BuiPopoverContent>
+      </BuiPopover>
+    </template>
+    <BuiTableHeader v-if="tableHeaders" :freeze-header="props.freezeHeader">
+      <BuiTableHead
+        v-for="header in tableHeaders"
+        :key="header.id"
+        :style="{ ...getPinningStyle(header.column), width: header.getSize() + 'px' }"
+        :freeze-header="props.freezeHeader"
+      >
+        <FlexRender
+          v-if="!header.isPlaceholder"
+          :render="header.column.columnDef.header"
+          :props="header.getContext()"
+        />
+        <div
+          @dblclick="() => header.column.resetSize()"
+          @mousedown="header.getResizeHandler()?.($event)"
+          :className="
+            cn(
+              'absolute top-0 right-0 h-full w-1 bg-muted-foreground opacity-0 cursor-col-resize select-none touch-none hover:opacity-50',
+              header.column.getIsResizing() ? 'bg-primary opacity-50' : ''
+            )
+          "
+        />
+      </BuiTableHead>
     </BuiTableHeader>
     <BuiTableBody>
       <template v-if="table.getRowModel().rows?.length">

package/src/components/ui/table/BuiDataTableColumnList.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts" generic="TData, TValue">
+import type { Column } from '@tanstack/vue-table'
+import { useTemplateRef } from 'vue'
+
+import { BuiCommandItem } from '@/components/ui/command'
+import { BuiCheckbox } from '@/components/ui/checkbox'
+import { useSortable } from '@vueuse/integrations/useSortable'
+
+const columnsListRef = useTemplateRef<HTMLElement>('columnsListRef')
+const columnsList = defineModel<Column<TData, unknown>[]>('columnsList', {
+  default: [],
+  required: true
+})
+useSortable(columnsListRef, columnsList, { handle: '.dragHandler' })
+</script>
+
+<template>
+  <div ref="columnsListRef">
+    <BuiCommandItem
+      v-for="col in columnsList"
+      :key="`column-${col.id}`"
+      :value="col.id"
+      class="flex gap-4 px-2 py-1.5 text-xs font-medium capitalize text-muted-foreground"
+      @select="col.toggleVisibility()"
+    >
+      <BuiCheckbox :checked="col.getIsVisible()" />
+      <div class="dragHandler grow">
+        {{ col.columnDef.meta?.title || col.id.replace(/([A-Z])/g, ' $1') }}
+      </div>
+    </BuiCommandItem>
+  </div>
+</template>

package/src/components/ui/table/BuiTable.vue

@@ -7,6 +7,7 @@ const props = defineProps<{ class?: string }>()
 
 <template>
   <BuiScrollArea class="w-full grow overflow-auto rounded border border-border/[0.16]">
+    <slot name="columnVisibility" />
     <table :class="cn('w-full caption-top  text-sm', props.class)">
       <slot />
     </table>

package/src/components/ui/table/BuiTableHeader.vue

@@ -14,8 +14,8 @@ const props = defineProps<{
         '[&_tr]:border-border/[0.16]',
         props.class,
         props.freezeHeader
-          ? 'sticky top-0 z-[1] [&_th:first-child>div>div]:pl-6 [&_th:last-child>div>div]:border-r-0 [&_th:last-child>div>div]:pr-6 [&_tr:last-child]:border-b-0'
-          : '[&_th:first-child>div]:pl-6 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-6 [&_tr]:border-b'
+          ? 'sticky top-0 z-[1] [&_th:first-child>div>div]:pl-6 [&_th:last-child>div>div]:border-r-0 [&_th:last-child>div>div]:pr-14 [&_tr:last-child]:border-b-0'
+          : '[&_th:first-child>div]:pl-6 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-14 [&_tr]:border-b'
       )
     "
   >

package/src/components/ui/table/index.ts

@@ -12,6 +12,7 @@ export { default as BuiTableCaption } from './BuiTableCaption.vue'
 export { default as BuiTableEmpty } from './BuiTableEmpty.vue'
 export { default as BuiTableFooter } from './BuiTableFooter.vue'
 export { default as BuiDataTable } from './BuiDataTable.vue'
+export { default as BuiDataTableColumnList } from './BuiDataTableColumnList.vue'
 
 export function getPinningStyle<TData>(column: Column<TData, unknown>): CSSProperties {
   const isPinned = column.getIsPinned()

package/src/components/ui/tooltip/BuiTooltipContent.vue

@@ -22,7 +22,7 @@ const forwarded = useForwardPropsEmits(props, emits)
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'shadow-level3 z-50 overflow-hidden rounded-md border border-muted bg-[hsl(var(--tooltip))] px-3 py-1.5 text-sm text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 overflow-hidden rounded-md border border-muted bg-[hsl(var(--tooltip))] px-3 py-1.5 text-sm text-primary-foreground shadow-level3 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 [&_a]:text-[hsl(var(--tooltip-link))] [&_a]:underline',
           $attrs.class ?? ''
         )
       "

package/dist/BuiTable.vue_vue_type_script_setup_true_lang-D8Tseif4.js

@@ -1,27 +0,0 @@
-import { defineComponent as a, openBlock as s, createBlock as n, unref as o, withCtx as l, createElementVNode as c, normalizeClass as m, renderSlot as i, createVNode as f } from "vue";
-import { _ as p } from "./BuiScrollArea.vue_vue_type_script_setup_true_lang-D-nqw_Ka.js";
-import { _ } from "./BuiScrollBar.vue_vue_type_script_setup_true_lang-DNZ_v7U0.js";
-import { g as d } from "./utils-CwP7Up6y.js";
-const B = /* @__PURE__ */ a({
-  __name: "BuiTable",
-  props: {
-    class: {}
-  },
-  setup(e) {
-    const r = e;
-    return (t, u) => (s(), n(o(p), { class: "w-full grow overflow-auto rounded border border-border/[0.16]" }, {
-      default: l(() => [
-        c("table", {
-          class: m(o(d)("w-full caption-top  text-sm", r.class))
-        }, [
-          i(t.$slots, "default")
-        ], 2),
-        f(o(_), { orientation: "horizontal" })
-      ]),
-      _: 3
-    }));
-  }
-});
-export {
-  B as _
-};