fix(Table): properly position pinned columns based on size

Resolves #4721, resolves #3927

Author: benjamincanac

docs/app/components/content/examples/table/TableColumnPinningExample.vue

@@ -15,31 +15,31 @@ type Payment = {
 }
 
 const data = ref<Payment[]>([{
-  id: '46000000000000000000000000000000000000000',
+  id: '4600000000000000000000000000000000000000',
   date: '2024-03-11T15:30:00',
   status: 'paid',
   email: '[email protected]',
   amount: 594000
 }, {
-  id: '45990000000000000000000000000000000000000',
+  id: '4599000000000000000000000000000000000000',
   date: '2024-03-11T10:10:00',
   status: 'failed',
   email: '[email protected]',
   amount: 276000
 }, {
-  id: '45980000000000000000000000000000000000000',
+  id: '4598000000000000000000000000000000000000',
   date: '2024-03-11T08:50:00',
   status: 'refunded',
   email: '[email protected]',
   amount: 315000
 }, {
-  id: '45970000000000000000000000000000000000000',
+  id: '4597000000000000000000000000000000000000',
   date: '2024-03-10T19:45:00',
   status: 'paid',
   email: '[email protected]',
   amount: 5290000
 }, {
-  id: '45960000000000000000000000000000000000000',
+  id: '4596000000000000000000000000000000000000',
   date: '2024-03-10T15:55:00',
   status: 'paid',
   email: '[email protected]',
@@ -49,10 +49,12 @@ const data = ref<Payment[]>([{
 const columns: TableColumn<Payment>[] = [{
   accessorKey: 'id',
   header: ({ column }) => getHeader(column, 'ID', 'left'),
-  cell: ({ row }) => `#${row.getValue('id')}`
+  cell: ({ row }) => `#${row.getValue('id')}`,
+  size: 381
 }, {
   accessorKey: 'date',
-  header: ({ column }) => getHeader(column, 'Date', 'left')
+  header: ({ column }) => getHeader(column, 'Date', 'left'),
+  size: 172
 }, {
   accessorKey: 'status',
   header: ({ column }) => getHeader(column, 'Status', 'left'),
@@ -64,10 +66,12 @@ const columns: TableColumn<Payment>[] = [{
     })[row.getValue('status') as string]
 
     return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
-  }
+  },
+  size: 103
 }, {
   accessorKey: 'email',
-  header: ({ column }) => getHeader(column, 'Email', 'left')
+  header: ({ column }) => getHeader(column, 'Email', 'left'),
+  size: 232
 }, {
   accessorKey: 'amount',
   header: ({ column }) => h('div', { class: 'text-right' }, getHeader(column, 'Amount', 'right')),
@@ -80,7 +84,8 @@ const columns: TableColumn<Payment>[] = [{
     }).format(amount)
 
     return h('div', { class: 'text-right font-medium' }, formatted)
-  }
+  },
+  size: 130
 }]
 
 function getHeader(column: Column<Payment>, label: string, position: 'left' | 'right') {
@@ -99,7 +104,7 @@ function getHeader(column: Column<Payment>, label: string, position: 'left' | 'r
 }
 
 const columnPinning = ref({
-  left: [],
+  left: ['id'],
   right: ['amount']
 })
 </script>

docs/content/docs/2.components/table.md

@@ -450,13 +450,14 @@ In this example, we use a function to define the column header but you can also
 You can update a column `header` to render a [Button](/docs/components/button) component inside the `header` to toggle the pinning state using the TanStack Table [Pinning APIs](https://tanstack.com/table/latest/docs/api/features/row-pinning).
 
 ::note
-A pinned column will become sticky on the left or right side of the table.
+A pinned column will become sticky on the left or right side of the table. When using column pinning, you should define explicit `size` values for your columns to ensure proper column width handling, especially with multiple pinned columns.
 ::
 
 ::component-example
 ---
 prettier: true
 collapse: true
+overflowHidden: true
 name: 'table-column-pinning-example'
 highlights:
   - 100

src/runtime/components/Table.vue

@@ -2,7 +2,7 @@
 <script lang="ts">
 import type { Ref, WatchOptions, ComponentPublicInstance } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
-import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core'
+import type { Cell, Column, Header, RowData, TableMeta } from '@tanstack/table-core'
 import type {
   CellContext,
   ColumnDef,
@@ -486,6 +486,19 @@ function resolveValue<T, A = undefined>(prop: T | ((arg: A) => T), arg?: A): T |
   return prop
 }
 
+function getColumnStyles(column: Column<T>): Record<string, string> {
+  const styles: Record<string, string> = {}
+
+  const pinned = column.getIsPinned()
+  if (pinned === 'left') {
+    styles.left = `${column.getStart('left')}px`
+  } else if (pinned === 'right') {
+    styles.right = `${column.getAfter('right')}px`
+  }
+
+  return styles
+}
+
 watch(() => props.data, () => {
   data.value = props.data ? [...props.data] : []
 }, props.watchOptions)
@@ -534,7 +547,10 @@ defineExpose({
           ],
           pinned: !!cell.column.getIsPinned()
         })"
-        :style="resolveValue(cell.column.columnDef.meta?.style?.td, cell)"
+        :style="[
+          getColumnStyles(cell.column),
+          resolveValue(cell.column.columnDef.meta?.style?.td, cell)
+        ]"
       >
         <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
           <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
@@ -574,7 +590,10 @@ defineExpose({
               ],
               pinned: !!header.column.getIsPinned()
             })"
-            :style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
+            :style="[
+              getColumnStyles(header.column),
+              resolveValue(header.column.columnDef.meta?.style?.th, header)
+            ]"
           >
             <slot :name="`${header.id}-header`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
@@ -648,7 +667,10 @@ defineExpose({
               ],
               pinned: !!header.column.getIsPinned()
             })"
-            :style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
+            :style="[
+              getColumnStyles(header.column),
+              resolveValue(header.column.columnDef.meta?.style?.th, header)
+            ]"
           >
             <slot :name="`${header.id}-footer`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.footer" :props="header.getContext()" />

src/theme/table.ts

@@ -24,8 +24,8 @@ export default (options: Required<ModuleOptions>) => ({
     },
     pinned: {
       true: {
-        th: 'sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0',
-        td: 'sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0'
+        th: 'sticky bg-default/75 z-1',
+        td: 'sticky bg-default/75 z-1'
       }
     },
     sticky: {