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

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

@@ -64,7 +64,8 @@ const columns: ColumnDef<Task>[] = [
         }),
         `${row.getValue('id')}`
       ]),
-    enableHiding: false
+    enableHiding: false,
+    meta: { title: 'ID', pinLeft: true }
   },
   {
     accessorKey: 'title',
@@ -200,6 +201,7 @@ function groupName(group: string | number) {
         :groupBy="groupBy === 'none' ? undefined : groupBy"
         :groupLabels="groupLabels"
         :renderSubComponent="renderSubComponent"
+        enable-column-list-control
       >
         <template #caption="{ table }">
           <div class="flex justify-between">

package/src/components/ui/select/BuiSelectTrigger.vue

@@ -17,7 +17,7 @@ const props = withDefaults(
     v-bind="props"
     :class="[
       cn(
-        'flex h-8 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:min-w-0 [&>span]:truncate',
+        'flex h-8 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:min-w-0 [&>span]:truncate',
         props.invalid && 'border-destructive-foreground',
         props.class
       )

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

@@ -64,6 +64,7 @@ const props = withDefaults(
     getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
     renderSubComponent?: (row: Row<TData>) => (() => any) | undefined
     freezeHeader?: boolean
+    enableColumnListControl?: boolean
     columnSearchPlaceholder?: string
     columnSearchNotFound?: string
   }>(),
@@ -230,7 +231,7 @@ watch(columnsListIds, () => {
     <slot name="caption" :table="table" />
   </div>
   <BuiTable>
-    <template #columnVisibility>
+    <template v-if="enableColumnListControl" #columnVisibility>
       <BuiPopover v-model:open="open">
         <BuiPopoverTrigger as-child>
           <div class="absolute right-0 top-0 z-10 h-10 bg-background">

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

@@ -25,7 +25,9 @@ useSortable(columnsListRef, columnsList, { handle: '.dragHandler' })
     >
       <BuiCheckbox :checked="col.getIsVisible()" />
       <div class="dragHandler grow">
-        {{ col.columnDef.meta?.title || col.id.replace(/([A-Z])/g, ' $1') }}
+        {{
+          col.columnDef.meta?.title || col.id.replace(/^values\./, '').replace(/([A-Z])/g, ' $1')
+        }}
       </div>
     </BuiCommandItem>
   </div>

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

@@ -15,10 +15,12 @@ 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()
-  return {
-    left: isPinned === 'left' ? '0' : undefined,
-    position: isPinned ? 'sticky' : 'relative',
-    zIndex: isPinned ? '1' : '0'
-  }
+  // FYI sticky columns not possible with transparent background colors
+  // const isPinned = column.getIsPinned()
+  // return {
+  //   left: isPinned === 'left' ? '0' : undefined,
+  //   position: isPinned ? 'sticky' : 'relative',
+  //   zIndex: isPinned ? '1' : '0'
+  // }
+  return { position: 'relative' }
 }