Auto-size column width v8 #4179

sikorjan · 2022-07-19T12:25:23Z

sikorjan
Jul 19, 2022

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 · 2022-08-04T21:08:32Z

williamrobertson13
Aug 4, 2022

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

3 replies

victorkvarghese Aug 5, 2022

same here

StarHosea Aug 5, 2022

same +1

williamrobertson13 Aug 5, 2022

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 · 2022-09-13T03:25:46Z

AustinKostreba
Sep 13, 2022

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.

1 reply

rayy40 Apr 2, 2024

Finally, after hours of struggling with it.

maxtwardowski · 2023-08-07T09:02:54Z

maxtwardowski
Aug 7, 2023

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

Store refs to all non-head cells:

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

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]
)

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])

1 reply

bouharb Sep 27, 2023

In which place I should use the handleCellRefsSet callback ?

vasreb · 2023-09-29T09:15:01Z

vasreb
Sep 29, 2023

the easiest temorary solution is

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

3 replies

andyyudev Nov 4, 2023

this is the best answer

GabrielCanteiro Apr 21, 2024

This works very well unless you need to resize the column

devmoatassem Jul 10, 2024

@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 · 2024-08-28T13:49:00Z

iFonny
Aug 28, 2024

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,
       ...
 }),

0 replies

AkshayVemul · 2024-09-15T12:20:21Z

AkshayVemul
Sep 15, 2024

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

0 replies

ThibaultJanBeyer · 2024-09-16T14:31:13Z

ThibaultJanBeyer
Sep 16, 2024

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.

0 replies

ejabu · 2024-12-22T17:45:30Z

ejabu
Dec 22, 2024

I think I found good official example here

https://tanstack.com/table/v8/docs/framework/react/examples/full-width-resizable-table

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Auto-size column width v8 #4179

{{title}}

Replies: 8 comments 8 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Auto-size column width v8 #4179

Replies: 8 comments · 8 replies

Replies: 8 comments 8 replies