feat(Table): add support for colspan and rowspan (#4460)

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

Author: Artles777

src/runtime/components/Table.vue

@@ -49,6 +49,13 @@ declare module '@tanstack/table-core' {
       th?: string | Record<string, string> | ((cell: Header<TData, TValue>) => string | Record<string, string>)
       td?: string | Record<string, string> | ((cell: Cell<TData, TValue>) => string | Record<string, string>)
     }
+    colspan?: {
+      td?: string | ((cell: Cell<TData, TValue>) => string)
+    }
+    rowspan?: {
+      td?: string | ((cell: Cell<TData, TValue>) => string)
+    }
+
   }
 
   interface TableMeta<TData> {
@@ -376,6 +383,14 @@ function onRowContextmenu(e: Event, row: TableRow<T>) {
   }
 }
 
+function resolveValue<T, A = undefined>(prop: T | ((arg: A) => T), arg?: A): T | undefined {
+  if (typeof prop === 'function') {
+    // @ts-expect-error: TS can't know if prop is a function here
+    return prop(arg)
+  }
+  return prop
+}
+
 watch(
   () => props.data, () => {
     data.value = props.data ? [...props.data] : []
@@ -405,10 +420,11 @@ defineExpose({
             :data-pinned="header.column.getIsPinned()"
             :scope="header.colSpan > 1 ? 'colgroup' : 'col'"
             :colspan="header.colSpan > 1 ? header.colSpan : undefined"
+            :rowspan="header.rowSpan > 1 ? header.rowSpan : undefined"
             :class="ui.th({
               class: [
                 props.ui?.th,
-                typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th
+                resolveValue(header.column.columnDef.meta?.class?.th, header)
               ],
               pinned: !!header.column.getIsPinned()
             })"
@@ -436,10 +452,10 @@ defineExpose({
               :class="ui.tr({
                 class: [
                   props.ui?.tr,
-                  typeof tableApi.options.meta?.class?.tr === 'function' ? tableApi.options.meta.class.tr(row) : tableApi.options.meta?.class?.tr
+                  resolveValue(tableApi.options.meta?.class?.tr, row)
                 ]
               })"
-              :style="typeof tableApi.options.meta?.style?.tr === 'function' ? tableApi.options.meta?.style?.tr(row) : tableApi.options.meta?.style?.tr"
+              :style="resolveValue(tableApi.options.meta?.style?.tr, row)"
               @click="onRowSelect($event, row)"
               @pointerenter="onRowHover($event, row)"
               @pointerleave="onRowHover($event, null)"
@@ -449,14 +465,16 @@ defineExpose({
                 v-for="cell in row.getVisibleCells()"
                 :key="cell.id"
                 :data-pinned="cell.column.getIsPinned()"
+                :colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
+                :rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
                 :class="ui.td({
                   class: [
                     props.ui?.td,
-                    typeof cell.column.columnDef.meta?.class?.td === 'function' ? cell.column.columnDef.meta.class.td(cell) : cell.column.columnDef.meta?.class?.td
+                    resolveValue(cell.column.columnDef.meta?.class?.td, cell)
                   ],
                   pinned: !!cell.column.getIsPinned()
                 })"
-                :style="typeof cell.column.columnDef.meta?.style?.td === 'function' ? cell.column.columnDef.meta.style.td(cell) : cell.column.columnDef.meta?.style?.td"
+                :style="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()" />
@@ -497,14 +515,15 @@ defineExpose({
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
             :colspan="header.colSpan > 1 ? header.colSpan : undefined"
+            :rowspan="header.rowSpan > 1 ? header.rowSpan : undefined"
             :class="ui.th({
               class: [
                 props.ui?.th,
-                typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th
+                resolveValue(header.column.columnDef.meta?.class?.th, header)
               ],
               pinned: !!header.column.getIsPinned()
             })"
-            :style="typeof header.column.columnDef.meta?.style?.th === 'function' ? header.column.columnDef.meta.style.th(header) : header.column.columnDef.meta?.style?.th"
+            :style="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()" />