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

[devmoatassem]

@vasreb Hi can you help me utilize your solution to my following column

"use client";
import React from "react";
import { ColumnDef } from "@tanstack/react-table";
import { DataTableColumnHeader } from "./data-table-column-header";
import Link from "next/link";

// Define the type for the input data
export interface ColumnData {
  sort: boolean;
  label: string;
  value: string;
  filter: boolean;
  enum?: { value: string; label: string }[];
}

// Function to generate columns
export function generateColumns<T>(data: ColumnData[]): ColumnDef<T, any>[] {
  const customColumn: ColumnData = {
    value: "id",
    label: "Sr No",
    sort: true,
    filter: false,
  };

  // Prepend the custom column to the data array
  const extendedData = [customColumn, ...data];
  return extendedData
    .filter((item) => item.value !== "href") // Exclude items with value "href"
    .map((item, index) => {
      if (item.value === "id") {
        return {
          accessorKey: "id",
          cell: ({ row }: { row: any }) => row.index + 1, // Show index values starting from 1
          header: ({ column }: { column: any }) => (
            <span className="whitespace-nowrap">{item.label}</span>
          ),
        };
      } else if (item.value === "title") {
        return {
          accessorKey: item.value as keyof T,
          header: ({ column }: { column: any }) =>
            item.sort ? (
              <DataTableColumnHeader column={column} title={item.label} />
            ) : (
              <span className="whitespace-nowrap capitalize">{item.label}</span>
            ),
          filterFn: (row, id, value) => {
            return value.includes(row.getValue(id));
          },
          cell: ({ row }: { row: any }) => {
            return row?.original?.href ? (
              <Link
                href={row.original.href}
                className="hover:text-brandPrimary hover:underline"
              >
                {row.original.title}
              </Link>
            ) : (
              <span>{row.original.title}</span>
            );
          },
        };
      } else if (item.filter === true) {
        return {
          accessorKey: item.value as keyof T,
          header: ({ column }: { column: any }) =>
            item.sort ? (
              <DataTableColumnHeader column={column} title={item.label} />
            ) : (
              <span className="whitespace-nowrap capitalize">{item.label}</span>
            ),
          filterFn: (row, id, value) => {
            return value.includes(row.getValue(id));
          },
        };
      } else {
        return {
          accessorKey: item.value as keyof T,
          header: ({ column }: { column: any }) =>
            item.sort ? (
              <DataTableColumnHeader column={column} title={item.label} />
            ) : (
              <span className="whitespace-nowrap capitalize">{item.label}</span>
            ),
        };
      }
    });
}

[iFonny]

the easiest temorary solution is

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

Like @sikorjan answer, we can also do this to avoid as cast

 columnHelper.accessor('name', {
       size: NaN,
       ...
 }),

[AkshayVemul]

Currently we are migrating to V8, this is the solution which we came up with for auto size and resize, work pretty fine for us.
we use chakra-ui, but this can be implemented without it as well, the idea here is that the header / cell will take the width provide in columnDef as they have the flex grow property they will occupy the available width.

Note: wrap the whole thing with a grid, if you need horizontal scrolls for columns which overflow, also have a maxSize property on defaultColumn e.g. useReactTable({ defaultColumn: { maxSize: 500 } })

          {row.getVisibleCells().map((cell) => (
            <Flex
              role="cell"
              key={cell.id}
              minH={9}
              alignItems={'center'}
              px={4}
              flex={`${cell.column.getSize()} 0 auto`}
              w={`${cell.column.getSize()}px`}
              minW={`${cell.column.columnDef.minSize}px`}
            >
              <Text
                as="span"
                fontSize="sm"
                color={'white'}
                textOverflow={'ellipsis'}
                overflow={'hidden'}
                whiteSpace={'nowrap'}
              >
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </Text>
            </Flex>
          ))}
        </Flex>
      ))}

P.S. the above example is only for cell, the same can be done for header

[ThibaultJanBeyer]

Being able to use percentages or auto even with resizing would be a sweet addition. The proposed "hacks" here all don't work when you use resizing or when you allow the widths to be 0 by having an overflow-ellipsis.