Чем горизонтальная виртуализация таблицы отличается от вертикальной?

Виртуализация таблицы — это приём, при котором в DOM попадают только те ячейки, которые реально видны пользователю в текущий момент. Без неё таблица на 10 000 строк создаёт десятки тысяч узлов, и браузер начинает тормозить при скролле и обновлении данных.

Горизонтальная виртуализация

Горизонтальная виртуализация (виртуализация строк) отслеживает вертикальный скролл и рендерит только строки, попавшие в видимую область плюс небольшой буфер сверху и снизу. Остальные строки заменяются пустыми блоками нужной высоты, чтобы сохранить общую высоту скролла.

const rowHeight = 40;
const visibleCount = Math.ceil(containerHeight / rowHeight);
const start = Math.floor(scrollTop / rowHeight);
const end = start + visibleCount + buffer;
const visibleRows = rows.slice(start, end);

Вертикальная виртуализация

Вертикальная виртуализация (виртуализация колонок) работает по той же логике, но по горизонтальной оси: рендерятся только колонки, видимые при горизонтальном скролле. Это полезно для широких таблиц с десятками и сотнями колонок, например в аналитических дашбордах.

const colWidth = 120;
const startCol = Math.floor(scrollLeft / colWidth);
const endCol = startCol + visibleCols + buffer;
const visibleCols = columns.slice(startCol, endCol);

Когда что применять

• Много строк, мало колонок — горизонтальная виртуализация.
• Мало строк, много колонок — вертикальная виртуализация.
• И то и другое — комбинированная двумерная виртуализация.

На практике чаще нужна виртуализация строк, потому что длинные списки встречаются гораздо чаще широких таблиц. Библиотеки вроде react-window и react-virtualized поддерживают оба режима и позволяют комбинировать их.

Итог: выбирайте тип виртуализации по тому, какая ось таблицы растёт — если строки, виртуализируйте строки, если колонки, виртуализируйте колонки, а для больших двумерных таблиц используйте оба подхода вместе.