feat(Table): handle meta.class on th and td (#2790)

Co-authored-by: Benjamin Canac <[email protected]>

playground/app/pages/components/table.vue

@@ -164,6 +164,12 @@ const columns: TableColumn<Payment>[] = [{
 }, {
   accessorKey: 'date',
   header: 'Date',
+  meta: {
+    class: {
+      td: 'text-center font-semibold',
+      th: 'text-right text-green-500 w-48'
+    }
+  },
   cell: ({ row }) => {
     return new Date(row.getValue('date')).toLocaleString('en-US', {
       day: 'numeric',
@@ -318,6 +324,9 @@ onMounted(() => {
       :column-pinning="columnPinning"
       :loading="loading"
       sticky
+      :ui="{
+        tr: 'divide-x divide-[var(--ui-border)]'
+      }"
       class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1"
     >
       <template #expanded="{ row }">

src/runtime/components/Table.vue

@@ -3,6 +3,7 @@
 import type { Ref } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
+import type { RowData } from '@tanstack/table-core'
 import type {
   Row,
   ColumnDef,
@@ -26,6 +27,16 @@ import type {
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
 
+declare module '@tanstack/table-core' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    class?: {
+      th?: string
+      td?: string
+    }
+  }
+}
+
 const appConfig = _appConfig as AppConfig & { ui: { table: Partial<typeof theme> } }
 
 const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
@@ -206,7 +217,7 @@ defineExpose({
             v-for="header in headerGroup.headers"
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
-            :class="ui.th({ class: [props.ui?.th], pinned: !!header.column.getIsPinned() })"
+            :class="ui.th({ class: [props.ui?.th, header.column.columnDef.meta?.class?.th], pinned: !!header.column.getIsPinned() })"
           >
             <slot :name="`${header.id}-header`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
@@ -223,7 +234,7 @@ defineExpose({
                 v-for="cell in row.getVisibleCells()"
                 :key="cell.id"
                 :data-pinned="cell.column.getIsPinned()"
-                :class="ui.td({ class: [props.ui?.td], pinned: !!cell.column.getIsPinned() })"
+                :class="ui.td({ class: [props.ui?.td, cell.column.columnDef.meta?.class?.td], pinned: !!cell.column.getIsPinned() })"
               >
                 <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
                   <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />