В период моей работы фронтенд-разработчиком в компании, была поставлена задача создать внутренний веб-аналог Excel, чтобы пользователи перенесли всю работу в веб-приложение.

Первым шагом стал поиск подходящей JavaScript-библиотеки для табличного редактора. Выбор пал на Hansontable за многофункциональность, простоту подключения и за легкую кастомизацию. В общем, на работе задача была выполнена, приложение отвечающее потребностям узкого круга пользователей было создано.

Но мой личный интерес был удовлетворен не полностью, и я решил написать более универсальное приложение до известных пределов - альтернативу Google таблиц и Excel, где будет самый важный функционал из Google таблиц и Excel: это формулы, условное форматирование, построение графиков и тд. К такому приложению можно будет дописать любой бэкенд. Также такое приложение можно будет кастомно интегрировать в другое приложение, где необходим функциональный редактор наподобие Google таблиц и Excel.

В качестве стека я выбрал Vue3 и TypeScript, а в качестве табличного редактора – проверенный Handsontable.

Работа с формулами

В качестве работы с формулами взял js библиотеку HyperFormula, которая повторяет более 400 формул, доступных в Excel и Google Таблицах. Чтобы предотвратить зависание приложения при подсчете тысяч строк, я применил распределение вычислений по worker'ам. При этом основной поток мгновенно рассчитывает только 50-60 строк, отображаемых в текущем видимом окне.

Условное форматирование

Функционал условного форматирования был вдохновлен Google Таблицами, но с некоторыми адаптациями. Поскольку столбцы имеют "строгую типизацию", выбор правил форматирования ограничен теми, которые соответствуют типу данных столбца. Благодаря виртуальному скроллингу Handsontable, отрисовка происходит только для видимых строк плюс примерно 10 строк вверх и вниз, что позволяет избежать зависания приложения."

Графики

Для работы с графиками я использовал библиотеку Chart.js. Функционал построения диаграмм был также вдохновлен Google Таблицами, но с некоторыми изменениями. Диапазон данных по горизонтали определяется добавлением столбцов в окно с меткой "использовать данные столбцов...", а по вертикали – выделением строк в таблице.