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

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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()" />