How to add a custom class to a specific column header <th> tag?

[richcoleman-alphatrust]

I'm using Vue 3.

I'm trying to add a class prop to a specific column header.

columnHelper.accessor((row) => row.id, {
            id: 'id',
            header: () => 'Options',  //<---I was to pass the prop to the header here
            cell: (props) => h(DataTableOptions, { id: props.row.original.id }),
        }),

I'm trying to make the Options column fit the contents of column (see the images for the difference I'm looking for).

I could easily just add the class directly in the HTML but I would like to pass it in as a prop for that one column since I don't want that class in all the other columns.

<thead class="bg-gray-50">
    <tr v-for="headerGroup in props.table.getHeaderGroups()" :key="headerGroup.id">
        <th
            v-for="header in headerGroup.headers"
            :key="header.id"
            :colspan="header.colSpan"
            @click="header.column.getToggleSortingHandler()?.($event)"
            class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 hover:cursor-pointer">
            <template v-if="!header.isPlaceholder">
                <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
                {{ { asc: ' ↑', desc: ' ↓' }[header.column.getIsSorted() as string] }}
            </template>
        </th>
    </tr>
</thead>

Currently the column width is just automatically determined.

I'd like it to fit to the contents like this:

[talatkuyuk]

You can add a property for the class name into column meta.

declare module "@tanstack/table-core" {
  interface ColumnMeta<TData extends RowData, TValue> {
    className?: string;
  }
}

Then, you can define a className for the column that you want:

columnHelper.accessor("options", {
  cell: // your implementation,
  header: // your implementation,
  footer: // your implementation,
  meta: {
    className: "classname-for-the-options-column",
  },
}),

Then, you can get it through the column.columnDef.meta?.className.

// I do not know vue, it is for react, but you can got the idea.
<th className={column.columnDef.meta?.className ?? ""}> // also for <td>

Hope it is useful.

[richcoleman-alphatrust]

That was it!! Thank you so much!!

[marioteik]

This is so clean. Thanks!