Size property not working

[anduscheung]

Describe the bug

I am using v8 and unable to change the width of the column of the most simple example according to the document.

https://tanstack.com/table/v8/docs/examples/react/basic

For this example, I opened the sandbox and changed the size of the first column to 500, as below:

columnHelper.accessor('firstName', {
  cell: info => info.getValue(),
  footer: info => info.column.id,
  size: 500,
  minSize: 500
}),

However the width of the first column remain unchanged

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/strange-pine-wtqhtg?embed=1&file=%2Fsrc%2Fmain.tsx%3A62%2C15

Steps to reproduce

Add size property to the first column of basic example one

Expected behavior

Size property should be respected

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Chrome

react-table version

8.10.3

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[aoloo]

Seeing this as well

[sergor5]

@anduscheung , @aoloo

You're probably missing the part where you set the width by yourself in the styles prop:

<td
  style={{
    width: cell.column.getSize(),
  }}
>
    ...
</td>

It's shown here: Tanstack Column Sizing

[anduscheung]

Thanks, I thought it is an automatic property 👍

[dawalberto]

Someone know a workaround? still doesn't works

[KevinVandy]

Someone know a workaround? still doesn't works

Why do you need "a workaround"? You probably have just not hooked up the column size APIs to your CSS properly. Follow the official examples and you should be fine.

[dawalberto]

@KevinVandy this is my column helper:

...
columnHelper.accessor('ref', {
	id: 'ref',
	cell: (info) => <span className='whitespace-nowrap'>{info.renderValue()}</span>,
	size: 300,
	header: 'ID',
	footer: (info) => info.column.id,
}),
...

And this my table:

...
<td
	key={cell.id}
	style={{ width: cell.column.getSize() }}
...

Am I missing something?

[KevinVandy]

Just also apply the width in th header elements

[dawalberto]

@KevinVandy I already did but still not working 🤷‍♂️

...
<tr key={headerGroup.id}>
	{headerGroup.headers.map((header) => (
		<th
			key={header.id}
			colSpan={header.colSpan}
			style={{ position: 'relative', width: header.getSize() }}
		>
...

[KevinVandy]

Ok. Share a full sandbox showing it not working and we can go from there.

[birddigital]

@KevinVandy @dawalberto any fix to this?

[KevinVandy]

Someone share a sandbox showing it not working. As far as we can tell, everything in TanStack Table is working perfectly fine in regards to column sizing being applied correctly per column. Make sure you are always using pixel units.

[birddigital]

I'm using shadcn-ui v0.8.0 and in the TableHeader components I used header.column.columnDef.meta?.width

<TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <TableHead key={header.id} style={{ width: header.column.columnDef.meta?.width }}>
                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                    </TableHead>
                  );
                })}
              </TableRow>
            ))}
          </TableHeader>
<TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <TableHead key={header.id} style={{ width: header.column.columnDef.meta?.width }}>
                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                    </TableHead>
                  );
                })}
              </TableRow>
            ))}
          </TableHeader>

Then in my column definition i used the metadata object with the width value. Not sure if this is proper but it worked.

{
    accessorKey: 'isResold',
    meta: {
      width: 72,
    },
    header: () => {
      return <div className="flex justify-center">Resold</div>;
    },
    cell: ({ row }) => {
      switch (row.original.isResold) {
        case true:
          return (
            <div className="flex justify-center items-center ">
              <CheckCircledIcon className="w-4 h-4 text-green-500" />
            </div>
          );
        case false:
          return (
            <div className="flex justify-center items-center ">
              <CrossCircledIcon className="w-4 h-4 text-slate-500" />
            </div>
          );
      }
    },
  }, 

Hopefully this helps.

I imagine this same approach would make the size, minSize, and maxSize work as well.

[KevinVandy]

Why would you use meta instead of the official size APIs?

[mdaffan01]

Is there an auto-fit column property? Don't want to limit Table columns to a particular width, want to expand columns based on content. I tried size: 'auto' against all columns, doesn't work. Tried some CSS workarounds(whitespace, etc), works but I lose the resize functionality Thanks in advance.

[mdaffan01]

@KevinVandy

[KevinVandy]

Is there an auto-fit column property? Don't want to limit Table columns to a particular width, want to expand columns based on content. I tried size: 'auto' against all columns, doesn't work. Tried some CSS workarounds(whitespace, etc), works but I lose the resize functionality Thanks in advance.

Just don't apply a width at all in your styles if you want auto fit (assuming semantic table elements). The size property is for specifying an exact size.

[Oize]

For example, here size doesn't do anything.

[songexile]

I am using shadcn with Tanstack table and solved my issue by adding a defaultColumn prop to give columns a size.

I also needed to change the CSS in TableHead to use width : header.getSize()

Hope it helps someone if they are using shadcn with TanStack table. :)

[Sylar-A]

I'm using tanstack table in shadcn/ui. Columns sizing didn't work until i add 1.

 <table // <Table/> component in shadcn
    {...{
      style: {
        width: table.getCenterTotalSize()
      }
    }}
  >

<td // <TableCell/> component in shadcn
  style={{
    width: cell.column.getSize()
  }}
>

size: 100, // in ColumnDef

[rgorai-cc]

I'm using tanstack table in shadcn/ui. Columns sizing didn't work until i add 1.

 <table // <Table/> component in shadcn
    {...{
      style: {
        width: table.getCenterTotalSize()
      }
    }}
  >

This was the missing piece! Somehow the table was overriding the cell widths but this fixed it

[nerixim]

I'm using tanstack table in shadcn/ui. Columns sizing didn't work until i add 1.

 <table // <Table/> component in shadcn
    {...{
      style: {
        width: table.getCenterTotalSize()
      }
    }}
  >

<td // <TableCell/> component in shadcn
  style={{
    width: cell.column.getSize()
  }}
>

size: 100, // in ColumnDef

Worked for Chakra UI too.

[MDziurakh]

columnHelper.accessor('firstName', {
  cell: info => info.getValue(),
  footer: info => info.column.id,
  size: 500,
  maxSize: 700, // how about this line?
}), 

every answer here is working with size, but not with maxSize. Have someone any workaround with this?

[KevinVandy]

The issues that most seem to run into here is that many people assume that TanStack Table will hook up the width CSS for you. It doesn't! You need to set the styles on your <table>, <th>, and/or <th> elements. The ShadCn components don't do this out of the box.

[Raphaww]

What if I just want to add width to one column?

[
   {
      ...
      accessorKey: 'id',
      width: 75,
   },
   {
      ...
      accessorKey: 'color',
   },
   ...
]

the getSize function returns the default (150) in every other column

<th style=`75px`>...</th>
<th style=`150px`>...</th>

and I want them to remain unset

[MDziurakh]

@Raphaww, how about this implementation?

width: header.getSize() !== 150 ? header.getSize() : undefined

[Raphaww]

Thanks, but what if in other scenario I need to set a 150px size to a column, then it would be ignored.

I believe there should be a different attribute like defaultWidth or something, then I could decide if use it or not. For now I ended up doing something similar to your response but defining default width to a size equals to de minSize +1

const minSize = 50
useReactTable({ ..., defaultColumn: {
   size: minSize + 1,
   minSize,
}})

<th
{...(header.getSize() !== (minSize + 1) && { style: { width: `${header.getSize()}px` } })}
/>

That way, if someone sets a size of 51 it will be ignored but the default being 50 then there should be not much of a difference. I know it is a poor implementation but can't find another way