Fixed and auto-sized width columns

[TomPast]

I would like to be able to mix fixed and auto-sized (depending of their content) width columns, like this :

const columns = React.useMemo(
    () => [
      {
        Header: "First Name",
        accessor: "firstname",
        width: 300, //Fixed width
      },
      {
        Header: "Last Name",
        accessor: "lastname",
       //No width defined, would like it to be auto
      },
      {
        Header: "Age",
        accessor: "age",
        width: 300, //Fixed width
      },
      {
        Header: "Option",
        accessor: "select",
       //No width defined, would like it to be auto
      },
    ],
  )

The problem is that for the columns where i didn't set the width value, the default value is 150 (I would like to set it as auto). So in my table rendering, I have to look for width !== 150 before setting width, which seems weird. Thanks for your help!

[TomPast]

The solution I found is to change the default column width property to auto, and override the default width of 150.

 const defaultColumn = {
    width: "auto",
  }

See:

• https://react-table.tanstack.com/docs/api/useTable#table-options
• https://react-table.tanstack.com/docs/api/useTable#column-options
• https://github.com/tannerlinsley/react-table/blob/master/examples/block-layout/src/App.js

[jussivirtanen]

I'm having the same issue. The proposed workaround works with two caveats:

1. The column size will jump to 150px when starting to resize.
2. The column size will be reset to undefined when resizing back to 150px.

In our case, we'd like the first column to have a fixed width (say, 48 px) which wouldn't be affected when resizing other columns. Here's a quick video of what's happening:

CleanShot.2022-12-20.at.09.19.31.mp4

One possible solution I can think of is to provide a way to get the column width (offsetWidth) when resizing and set that as the starting point. Currently, the .getSize() method seems to return the cell size (the default is 150), not the actual pixel value.

Does anyone have any thoughts or alternative solutions?

[toto1384]

any updates on this?

[natecalc]

This worked for me, however my aim was to only get the first column to have a wider width of 600 with all others as auto.

This was my code:

<Tr key={headerGroup.id}>
       {headerGroup.headers.map((header) => {
            return (
                    <Th
                      key={header.id}
                      style={{
                        width: header.index === 0 ? 600 : "auto",
                      }}
                    >
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                    </Th>
               );
         })}
</Tr>

[samir1498]

thanks this worked for me:
style={{ width: header.getSize() !== 150 ? header.getSize() : undefined }}

[VityaSchel]

how to set flexible columns? size property does not work for me

[BitScorpio]

For anyone still looking for an alternative, this is how I implemented it in React

const table = useReactTable({
    data: data,
    columns: columns,
    getCoreRowModel: getCoreRowModel(),
    defaultColumn: {
        minSize: 0,
        size: Number.MAX_SAFE_INTEGER,
        maxSize: Number.MAX_SAFE_INTEGER,
    }
})

Header width calculation:

style={{width: header.getSize() === Number.MAX_SAFE_INTEGER ? "auto" : header.getSize()}}

Cell width calculation:

style={{width: cell.column.getSize() === Number.MAX_SAFE_INTEGER ? "auto" : cell.column.getSize()}}

[Brenndoerfer]

Heads-up: This is v8, whereas the question and previous answers were solving for v7 or earlier

[divmgl]

Why is this designed this way? CSS properties don't 1:1 conform to numbers. They're strings. We should be able to supply width: "100%" or width: "auto" or width: "128px" without using magic numbers.

[boan-anbo]

Thanks but this breaks the official resizing example

[nsadeh]

What do you pass into the table size?

[boan-anbo]

Let me add another use case related to this:

Use case: you need to truncate text inside a cell using the text-overflow: ellipsis; property, which needs overflow: hidden and whitespace-nowrap, and a fixed maxWidth.

Without setting the header like so:

style={{width: header.getSize() === Number.MAX_SAFE_INTEGER ? "auto" : header.getSize()}}

You will not be able to have an auto-sized (takes up remining space left by fixed columns) column that does text truncation. You will have either a fixed maxWidth column, or an overflow column beyond the max width of the table itself when text inside the cell is too long.

So with the above header style, you can have an auto-sized column with text ellipsis by adding a maxWidth style to the cell style like this:

<td
    style={{
    maxWidth: '100px',
    // other styles ...
    }}
> ...

Note that you set an arbitrary number 100px which actually will not be respected, instead it will respect the header maxWidth to give you the full width of the column, but the maxWidth restraint needed by the text ellipsis and whitespace: nowrap now works.

This is a very strange behavior to prevent table width overflow with non-wrapped super long cell value, but it does the trick.

[anewman15]

Any non-hacks to set custom initial width of th in v8?

[BitScorpio]

The proper way imo is to use the meta property when defining each column & accessing it via cell.column.columnDef.meta in your table.

[sangdth]

Even when I tried to use directly number from const size = header.column.columnDef.size like this, it still modify my column width. I can't believe I spent 3 hours just to set column widths and sstill failed!

[TudorEsan]

same problem here

[crswll]

I don't think you two looked at the example code close enough.

They're suggesting putting size in meta in your column definitions: { id: 'columnName', meta: { size: '100px' } } and using const size = header.column.columnDef.meta.size

They are not suggesting { id: 'columnName', size: '100px' } and const size = header.column.columnDef.size. columnDef.size is for column resizing.

When you use columnDef.size that defaults to 150 so all your other columns will be 150px wide and all the cells will need to adjust since the table can't be 100% width with all hardcoded pixel values.

If you do something like style={{ width: header.column.columnDef.meta.size || 'auto' }} it should work.

You can technically use columnDef.size if you set some strategic defaults. You can set defaultColumn: { minSize: -1, size: -1 } in useReactTable, then use { size: 100 } in a column definition, then when setting the width just make sure it's greater than -1 before you use it, otherwise use auto. The meta approach allows you to define widths any way you want but this limits you to pixels.

[AndreaBarghigiani]

OP should mark the above as the correct answer to solve this issue. It really solved my width setting it for the entire column.

[PavelStanoev]

For people looking for a fast (and maybe not that pretty solution)

{
    accessorKey: "status",
    header: "Status",
    cell: (status) => (
      <div className="w-[100px]">{status.getValue() as React.ReactNode}</div>),
}

This ColumnDef example works like a charm.

[aniruddha-mithya]

Might want to mention that this only works if you have tailwind in your project

[AndreaBarghigiani]

On top of that doesn't look to me that it works like a charm. You are indeed able to set a width for the element you are currently defining for the cell, the div. But you will not actually set the width of the td that in the end is the one that is setting the column width in the first place.

[PavelStanoev]

this is in no way the intended way to work with the column width but its a solution that will work for most of the people searching around having this issue. You are indeed changing the cell width which results in td width change too.

PS: excuse my paint skills

[nadaaskora]

the first column doesn't apply the correct width

[KranzAklilu]

+1 Yes it's super weird.

[DogAndHerDude]

Yeah, the calculations seem off. Content is size of > 150, and the maxSize does not get respected. If my content is a total size of 400px, then shouldn't the maxSize property cap it at 350px if I so specified? why does the default value get used instead? Am I misunderstanding how things are working here?

[nsadeh]

If I may, this is quite an annoying gap in an otherwise good table library. I want the table to default to the screen size when it is first rendered, which I think is quite natural.

I ended up solving this in a very roundabout way which still has a bunch of weirdness associated with it:

const [fullWidth, setFullWidth] = useState(0);
  useEffect(() => {
    if (ref.current) {
      setFullWidth(ref.current.offsetWidth);
    }
  }, [ref.current]);
  
  <>
      <div
        className="flex flex-row w-full gap-4 items-center justify-end"
        ref={ref}
      >
        <CheckboxDropdown options={dropDownOptions} label={'Columns'} />
      </div>
      <div className="overflow-x-scroll ">
        <table
          className="divide-gray-300 w-fit table-fixed"
          style={{
            width: Math.max(fullWidth, table.getCenterTotalSize()),
          }}
        >
       {...rest of table}
   </div>
</>

[dimbslmh]

I think that people don't realize that getSize() is part of the Column Sizing feature, and it's not ment to retrieve string values.

You'll need to add a property to the ColumnMeta that you want to use on your <col> <th> <td>.

import "@tanstack/react-table";

declare module "@tanstack/table-core" {
  interface ColumnMeta<TData extends RowData, TValue> {
    className?: string;
    style?: CSSProperties;
    width?: Property.Width<string | number>
  }
}

[Zexoius]

maybe there can try this way:

<colgroup>
  {columns.map((col, index) => (
    <col key={col.header as string} style={{ width: col.size || 200 }} />
  ))}
</colgroup>

now u can use size to controll fixed width.

[egucciar]

I spent a few hours today diving into this myself. My constraints that it had to work with column resizing (specifically, the performant guide, which we do need to avoid render flickers). I think I'd like to take time to port what I've done into an example to share, but will give an overview to see if there is interest.

Goal 1. I want to be able to resize columns , and define max/min widths to be respected
Goal 2. I want to specify the optimal width of a column (ensuring those columns are wide enough on small screens) while not making it impossible to resize them smaller/grow bigger
Goal 3. I want the columns to flex up to the size of their container, evenly so

This means we need a table aware both of resizing considerations and flex considerations. In the resizing example, CSS vars are used to performantly update. For my purposes, I decided to implement a display: grid layout, and hence, instead of calculating individual header & cell sizes, I calculate the gridTemplateColumns string and assign this to a CSS variable. I apply this layout to the row elements for them to size the cells accordingly. The gridTemplateColumns string I produce looks like, minmax(300px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) 16px. In this example, there would be 4 total columns; the first has a width of 300px and no max width, the second and third have no specified width (the react-table default is 150), and the last column has a max size of 16px.

However, when resizing, as some have noted with styling-focused solutions, the table "jumps". Or, the styling overrides "break" resizing. To fix this, I took it a step further. When a resize is starting, I delay triggering the resize handler while i use a ref to determine the rendered width (the flexed width) of the column, and call setColumnSizing with this. (I also keep track and spread any previous column sizes that were produced by resizing). This keeps the table in sync with the rendered DOM.

During and after resizing, relying on the flex width for a column is no longer tenable. As a result, the gridTemplateColumn string now has to switch minmax(px, 1fr) to px for respective columns. Additionally, if the column is the last flexible column, it should never have its minmax(px, 1fr) removed; other columns resizing need to "give" from somewhere, so it naturally makes sense to do it at the last non-fixed column in the table. Finally, the pixel update should be prevented if this going to make the grid extend past the width of the container (returning the previously stored value when the table.getTotalSize() exceeds the width of the container. This effectively prevents the update from rendering which prevents resizing).

I abstracted this into a hook for my use case. I can post it / create an example if anyone else could benefit from this solution.

[joshkay]

Can you please post the hook here? Sounds like great work!

[egucciar]

Can definitely post it, its a bit hairy, so hopefully the comments are helpful. Note: I have NOT tested this with multiple header groups, as I really only need 1 header group for my purposes.

Hook code provided below. Make the following changes to your table

• Create a headerRef which goes on your header row element
• Populate each header cell with a data-id={column.id} (see the "getResizeHandler" returned at the bottom)
• apply gridTemplateVarsStyle to the container style prop
• Replace the calls to getResizeHandler from the table with the getResizeHandler returned by the hook
• Ensure any explicitly defined column maxWidth is also specified within the column meta (can provide how i did that if needed also)
• Apply the following styles to your header row & table rows

  display: grid;
  grid-template-columns: var(--grid-template-columns); // calculated by useGridFlexLayout
  grid-template-rows: min-content;

Hook Code:

import {CSSProperties, useMemo, useRef} from "react";
import {Header, Table} from "@tanstack/react-table";

/**
 * This hook provides all logic, variables, and handlers
 * needed to support both flexing the column sizes on
 * first load, AND resizing columns using the header handles
 *
 * It works by leveraging a grid layout and minmax widths
 * By default, everything will be layed out using minmax(Npx, 1fr)
 * Where Npx is what is calculated by react-table or supplied by the user
 * We do not do this with items with a max-width, as we want to make sure
 * they do not extend beyond the max-width (1fr will allow it to expand)
 *
 * 150 is the default max-width supplied by react-table, which is ignored
 * by using minmax(px, 1fr). We also require the actual maxWidth to be set
 * within the meta for a column in order to know columns with a "true" maxWidth.
 * The end result is that the table is layed out in an optimal way respecting
 * the maxWidth specified by the developer, the optimal values calculated by
 * the table, and the flexed widths calculated by the browser
 *
 * For resizing, we need to make react-table aware of the rendered widths
 * as we rely on the browser to do the layout, and react-table becomes
 * out of sync. To account for this, we expose a custom getResizeHandler
 * which updates the table with the DOM rendered widths before invoking resize
 */
export function useGridFlexLayout<T extends {}>({
    table,
    headerRef,
}: {
    table: Table<T>;
    headerRef: React.RefObject<HTMLDivElement>;
}) {
    /**
     * Store the resized columns in a ref so we can use them later
     * It would be nice if I could get this value from react-table,
     * but it doesn't seem to be exposed (?)
     */
    const resizedColumnsStatic = useRef<Record<string, number>>({});

    /**
     * Instead of calling `column.getSize()` on every render for every header
     * and especially every data cell (very expensive),
     * we will calculate all column sizes at once at the root table level in a useMemo
     * and use grid template styles and CSS vars to lay out the table
     *
     * We also handle resizing and flexing the columns here
     */
    const gridTemplateString = useMemo(() => {
        const headers = table.getFlatHeaders();

        // The last column without a maxWidth will always have a minmax with 1fr
        // This ensures that the column fills remaining width in the table container
        // if other columns are resized to be smaller
        const lastColumnWithoutMaxWidth = headers.findLast(
            (h) => !h.column.columnDef.meta?.maxSize
        );

        const gridTemplate = headers.map((header) => {
            const isLastResizableColumn = lastColumnWithoutMaxWidth === header;
            const currentSize = header.getSize();
            const sizeInPx = `${currentSize}px`;

            // Update our ref of what is being resized - we need to explicitly
            // set the resized widths and prefer them over the flex widths
            if (header.column.getIsResizing()) {
                resizedColumnsStatic.current[header.id] = currentSize;
            }

            const hasMaxSize = header.column.columnDef.meta?.maxSize;
            const isResizing = header.column.getIsResizing();
            const hasBeenResized = resizedColumnsStatic.current[header.id];

            // Prefer the size calculated by react-table if the col has a maxSize
            if (hasMaxSize) {
                return sizeInPx;
            }
            // If we are resizing, or already resized, this column, use the PX value
            // unless it's the last resizable column, which always needs 1fr
            if ((isResizing || hasBeenResized) && !isLastResizableColumn) {
                return sizeInPx;
            }

            // The default for all columns is to fill the remaining space
            // also, the last resizeable column will always flex to fill any space
            // caused while resizing columns to the left of it
            return `minmax(${sizeInPx}, 1fr)`;
        });

        const gridTemplateJoined = gridTemplate.join(" ");

        return gridTemplateJoined;
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [table.getState().columnSizingInfo]);

    return {
        gridTemplateVarsStyle: {
            "--grid-template-columns": gridTemplateString,
        } as CSSProperties,
        gridTemplateString, // useful to render for debugging :)
        getResizeHandler: (header: Header<T, unknown>) => (event: unknown) => {
            // Note: This relies on data-id being present within the DOM
            const headerElement = Array.from(headerRef.current?.childNodes ?? []).find(
                (node): node is HTMLElement =>
                    node instanceof HTMLElement && node.getAttribute("data-id") === header.id
            );

            // Very quickly set the column width to the one which was calculated by DOM rendering
            // This is so that we can rely on DOM rendering to layout the table, but when we
            // go to resize columns, react-table is aware of the current column width
            if (headerElement) {
                table.setColumnSizing({
                    ...resizedColumnsStatic.current,
                    [header.column.id]: headerElement.getBoundingClientRect().width,
                });
            }

            // before invoking resize handler, allow the underling table to be updated
            setTimeout(() => header.getResizeHandler()(event));
        },
    };
}

[egucciar]

Note: we decided to remove the bailing out of resize code, as we do want to expand the rows beyond the width. :) I edited my answer to remove it for now since it seemed to have some issues when trying to force it.

[antonsjoestrand]

For those still interested, the way I solved this was by calculating the default size of the columns you don't want to be locked and using an empty "filler" column that is set to auto. Essentially all the other columns are acting as auto but in order to make it work properly with TanStack you need to provide the exact width it has, when the columns are set to auto through CSS it doesn't know the size of the column and therefor jumps to the default of 150. I have no idea why TanStack tables doesn't already have this calculation included, but here's how it works:

• Add a ref to the table so you can use a ResizeObserver on the full width.
• You simply want to divide the full width by the amount of columns you have. From the full width of the table you want to remove any locked columns that have a specific size for the math to be accurate.
• Provide this calculated size to the default column size in TanStack.
• Add an empty filler column at the end of the table (outside of TanStack) that is set to auto through CSS. This column only serves one purpose, to even out the leftover space when you're changing the width of a column. That way all fixed columns actually stay fixed and don't flex out.

I haven't seen any real solution that doesn't use some sort of filler column, but that would be the main caveat of this and why it's not as pretty as you'd want it to be. Otherwise it did achieve the behavior I was looking for