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

[DiegoxK]

I found that you can actually pass any property you want to the columns definitions

If you put a custom atribute like headClassName: "w-[80px]", it gets passed to the header.column.columnDef object when you map through the headerGroup.headers:

Then you can put that headClassName inside the <TableHead> ClassName.

The only problem was extending the type definitions for ColumnDef to tell typescript that my custom headClassName was a valid property.

Here is a workaround I glued with help of AI, though I don't think this is the cleanest way to do it:

definitions.ts

import type { ColumnDef } from "@tanstack/react-table";

export type CustomColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {
  headClassName?: string;
};

columns.tsx

import type { CustomColumnDef } from "@/lib/definitions";

export const columns: CustomColumnDef<Todo, unknown>[] = [
  {
    id: "actions",
    headClassName: "w-[80px]",
    header: "Actions",
  },
];

data-table.tsx

import type { CustomColumnDef } from "@/lib/definitions";

interface DataTableProps<TData, TValue> {
  columns: CustomColumnDef<TData, TValue>[];
  data: TData[];
}

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  ....

  return (
       ...
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  const headClassName = (
                    header.column.columnDef as CustomColumnDef<unknown, unknown>
                  ).headClassName;
                  return (
                    <TableHead className={headClassName} key={header.id}>
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext(),
                          )}
                    </TableHead>
                  );
                })}
              </TableRow>
            ))}
          </TableHeader>
       ...
  );
}

It manages to prevent typescript from complaining but I'm not certain if the ColumnDef type can be modified in a way that allows you to easily pass custom props

[DiegoxK]

Update: You can use the meta property to add any custom property you want
https://stackoverflow.com/a/77866912