getSize returning the wrong value?

[rodolphoasb]

Hey, @tannerlinsley! Awesome working, I'm migrating a table from v7 to v8 and I'm finding it way better both in terms of API and performance!

I'm trying to make a table where users can make a horizontal scroll and have their pinned columns still visible. But to achieve this I need to get the size of the column to the left so I can pass it to the second column: left-[sizeOfTheFirstColumnPx].

But when I try to get the size, it always returns 150 for all the columns even though in practice it's bigger.

<tbody className="bg-white divide-y divide-gray-200">
                {instance.getRowModel().rows.map((row) => {
                  return (
                    <tr
                      className="text-gray-500 text-sm cursor-pointer hover:bg-gray-50 transition-all"
                      key={row.id}
                    >
                      {row.getVisibleCells().map((cell) => {
                        console.log("cell", cell.column.getSize());
                        return (
                          <td
                            className={`px-6 py-3 relative whitespace-nowrap z-10 ${
                              cell.column.getIsPinned() !== false
                                ? `sticky z-20 bg-gray-50 ${
                                    columnPinning.left
                                      ? `${
                                          columnPinning.left[0] ===
                                          cell.column.columnDef.accessorKey
                                            ? "left-0"
                                            : `${
                                                cell.column.columnDef
                                                  .accessorKey === "lastName"
                                                  ? "left-[277.11px]"
                                                  : ""
                                              }`
                                        }`
                                      : ""
                                  }`
                                : ""
                            }`}
                            key={cell.id}
                          >
                            {cell.renderCell()}
                          </td>
                        );
                      })}
                    </tr>
                  );
                })}
              </tbody>

I'm using it wrong? This returned value should be the correspondent column size in pixels?

[talatkuyuk]

In the code packages/table-core/src/features/ColumnSizing.ts here, I see the code below:

export const defaultColumnSizing = {
   size: 150,
   minSize: 20,
   maxSize: Number.MAX_SAFE_INTEGER,
}

The default size is fixed to 150px. If the content is wider than 150, the cell is enlarged, but the size of the column stays the same (150px) in behind.

I don't know how to change this behavior. It effects the column re-sizing feature as well causing the glitch and delays while resizing.

[talatkuyuk]

There should be a way (after creating the table and after the data is settled in the table) for getting the actual column sizes from the page and set the ColumnSizing state for each column.

If anybody knows how to solve, I appreciate.

[livevsonline]

Im having trouble with columns resizing and jumping around as you scroll with Tanstack Table/Virtualizer

It does not seem to respect the properties, size/minSize/maxSize...

[talatkuyuk]

I would like to share my work-around how I set the th width and update the table state (columnSizing) according to actual content in the table.

Firstly, I created a state hook for the columnSizing; and passed it into the table instance.

const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});

// I omitted the other table features for simplicity
const instance = useTableInstance(table, {
    columns,
    data,
    columnResizeMode: "onChange" as ColumnResizeMode,
    state: {
      columnSizing,
    },
    onColumnSizingChange: setColumnSizing,
  });

Then, in the table component, I created a useEffect in order to get the actual th and set the th width and update the table columnSizing state. Whenever the table data changes, the useEffect works again.

useEffect(() => {
    const headcells: NodeListOf<HTMLElement> = document.querySelectorAll(
      ".my-custom-table thead th"
    );

    let newColumnSizing = {};

    headcells.forEach((headcell): void => {
      headcell.style.width = `${headcell.clientWidth}px`;

      newColumnSizing = {
        ...newColumnSizing,
        [headcell.dataset.columnName as string]: headcell.clientWidth,
      };
    });

    instance.setColumnSizing(newColumnSizing);  // here I updated the table columnSizing state
  }, [instance.options.data]); // it is table data, or, you can use the data hook passed into table instance as well

In order the above hook to work, I set the table implementation like below. (I showed the necessary part only. I omitted the rest)

<Table
  className="my-custom-table"
  style={{
    width: `${
      instance.getTotalSize() +
      (instance.getAllLeafColumns().length + 1) * 3 // I got better result when I added this which is related with the tr css borders !
    }px`,
  }}
>

<th
  key={header.id}
  data-column-name={header.id} // useEffect depends on that !
  colSpan={header.colSpan}
  style={{ width: header.getSize() }}
>

And finally, I placed the html resizer element into the end of the th:

{header.column.getCanResize() ? (
   <div
      {...{
         onMouseDown: header.getResizeHandler(),
         onTouchStart: header.getResizeHandler(),
         className: `resizer ${
         header.column.getIsResizing() ? "isResizing" : ""
       }`,
      }}
     />
) : null}

And, don't forget the set the size and minSize in the column definitions, if necessary, in order to get better result !

table.createDisplayColumn({
   id: "field",
   size:  , // optional, but, if the column has fixed width set it !
   minSize:  , // optional, it is so important, otherwise the mouse left-move sets the width up to zero in behind
   enableResizing:   , // true, or false, optional, default is true
   // omitted the other renderers (cell, header etc.)
}),

I hope my above entry is useful for someone who suffers from weird resizing issue.

[mehmetdemiray]

Teşekkürler :)

I made a small addition to the code to also set the cells to automatically adjust their width.

table-layout: auto -> All cells + headers will be at auto length;
table-layout: fixed -> Fixed to the specified width.

Taking into account the above information, I initially open the table layout as auto to get the actual width values and then reset them to the headers with your code. After this setting process is finished, I switch the table layout to fixed mode to make it resizable.

  const [layout, setLayout] = useState<'auto' | 'fixed'>('auto');

  useEffect(() => {
    if (Object.keys(columnSizing).length > 0) {
      setLayout('fixed');
    }
  }, [columnSizing]); // it comes from your code

Once the width adjustment for the table headers is completed, I switch the layout from auto mode to fixed mode.

{...{
  style: {
    width: `${table.getTotalSize() + (table.getAllLeafColumns().length + 1) * 3}px`,
    tableLayout: layout, // first auto after fixed
  },
}}

[gkonuralp]

The problem still exists. getSize() is returning wrong values if table width is 100%.

[KevinVandy]

The TanStack Table size system is only designed to be used with absolute size pixel units. column.getSize won't measure the dom elements, it returns what is is the column sizing state. You can still use any width strategy that you want, but if using a 100% width table where columns gow to fill remaining space, just understand that column.getSize() should be used as a proportion instead of an exact dom measurement.

[Maximilon]

@KevinVandy Any chance of adding this into the library? I feel like string values are pretty common for tables, for example, I often send a 'small', 'sm', or 'large', 'lg', to a tableheader rather than a raw value. Some design systems do use names for sizes too. (as well as % values, albeit a proportion is similar enough)

[teiron-jueyue]

I found the answer here. When I set the width value for col, it applies this absolute width value to th/td; but for the last one, I don't set it so that it can adapt automatically.

The idea comes from [rc-table](https://github.com/react-component/table)

[Armas0n]

Today I met the problem when implementing sticky columns.
Here's my solution to the problem:

// Table, TableHead etc are just simple wrappers around native html elements, nothing fancy there.
<Table>
      <TableHeader>
        {table.getHeaderGroups().map((headerGroup) => (
          <TableRow key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <TableHead
                key={header.id}
                colSpan={header.colSpan}
                // callback ref which does the heavy lifting
                ref={(thElem) => columnSizingHandler(thElem, table, header.column)}
              >
                {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
              </TableHead>
            ))}
          </TableRow>
        ))}
      </TableHeader>
      // nothing interesting here
</Table

const columnSizingHandler = (thElem: HTMLTableCellElement | null, table: Table<any>, column: Column<any>) => {
  if (!thElem) return;
  // If you don't do that, there will be an infinite loop. We update the value in state only if the value has actually changed.
  if (table.getState().columnSizing[column.id] === thElem.getBoundingClientRect().width) return;

  table.setColumnSizing((prevSizes) => ({
    ...prevSizes,
    // 100% accurate float-point width, even if table content is loaded async
    [column.id]: thElem.getBoundingClientRect().width,
  }));
};

[Annukul]

This worked for me!!!!!!

[Annukul]

There is one issue with this code, is you add some other elements in the header (say sorting icons/filter icons) and if that content grows more than the width of the header then it will go into an infinite loop.

I changed the code to make it work

const columnSizingHandler = (thElem: HTMLTableCellElement | null, table: Table<any>, column: Column<any>) => {
  if (!thElem) return;
  // Only update when this is undefined.
  if (table.getState().columnSizing[column.id] === undefined) {
        table.setColumnSizing((prevSizes) => ({
          ...prevSizes,
          // 100% accurate float-point width, even if table content is loaded async
          [column.id]: thElem.getBoundingClientRect().width,
        }));
  }
};

[minhnhat165]

I made a small modification to the columnSizingHandler function to ensure that the column width updates not only when it's undefined but also when the stored width differs from the actual width.

Changes:
Previously, the width was set only if columnSizing[column.id] was undefined.
Now, it also updates when the real width differs from the stored width, ensuring more accurate resizing when content loads asynchronously or when the column width changes dynamically.

 export const columnSizingHandler = <TData>(
  thElem: HTMLTableCellElement | null,
  table: Table<TData>,
  column: Column<TData>
) => {
  if (!thElem) return
  // update when real width is different from stored width or not stored
  if (
    table.getState().columnSizing[column.id] === undefined ||
    table.getState().columnSizing[column.id] !== thElem.getBoundingClientRect().width
  ) {
    table.setColumnSizing((prevSizes) => ({
      ...prevSizes,
      [column.id]: thElem.getBoundingClientRect().width
    }))
  }
}