Excel-подобный Spreadsheet на сайте: библиотеки, формулы, экспорт данных — задача, с которой мы работаем 5+ лет. Представьте: вы разрабатываете CRM, где нужно в реальном времени пересчитывать итоги по каждой строке, а пользователь копирует данные из Excel и вставляет в таблицу. Spreadsheet — один из самых сложных UI-компонентов: виртуализация строк, клавиатурная навигация, формулы, мёрж ячеек. Мы за 5 лет реализовали десятки таких проектов на React и Vue. В этой статье разберём, как выбрать готовую библиотеку и интегрировать её с формулами HyperFormula, чтобы получить полноценный Excel-опыт в браузере. Разработка spreadsheet с нуля может обойтись в $10 000–$30 000, а интеграция готового решения — от $1000. Экономия очевидна.
Преимущества готовых библиотек перед самописом
Самописный spreadsheet требует обработки сотен краевых случаев: IME-ввод, автофильтры, условное форматирование. Библиотеки вроде Handsontable и Fortune-Sheet уже прошли этот путь. Например, Handsontable содержит более 300 API-методов, а Fortune-Sheet — 200+ функций. Написать такое с нуля — 3–6 месяцев разработки. Интеграция готового решения занимает 2–3 дня. Кроме того, популярные библиотеки поддерживают виртуализацию: 10 000 строк рендерятся за 50 мс, что в 10 раз быстрее наивной реализации. Согласно документации Handsontable, коммерческая лицензия стоит от $149 в месяц, что окупается быстрее, чем разработка собственного решения.
Сравнение библиотек: какая подходит вашему проекту?
| Библиотека | Формулы | Условное форматирование | Графики | Совместное редактирование | Лицензия |
|---|---|---|---|---|---|
| Handsontable | Да (HyperFormula) | Да | Нет | Платный модуль | Платная для коммерции |
| Fortune-Sheet | Встроенные | Да | Да | Нет | MIT |
| TanStack Table | Нет | Нет | Нет | Нет | MIT |
Если нужны сложные формулы и интеграция с Excel, выбор — Handsontable + HyperFormula. Если проект с открытым кодом или бюджет ограничен — Fortune-Sheet даст 80% функциональности бесплатно.
| Функция | Handsontable | Fortune-Sheet |
|---|---|---|
| Поддержка формул | Через HyperFormula (386 функций) | Встроенные (базовые) |
| Условное форматирование | Да | Да |
| Импорт/экспорт XLSX | Через SheetJS | Встроенный |
| Виртуализация строк | Да | Да |
| Цена | $149/мес (коммерческая) | Бесплатно (MIT) |
Интеграция формул через HyperFormula
HyperFormula — движок формул от команды Handsontable с открытым исходным кодом (MIT). Он поддерживает 386 функций, включая VLOOKUP, SUMIF, DATE. Интеграция с Handsontable — два дня.
npm install hyperformula @handsontable/react @fortune-sheet/react xlsx import { HyperFormula } from 'hyperformula' import { HotTable } from '@handsontable/react' function SpreadsheetWithFormulas() { const hfInstance = HyperFormula.buildEmpty({ licenseKey: 'gpl-v3', }) return ( <HotTable formulas={{ engine: hfInstance, sheetName: 'Sheet1', }} data={[ ['Продукт', 'Кол-во', 'Цена', 'Сумма'], ['Товар А', 10, 150, '=B2*C2'], ['Товар Б', 5, 300, '=B3*C3'], ['', '', 'Итого:', '=SUM(D2:D3)'], ]} /> ) } Fortune-Sheet также поддерживает формулы из коробки:
npm install @fortune-sheet/react import { Workbook } from '@fortune-sheet/react' import '@fortune-sheet/react/dist/index.css' function FortuneSpreadsheet() { const [sheets, setSheets] = useState([ { name: 'Sheet1', celldata: [ { r: 0, c: 0, v: { v: 'Товар', m: 'Товар', ct: { fa: 'General', t: 'g' } } }, { r: 0, c: 1, v: { v: 'Цена', m: 'Цена', ct: { fa: 'General', t: 'g' } } }, { r: 1, c: 0, v: { v: 'Кофе', m: 'Кофе' } }, { r: 1, c: 1, v: { v: 250, m: '250', ct: { fa: '#,##0.00', t: 'n' } } }, ], row: 100, column: 26, }, ]) return ( <div style={{ height: '600px' }}> <Workbook data={sheets} onChange={setSheets} showFormulaBar={true} showToolbar={true} lang="ru" /> </div> ) } Экспорт данных в Excel через SheetJS
Используем библиотеку SheetJS (xlsx). Функция экспорта для Handsontable:
import * as XLSX from 'xlsx' function exportToExcel(hot: Handsontable) { const data = hot.getData() const headers = hot.getColHeader() as string[] const ws = XLSX.utils.aoa_to_sheet([headers, ...data]) ws['!cols'] = headers.map(() => ({ wch: 20 })) const wb = XLSX.utils.book_new() XLSX.utils.book_append_sheet(wb, ws, 'Данные') XLSX.writeFile(wb, `export-${new Date().toISOString().slice(0,10)}.xlsx`) } Что входит в реализацию
- Анализ требований: формулы, типы данных, лицензионные ограничения (1 день).
- Подбор библиотеки и настройка колонок с валидацией (0.5 дня).
- Интеграция формул HyperFormula или встроенных (2–3 дня).
- Импорт/экспорт XLSX через SheetJS (1 день).
- Разработка API для сохранения данных. Документация и обучение команды.
Дополнительные настройки для виртуализации
Для таблиц с 10 000+ строк обязательно включайте виртуализацию. Handsontable и Fortune-Sheet поддерживают её из коробки, но может потребоваться настройка viewport и renderAllRows: false. Это ускоряет рендеринг в 5–10 раз.
Когда выбирать Virtual Scroll?
Для таблиц с 10 000+ строк обязательно используйте виртуализацию. Handsontable и Fortune-Sheet поддерживают её из коробки, но может потребоваться настройка viewport и renderAllRows: false. Это ускоряет рендеринг в 5–10 раз.
Срок: базовая редактируемая таблица без формул — 2–3 дня. Полноценный spreadsheet с формулами и XLSX — 5–7 дней. Оценка точного объёма работ — индивидуально.
Стоимость и выбор решения
Коммерческая лицензия Handsontable обходится от 149 USD в месяц — это лучше, чем вкладывать 3–6 месяцев в самописный компонент с теми же возможностями. Fortune-Sheet (MIT) не требует лицензионных выплат и подходит для стартапов или внутренних инструментов с ограниченным бюджетом. Интеграция готовой библиотеки вместо разработки с нуля экономит от 100 000 рублей на старте. Для корпоративного проекта с формулами, 10 000+ строками и Excel-совместимостью — Handsontable с HyperFormula закрывает задачу за 5–7 дней. Для простого редактируемого реестра — Fortune-Sheet сократит бюджет на 50–70%.
Получите консультацию по вашему проекту — свяжитесь с нами. Мы поможем выбрать оптимальное решение и внедрим его в срок. Оставьте заявку на демо, чтобы увидеть готовое решение в действии.