T
TanStack•3y ago
rare-sapphire

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

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 }),
        }),
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>
<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>
No description
No description
6 Replies
rising-crimson
rising-crimson•3y ago
You couldn't do something like header: () => <span class='customClass'>Options</span>, ?
rare-sapphire
rare-sapphireOP•3y ago
No sorry - I already tried that. I want to minimize the column width so <span> wouldn't affect that. I have to be able to add a width w-1/12 to the <th> tag.
rising-crimson
rising-crimson•3y ago
I found this: https://github.com/TanStack/table/discussions/3192
GitHub
Fixed and auto-sized width columns · TanStack table · Discussion #3...
I would like to be able to mix fixed and auto-sized (depending of their content) width columns, like this : const columns = React.useMemo( () => [ { Header: "First Name", accessor: &qu...
rare-sapphire
rare-sapphireOP•3y ago
Thanks - but unfortunately that seems to be very React-specific and I couldn't find a way to do the same thing in Vue.
rising-crimson
rising-crimson•3y ago
Aw, didn't know you were using Vue, you didn't mention that in your question.
rare-sapphire
rare-sapphireOP•3y ago
Ah crap - you're right. Updated!

Did you find this page helpful?