MUI Table is still slow

[igortas]

Hi,
I've add the virtualizer on top of mui table, but nothing really changes, nothing affects the slowness of the mui table, and blocks the app when clicking something, until rerenders.

  const tableContainerRef = useRef<HTMLDivElement>(null);
  const rowVirtualizer = useVirtualizer({
    count: data.length,
    getScrollElement: () => tableContainerRef.current,
    estimateSize: () => 35,
    overscan: 5,
  });

  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: columns.length,
    getScrollElement: () => tableContainerRef.current,
    estimateSize: () => 100,
    overscan: 5,
  });

For virtualRows and virtualColumns I have called getVirtualItems.

const rows = virtualRows.map((virtualRow) => {
    const row = data[virtualRow.index];
    return (
      <TableRow
        key={`row-${virtualRow.index}`}
      >
        {virtualColumns.map((virtualColumn) => {
          const key = columns[virtualColumn.index]['key'];
          return (
            <TableCell key={`cell-${virtualColumn.index}`}>
              <Typography>{row[key] as ReactNode}</Typography>
            </TableCell>
          );
        })}
      </TableRow>
    );
  });

BR,

[schester44]

yeah its pretty bad, the way I was able to really improve performance was by rendering "placeholder" elements that looked like the real thing. So instead of rendering an input, i'd render a div with some styles that made it look like an input.

Most of the slowness for me comes on scroll when it looks like the entire table is re-rendering for some reason. I'd expect only the rows that are mounting to render on scroll.

[igortas]

@schester44 I forget this was still opened, we are on other solution with mui x grid, but the problems are same, u need to memo everything, useCallback and useMemo, stable references etc... also sticky columns are problematic especially if they are real components. Def rendering placeholders, and on mousehover changing conditionally the real component is the way to improve. I'm rendering raw values as much as I can, and only in those instances where I need whole jsx than switch to that, sometimes that goes to worst scenario, where all columns needs to be jsx components. This is some tips from around a whole yearn playing with tables with many columns, and trying to find the best performant version of it, also done migration recently to latest version(that will improve somehow the perf, but not really the case),but I think the solution is much more the same for various table solutions, it's heavily relies on the props, and if one prop changing rerenders everything. Try to create different instance for different scenario, where u have the minimal amount of props that can rerender the table. One simple wrapper on top of that is fine, but also u need to keep care for those props too, and not rerender that component, which will force to rerender the table. Not sure how React 19 can affect improving this part with the tables...