How to make performant column sizing play well with column visibility?

[phb-ig]

I have implemented performant column sizing as shown in this example in a table which also uses column visibility.

However, because the table no longer updates on state.columnSizing, the size config of a column which started hidden is ignored when it is first shown.

How can I get the performance benefits while also having columns un-hide at the correct size?

[madhav669]

The cause is that the example only writes CSS variables for table.getFlatHeaders(), and that list only includes visible columns. A column that starts hidden never gets a --col-<id>-size / --header-<id>-size variable. Showing it doesn't change columnSizing, so the writer never runs again. The new cells then render with calc(var(--col-b-size) * 1px), which is invalid because the variable doesn't exist, so the width falls back to auto.

The fix is to re-run the writer when visibility changes as well as when sizing changes.

v9 (current example, atoms):

React.useLayoutEffect(() => {
  const writeColumnSizeVars = () => {
    const tableEl = tableRef.current
    if (!tableEl) return
    for (const header of table.getFlatHeaders()) {
      tableEl.style.setProperty(`--header-${header.id}-size`, String(header.getSize()))
      tableEl.style.setProperty(`--col-${header.column.id}-size`, String(header.column.getSize()))
    }
    tableEl.style.width = `${table.getTotalSize()}px`
  }
  writeColumnSizeVars()
  const subs = [
    table.atoms.columnSizing.subscribe(writeColumnSizeVars),
    table.atoms.columnVisibility.subscribe(writeColumnSizeVars), // <- add this
  ]
  return () => subs.forEach((s) => s.unsubscribe())
}, [])

This doesn't cost you anything during a resize. Visibility doesn't change while you're dragging, so the extra subscription only fires when a column is actually shown or hidden. It also keeps getTotalSize() correct when columns are hidden or shown. If you have column ordering or pinning, subscribe to those atoms the same way, because they change the header structure too.

I tested this with @tanstack/[email protected] in jsdom. I used a column b with size: 333 that starts hidden (initialState.columnVisibility = { b: false }), and the root re-renders on columnVisibility so the cells mount. Results:

• Only the columnSizing subscription: after getColumn('b').toggleVisibility(true), the <td> for b mounts but --col-b-size is "".
• Visibility subscription added: --col-b-size is "333" right after it's shown.

v8 (useMemo version of the example): same idea. Add visibility to the memo deps:

const columnSizeVars = React.useMemo(() => {
  // ...same loop over table.getFlatHeaders()
}, [
  table.getState().columnSizingInfo,
  table.getState().columnSizing,
  table.getState().columnVisibility, // <- add this
])

You could also loop over table.getAllLeafColumns() instead (column.getSize() works for hidden columns too), so every --col-* variable exists up front. That doesn't cover the --header-* variables for group headers, though, so the extra subscription/dependency is the simpler fix.

[phb-ig]

Seems obvious, guess I'll blame lack of sleep 😅

Thanks for the detailled description!