feat: added support for custom th className via meta.thClassName

Author: intaniger

examples/erp/genseki/collections/posts.client.tsx

@@ -109,6 +109,9 @@ export const columns = [
   columnHelper.accessor('author.name', {
     header: 'Author Name',
     cell: (info) => info.getValue(),
+    meta: {
+      thClassName: 'bg-orange-700',
+    },
   }),
   columnHelper.accessor('author.email', {
     header: 'Author Email',

packages/react/src/react/components/primitives/tanstack-table.tsx

@@ -98,7 +98,8 @@ export function TanstackTable<T>({
                   className={clsx(
                     'focus-visible:ring-focus ring-inset',
                     header.colSpan > 1 && 'border-bluegray-300 border-b',
-                    classNames?.tableHead
+                    classNames?.tableHead,
+                    header.column.columnDef.meta?.thClassName
                   )}
                   onClick={
                     canSort && children ? header.column.getToggleSortingHandler() : undefined

packages/react/tsconfig.json

@@ -8,6 +8,6 @@
     "types": ["node"],
     "noEmit": true
   },
-  "include": ["src", "v2"],
+  "include": ["src", "v2", "types/tanstack.d.ts"],
   "exclude": ["dist", "node_modules"]
 }

packages/react/types/tanstack.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import '@tanstack/react-table'
+
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData, TValue> {
+    thClassName?: string
+  }
+}