Да, я работал с длинными таблицами, где использовалась виртуализация для оптимизации рендеринга. Идея в том, чтобы в DOM попадали только те строки и столбцы, которые видны пользователю в данный момент, а остальные не рендерились, что значительно улучшает производительность.

Для этого обычно:

Отслеживается размер видимой области и скролл.
Вычисляется, какие строки и столбцы должны отображаться.
Рендерятся только эти элементы, а остальные — виртуально скрыты.

Пример популярных библиотек с виртуализацией:

react-window
react-virtualized

Пример простейшей виртуализации для строк на React:

import React, { useState, useRef, useEffect } from 'react';

const rowHeight = 30;
const totalRows = 10000;

function VirtualizedTable() {
  const [scrollTop, setScrollTop] = useState(0);
  const viewportHeight = 300;

  const startIndex = Math.floor(scrollTop / rowHeight);
  const visibleCount = Math.ceil(viewportHeight / rowHeight);

  const visibleRows = [];
  for (let i = startIndex; i < startIndex + visibleCount; i++) {
    if (i >= totalRows) break;
    visibleRows.push(i);
  }

  return (
    <div
      style={{ height: viewportHeight, overflowY: 'auto', position: 'relative' }}
      onScroll={e => setScrollTop(e.currentTarget.scrollTop)}
    >
      <div style={{ height: totalRows * rowHeight, position: 'relative' }}>
        {visibleRows.map(i => (
          <div
            key={i}
            style={{
              position: 'absolute',
              top: i * rowHeight,
              height: rowHeight,
              left: 0,
              right: 0,
              borderBottom: '1px solid #ccc',
              boxSizing: 'border-box',
            }}
          >
            Строка {i}
          </div>
        ))}
      </div>
    </div>
  );
}

export default VirtualizedTable;

Такой подход позволяет эффективно работать с большими объёмами данных без тормозов.

По поводу таблиц — делал сложные длинные таблицы с виртуализацией, когда рендерится только то, что видно на экране пользователя?