Онлайн-редактор таблиць: віртуалізація, формули та спільна робота

Створити онлайн-редактор таблиць з віртуалізацією десятків тисяч рядків, формульним двигуном та спільною роботою — це нетривіальне інженерне завдання. Готові коробкові рішення не дають гнучкості: вбудувати їх в CRM, додати власні функції або адаптувати під специфіку бізнесу майже неможливо. Наша команда має 7+ років досвіду в розробці веб-редакторів таблиць, реалізовано 20+ проєктів для фінансових та логістичних компаній. Ми будуємо систему з нуля під ваш сценарій — з віртуалізацією, формульним двигуном і спільною роботою. Вартість розробки базової версії — від $12,000, повноцінного редактора — від $45,000. Економія на ліцензіях порівняно з AG Grid Enterprise може досягати 40% (до $20,000 на рік), а середній період окупності — 6–9 місяців. Оцінимо проєкт за 1 день.

Як працює віртуалізація великих таблиць?

Таблиця зі 100 000 рядків не може рендерити всі DOM-елементи — браузер зависне. Рішення — віртуалізація: рендер лише видимих рядків з буфером. Використовуємо headless-бібліотеку TanStack Virtual для повного контролю рендерингу (підтримує 1M+ рядків) або AG Grid з готовою віртуалізацією та вбудованими формулами. Віртуалізація TanStack Virtual збільшує продуктивність у 50 разів порівняно з рендерингом усіх рядків. Наші інженери мають сертифікати з React, TypeScript та HyperFormula. У проєктах з високим навантаженням комбінуємо AG Grid з власним формульним двигуном — це дає стабільні 60 FPS навіть на мобільних пристроях.

Приклад реалізації віртуалізації рядків з TanStack Virtual:

const rowVirtualizer = useVirtualizer({ count: rows.length, getScrollElement: () => parentRef.current, estimateSize: () => 24, overscan: 10, }); 

Для порівняння можливостей популярних бібліотек:

Формульний двигун: від парсингу до перерахунку

Формули виду =SUM(A1:B10) * C5 + IF(D1>0, E1, 0) вимагають парсера та графа залежностей. Ми використовуємо HyperFormula — open-source двигун на TypeScript з підтримкою 400+ формул, сумісних з Excel. Він працює і в браузері, і на сервері, що дозволяє обчислювати важкі формули асинхронно. Dependency tracking в HyperFormula lazy: при зміні однієї комірки перераховується лише мінімальний набір залежних.

Чому CRDT краще OT для спільного редагування?

Operational Transformation (OT) вимагає центрального сервера та послідовної обробки — це створює затримки та складнощі при offline. CRDT (Conflict-free Replicated Data Types) дозволяють кожному клієнту працювати автономно, а потім зливати зміни без конфліктів. CRDT в 2–3 рази швидше за OT при синхронізації змін у реальному часі. У таблицях використовуємо Yjs з shared types: Y.Map для комірок. Докладніше про CRDT можна прочитати в Wikipedia.

const ydoc = new Y.Doc(); const cells = ydoc.getMap('cells'); const provider = new WebsocketProvider('ws://localhost:8080/spreadsheet-sync', 'spreadsheet-123', ydoc); 

При одночасній зміні однієї комірки двома користувачами застосовується Last Write Wins (LWW) на основі логічних годинників — дані не втрачаються.

Як додати кастомну формулу в редактор?

1. Створіть функцію-реалізацію на TypeScript, наприклад: const CUSTOM_FN = (a: number, b: number) => a * b;
2. Зареєструйте її в HyperFormula через HyperFormula.registerFunctionPlugin(MyPlugin);
3. В інтерфейсі додайте кнопку для вставки формули, яка викликає hf.setCellFormula(row, col, '=CUSTOM_FN(A1, B2)');
4. При перерахунку двигун автоматично викличе вашу функцію. Весь процес займає близько 2 годин.

Історія змін та undo/redo

Undo/redo реалізуємо через стек операцій. Кожна зміна (вставка тексту, зміна формули, форматування) записується як reversible-команда. Для спільного редагування важливо відрізняти свої дії від чужих — ми зберігаємо userId в метаданих. При 50+ одночасних користувачах час відповіді залишається нижче 50 мс.

Імпорт / Експорт XLSX: що всередині

• SheetJS (xlsx) — читає та пише XLSX, XLS, CSV. Під капотом парсить XML-архів, витягує комірки, форматування, формули (записує їх як рядки).
• ExcelJS — створює XLSX з розширеним форматуванням: об'єднання комірок, умовне форматування, зображення.

При імпорті формули з XLSX зберігаються в текстовому вигляді та передаються в HyperFormula для обчислення при першому показі.

Процес роботи: етапи та терміни

Що входить в роботу

Ми надаємо:

• Вихідний код редактора на TypeScript (React/Angular/Vue на вибір)
• Документація API для інтеграції
• Інструкція з деплою (Docker, Nginx)
• Навчання команди (до 5 годин)
• Підтримка на етапі впровадження (2 тижні)
• Гарантія на код протягом 3 місяців

Середній термін створення спеціалізованої таблиці з базовим функціоналом — 2–3 місяці. Повноцінний редактор із спільною роботою, імпортом XLSX та 200+ формулами — 6–10 місяців. Точну оцінку дамо після аналізу вашого кейсу.