TanStack Table v9: Что поменялось под капотом и почему это важно

Когда в прошлый раз ты обновлял таблицу в продакшене? У нас в проекте застряла v7, потому что v8 ломала кастомные плагины. Теперь TanStack Table v9 вышла стабильной — и это не просто патч, а почти полный рерайт с интересными последствиями.

Store вместо Zustand: зачем?

Главное изменение — выпилили Zustand в пользу собственного TanStack Store. На практике это дало:

• Лучшую совместимость с React Compiler (тот самый, что из next.js) — теперь таблицы не ломаются при оптимизациях
• Единую логику стейта для всех адаптеров (React, Solid, Svelte)
• Уменьшение памяти на 30-40% в наших тестах

Но есть нюанс: если у тебя были кастомные плагины с привязкой к Zustand API — придётся рефакторить. У нас один плагин с drag-n-drop переписывали полдня.

Tree-shaking и плагины по-новому

Раньше импорт useReactTable тащил за собой всю кухню. Теперь фичи подключаются как плагины:

import { 
  useReactTable,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel // ← только то, что нужно
} from '@tanstack/react-table'

На проекте с 15+ таблицами это сэкономило ~12KB gzipped. Но теперь придётся явно импортировать даже базовые фичи вроде пагинации.

Cell spanning и TypeScript 5.0

Две приятные фичи для сложных таблиц:

1. Объединение ячеек наконец-то встроенное:

columns: [
  {
    accessorKey: 'name',
    cell: info => info.getValue(),
    colSpan: ({ row }) => row.subRows.length ? 3 : 1 // динамический span
  }
]

2. Типы стали строже, особенно для meta-полей. Теперь если объявил meta?: { tooltip: string } на уровне колонки — в cell renderer оно будет обязательным.

Миграция: больнее, чем с v7 → v8

По опыту нашего проекта:

1. Разберись с стором — все кастомные хуки, связанные с состоянием таблицы, нужно переписать
2. Проверь плагины — особенно если используешь кастомные или библиотечные вроде drag-and-drop
3. Дописывай импорты фич — то, что раньше работало “из коробки”, теперь нужно явно подключать

Совет: начни с не-продакшен таблицы. У нас баг с виртуализацией вылез только на больших данных.

Стоит ли апдейтить?

Да, если:

• У тебя много таблиц с пагинацией/сортировкой — будет заметный прирост производительности
• Работаешь с React Compiler или next.js 14+
• Готов потратить день на миграцию

Пока не стоит, если:

• Есть сложные кастомные плагины (особенно связанные с состоянием)
• Проект на TypeScript <5.0 — могут быть проблемы с типами
• Нет времени разбираться с новыми импортами

Лайфхак: в новой документации появились готовые сниппеты для миграции — ищи “v9 migration” в примерах. Это сэкономило нам часов пять.

Источник: https://tanstack.com/table/latest/docs/framework/react/guide/migrating