Ability to set column width and className for <th> and <td> in shadcn-ui Data Table

[TheBassGuy]

Hi, I am unable to add classNames to and in shadcn-ui Data Table, I used the same method as used on Data Table - shadcn/ui but I am unable to set classNames in the above stated elements

[TheBassGuy]

I want to do something like this

export const columns: ColumnDef<Product>[] = [
    {
        accessorKey: "column1",
        header: "Column 1",
        headClassName : 'w-16 bg-yellow-400 hidden lg:block',
        cellClassName : 'font-bold'
    },
    {
        accessorKey: "column2",
        header: "Column 2",
        headClassName : 'w-32 bg-green-400 hidden lg:block',
        cellClassName : 'italic'
    },
]

[corysimmons]

I copied and pasted this snippet into VSCode:

Then I looked for className:

I think you should be able to target and tweak the header row (to include a className) in a similar fashion. Notice how Shadcn has rewritten the HTML of the header to include a checkbox here:

All this to say, you're going about this the wrong way. The columns array of objects doesn't have any headClassName or cellClassName and likely never will (since that array of objects is just a configuration for Tanstack Table).

But you can rewrite the markup completely and use things like getValue for all types of cells (headers and otherwise).

Hope this helps. If you make a CodeSandbox or something, I'll be happy to tweak it to work for you.

[TheBassGuy]

Hi, thanks for the reply, I tried using this, but this is editing the contents inside the or rather than the or , I wanted to edit the so that I can set the column widths and maybe hide some columns on smaller viewports...

Please lmk if I can do something for the same...

[corysimmons]

I think you're going to have to write custom markup. Instead of destructuring ({ table }), maybe just (a) then console.log(a) to see what is available.

Then use some media query plugin like react-responsive to change some state like visibleColumnIndexes: [number].

If you draw a picture of what you're trying to do and create a CodeSandbox with React + shadcn-ui installed and working, I'll try to tinker around and figure it out.

[TheBassGuy]

Hi, just found a workaround, added an array of classNames as a prop in data-table.tsx, and took the column index from the map in data-table.tsx, now I just pass the classNames like ["w-32", "w-48", "", "w-12", "w-32", "w-16"], works fine for me, thanks for the help

This discussion can be hence closed now

Thanks everyone for making such a beautiful library :D