Linear search across columns, possible reason for slow performance?

[gewesp]

table/packages/table-core/src/features/ColumnSizing.ts

Line 133 in 9ef186f

const index = columns.findIndex(d => d.id === column.id)

If I read that code correctly, it scans all columns linearly for a given ID.

We use tanstack with tables of potentially 100s of columns.

In our profiles, the getStart() function shows up taking significant amount of CPU. Notice that it is even recursive.

Looking up the ID in a map may be potentially much faster, provided that the code can be refactored so that the map doesn't need to be recreated each time (I think this is possible).

Questions:

• Is tanstack table suitable for several 100s columns, or should we use another framework?
• Could the linear search contribute to some of the performance bugs reported?

[andresgutgon]

I found similar issue, after running Chrome performance getStart appeared as one of the main offenders. we use table in combination we virtual (also tanstack) so we position the cells of the table in absolute and the transform it x/y using column.getStart()

style={{
  transform: `translateX(${column.getStart()}px) translateY(${virtualRow.start}px)`,
}}

What @gewesp says about using a hash map instead of running findIndex could improve it. But don't know the code well enough to see the trade-offs.

I was thinking at the moment to use a useMemo for the transform style and some kind of cache invalidation for that memo. Does not work because we have column resize and the memo breaks it

[andresgutgon]

This is what I finally did:

type BuildTranslateProps = { x: number; y: number }
function buildTranslate({ x, y }: BuildTranslateProps): string {
  return `translateX(${x}px) translateY(${y}px)`
}

const rowStart = virtualRow.start
const memoTransform = useMemo(
  () => buildTranslate({ x: column.getStart(), y: rowStart }),
  [column, rowStart]
)
const transform = isBigTable
  ? memoTransform
  : buildTranslate({ x: column.getStart(), y: rowStart })

isBigTable is an arbitrary value (60 columns) that we set to use the memoized version of getStart. Otherwise we use the more fluid approach of always calling getStart.

---

This is a hack. I would love to here from tanstack what would be a better solution for everyone. Thanks for this is an awesome package 🙌