Data Table ignoring column size

[cehenriques]

Hi.

I want to set a fixed width on one of my Data Table columns, so I checked TanStack Table docs and found they have size property for the ColumnDef: https://tanstack.com/table/v8/docs/guide/column-sizing

But I tried using it and it does nothing on shadcn Data Table. It seems the size properties are not being used on shadcn Data Table:

<TableCell key={cell.id}>
  {flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>

if I pass the size to the width property of the cell it works:

<TableCell key={cell.id} width={cell.column.columnDef.size}>
  {flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>

[kevinmitch14]

I think you need to hook this up yourself.

https://tanstack.com/table/v8/docs/guide/column-sizing#column-size-apis

How you apply these size styles to your markup is up to you, but it is pretty common to use either CSS variables or inline styles to apply the column sizes.

<th
  key={header.id}
  colSpan={header.colSpan}
  style={{ width: `${header.getSize()}px` }}
>

[mshahzebraza]

this solution works for user-defined width but the issue is it will always convert the width into px values. The default column width is 150. which is ok because it renders a relative width between all columns. but with the above code the relative width converts to fixed width of 150px for all columns. even the ones where only icons are present.

One solution could be to not apply the width style if the width === default-width (150 in our case).

But this means a user will never get 150px width...

[xspaceboy]

Hi. I tried to resolve this too, but still getting wrong column width in first column of table. Hope "shadcn/ui" will provide a solution for this issue.

[nuclei272]

I've been experimenting and now this is working for me, using tailwind classes on the header aswell as the cell if you think it could exceed the header's width.

{ accessorKey: "title", header: () => ( <div className="text-right w-10">Title</div> ), cell: ({ row }) => ( <div className="flex gap-2 items-center"> <span className="truncate w-10 font-medium"> {row.getValue("title")} </span> </div> ) },

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[fport]

Has anyone found a trick? I'm having trouble customizing the column sizes.

[devnjw]

@fport Try this.

const modelColumns: ColumnDef<Model>[] = [
  {
    accessorKey: 'model.name',
    header: 'Name',
    size: 100,
  },
  {
    accessorKey: 'model.description',
    header: 'Description',
    size: 400,
  },
]

<TableHead
  ...
  style={{
    minWidth: header.column.columnDef.size,
    maxWidth: header.column.columnDef.size,
  }}
>

<TableCell
  ...
  style={{
    minWidth: cell.column.columnDef.size,
    maxWidth: cell.column.columnDef.size,
  }}
>

[cupid20103]

Hi.

I want to set a fixed width on one of my Data Table columns, so I checked TanStack Table docs and found they have size property for the ColumnDef: https://tanstack.com/table/v8/docs/guide/column-sizing

But I tried using it and it does nothing on shadcn Data Table. It seems the size properties are not being used on shadcn Data Table:

<TableCell key={cell.id}>
  {flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>

if I pass the size to the width property of the cell it works:

<TableCell key={cell.id} width={cell.column.columnDef.size}>
  {flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>

Great! but I have a question. How to handle table header width?

[Kamil-Drozdz]

hi guys, im not sure i get correct answer for that, but for me work use block class to apply styles in cell

[mxkaske]

After some research, I found a nice workaround using ColumnMeta that perfectly works with shadcn data-table.

// react-table.d.ts
import "@tanstack/react-table";

declare module "@tanstack/react-table" {
  interface ColumnMeta {
    headerClassName?: string;
    cellClassName?: string;
  }
}

See full snippet: https://gist.github.com/mxkaske/4f87a26bbba3486d2f2c0c83f60163eb