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} />

[Rehmankk360]

@williamrobertson13 Refer to this comment #4179 (comment)

[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.

[Rehmankk360]

@AustinKostreba Refer to this comment #4179 (comment)

[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 ?

[Rehmankk360]

@maxtwardowski Refer to this comment #4179 (comment)

[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>
            ),
        };
      }
    });
}

[Rehmankk360]

@vasreb Refer to this comment #4179 (comment)

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

[Rehmankk360]

@iFonny Refer to this comment #4179 (comment)

[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

[Rehmankk360]

@AkshayVemul Refer to this comment #4179 (comment)

[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.

[Rehmankk360]

@ThibaultJanBeyer Refer to this comment #4179 (comment)

[ejabu]

I think I found good official example here

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

[Rehmankk360]

@ejabu Refer to this comment #4179 (comment)

[Rehmankk360]

I implemented a solution where we have an option to set Initial column width in percentage + auto-sizing (flex-grow) + it can be resized without any problems. Here is a Live Codesandbox Example

Custom column width calculation function:

How to use:

1- Add this function in your codebase:

• This function calculates and distributes table column widths based on defined metadata and constraints. It ensures that:
• Columns with isGrow enabled proportionally share the remaining space.
• Percentage-based (widthPercentage) or fixed sizes are respected.
• Sizes adhere to minSize and maxSize limits.
• The result is a mapping of column IDs to their calculated sizes, making it easy to manage responsive table layouts.

function getSize(size = 100, max = Number.MAX_SAFE_INTEGER, min = 40) {
    return Math.max(Math.min(size, max), min);
}

/**
 * Calculates the sizing of table columns and distributes available width proportionally.
 * This function acts as an extension for TanStack Table, ensuring proper column sizing
 * based on provided metadata, including `isGrow`, `widthPercentage`, and size constraints.
 *
 * @template DataType - The generic type of data used in the table rows.
 *
 * @param {Header<DataType, unknown>[]} columns - An array of column headers. Each header contains
 *   metadata about the column, including size, constraints, and growth behavior.
 * @param {number} totalWidth - The total width available for the table, including padding and margins.
 *
 * @returns {Record<string, number>} An object mapping column IDs to their calculated sizes.
 */
export const calculateTableSizing = <DataType>(
    columns: Header<DataType, unknown>[],
    totalWidth: number
): Record<string, number> => {
    let totalAvailableWidth = totalWidth;
    let totalIsGrow = 0;

    columns.forEach((header) => {
        const column = header.column.columnDef;
        if (!column.size) {
            if (!column.meta?.isGrow) {
                let calculatedSize = 100;
                if (column?.meta?.widthPercentage) {
                    calculatedSize = column.meta.widthPercentage * totalWidth * 0.01;
                } else {
                    calculatedSize = totalWidth / columns.length;
                }

                const size = getSize(calculatedSize, column.maxSize, column.minSize);

                column.size = size;
            }
        }

        if (column.meta?.isGrow) totalIsGrow += 1;
        else totalAvailableWidth -= getSize(column.size, column.maxSize, column.minSize);
    });

    const sizing: Record<string, number> = {};

    columns.forEach((header) => {
        const column = header.column.columnDef;
        if (column.meta?.isGrow) {
            let calculatedSize = 100;
            calculatedSize = Math.floor(totalAvailableWidth / totalIsGrow);
            const size = getSize(calculatedSize, column.maxSize, column.minSize);
            column.size = size;
        }

        sizing[`${column.id}`] = Number(column.size);
    });

    return sizing;
};

2- Defining our columns:

We have 2 custom column properties added isGrow and widthPercentage in ColumnDef.meta object.

  {
    header: "Name",
    accessorKey: "name",
    footer: (props) => props.column.id,
    cell: (info) => info.getValue(),
    meta: {
      widthPercentage: 30,
    },
  },
  {
    header: "Info",
    accessorKey: "info",
    footer: (props) => props.column.id,
    cell: (info) => info.getValue(),
    meta: {
      isGrow: true,
    },
  },

3- Setting it in tanstack-table's columnSizing state

  const headers = table.getFlatHeaders();
useLayoutEffect(() => {
  if (tableContainerRef.current) {
    const initialColumnSizing = calculateTableSizing(
      headers,
      tableContainerRef.current?.clientWidth
    );
    table.setColumnSizing(initialColumnSizing);
  }

  // Use Dependencies to trigger a reset in column widths
}, [headers, windowDimensions.width]);

4- Add Typescript types in your global.d.ts

import "@tanstack/react-table";

declare module "@tanstack/react-table" {
interface ColumnMeta {
  isGrow?: boolean;
  widthPercentage?: number;
}
}

Output Example: