table: Size property not working

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

I agree to follow this project’s Code of Conduct
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.

About this issue

Original URL
State: open
Created 9 months ago
Reactions: 10
Comments: 21 (6 by maintainers)

Most upvoted comments

@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

+28

sergor5 on Oct 26, 2023

Thanks, I thought it is an automatic property 👍

anduscheung on Dec 2, 2023

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

Sylar-A on Mar 16, 2024

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.

nerixim on Apr 1, 2024

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

rgorai-cc on Mar 28, 2024