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

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 }),
        }),

<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>