Auto-size column width v8

[sikorjan]

I guess it is no longer possible to create auto-sizing columns based on the content of the cell?
So the column would have min width of the widest cell in the column.

I found this discussion but the "auto" value is no longer possible for sizing. We can set only numbers now.
#3192

[williamrobertson13]

I'd also like to be able to set a percentage-based width, which doesn't seem possible ☹️

[victorkvarghese]

same here

[StarHosea]

same +1

[williamrobertson13]

My temporary solution is to just bypass the ColumnSizing functionality and use the meta field to store the size of my table columns 🤷. I'm still using v8.12, so I can't use the declaration merging as described in https://tanstack.com/table/v8/docs/api/core/column-def#meta.

type ColumnMeta = {
  meta: {
    size: number | string;
  };
};

type AugmentedColumnDef = ColumnDef<MyData> & ColumnMeta;

const testColumn: AugmentedColumnDef =  {
  id: 'test',
  meta: {
    size: '18%',
  },
  ....
}

....

<Table.Cell width={(cell.column.columnDef as AugmentedColumnDef).meta.size} />

[AustinKostreba]

I've come up with a hack temporary fix that works by setting minimumWidth and width to 0 by default.

const table = useReactTable<T>({
    defaultColumn: {
      minSize: 0,
      size: 0,
    },
    getCoreRowModel: getCoreRowModel(),
    ...
  })

Then, in the definition for each header and cell, I apply the style only if the calculated width != 0:

// Header
<th
    key={header.id}
    colSpan={header.colSpan}
    style={{
        width: header.getSize() !== 0 ? header.getSize() : undefined,
    }}
>
...
// Cell
<td
  key={cell.id}
  style={{
    width:
      cell.column.getSize() !== 0
        ? cell.column.getSize()
        : undefined,
  }}
>
...

This will ensure that a style will only be applied if the column specifically defines it.

Remember that this doesn't actually change the result of getSize(), so anywhere you're calling this function would need to check this condition.

[rayy40]

Finally, after hours of struggling with it.

[maxtwardowski]

The temporary fix suggested above didn't work for my use case so I came up with the following solution:

1. Store refs to all non-head cells:

const cellRefs = React.useRef<HTMLDivElement[][]>([])

2. Populate the refs using the handler below:

const handleCellRefsSet = React.useCallback(
    (el: HTMLDivElement, row: number, cell: number) => {
        if (!cellRefs.current[row]) cellRefs.current[row] = new Array(originalColumns.length)
        cellRefs.current[row][cell] = el
    },
    [originalColumns.length]
)

3. Tune column widths (sizes) in the column definitions:

const columns = React.useMemo(() => 
    originalColumns.map((col, i) => ({
        ...col, 
        // Use `scrollWidth` to get the width of the element including its (maybe) hidden fragment.
        size: Math.max(...cellRefs.current.map((refs) => refs[i].scrollWidth), col.minSize!),
    }), 
[originalColumns])

[bouharb]

In which place I should use the handleCellRefsSet callback ?

[vasreb]

the easiest temorary solution is

columnHelper.accessor('name', {
      size: 'auto' as unknown as number,
      ...
}),

[andyyudev]

this is the best answer

[GabrielCanteiro]

This works very well unless you need to resize the column