Table custom column size adjustments

[chris-si]

Description

Hi,

I'm just trying migrate to the v3 table component but I'm kind of stuck while trying to apply the correct column widths to the columns which before (in v2) was possible via simple tailwind classes per column.
For example a table has an action button in the last column, so the column should only have the width of the icon of the button so that other columns have more space but the column width is automatically about four times the button's size by default instead.

The TanStack Table Docs state that individual column sizes must be applied manually which also seems right looking at the table component code if I didn't miss anything in that regard.

From my understanding the custom width styling must be applied to the th/td elements since every styling attempt inside the slots to make a column smaller (e.g. only 32px) did not work and only affected the content inside the header/cell slots.

Is there any way at the moment to set a custom width for specific columns with the current implementation of the table component?

[chris-si]

Maybe this one is solved by #3866. I'll test it in the coming days.

[jawa-the-hutt]

fwiw, the only way I could get the classes via the meta property to work for columns with a lengthy string was to globally remove the whitespace-nowrap and exchange it for whitespace-normal from the table td slot via the vite.config.

With whitespace-nowrap the classes would apply, but they wouldn't actually set the width of the column as I'm guessing the whitespace-nowrap and the overall length of the data I'm dealing with in the column was such that it would extend out automatically to the right past the width of the screen.

my guess is if you have a column with an very long string that means the text surpasses the overall width of the screen, it will basically show the entire string and you'll have to scroll as far right as the string goes to get to the end of the column/table.

what I did in vite.config:

table: {
  slots: {
    td: 'p-4 text-sm text-muted whitespace-normal [&:has([role=checkbox])]:pe-0'
  }
}

edit: went ahead and created an issue for anyone else to follow who comes here: #3988