Для генерации и работы с таблицами на сайте существует несколько библиотек. Почти все они частично бесплатные, т. е. могут быть использованы как бесплатно, так и платно. Платные версии, разумеется, обладают намного большим функционалом.  Я выделил 4 фреймворка для работы с таблицами, которые лично мне понравились. Их безусловно больше. Мой выбор остановился на фреймворках Ag-grid, FancyGrid, HandSontable и Koolgrid. Эти фреймворки не только отображают таблицы (только для отображения можно использовать кучу бесплатных библиотек), но и позволяют редактировать данные на странице. Рассмотрим их.

Ag-grid

Ag-grid - мощный инструмент для серьезных решений. Поддерживает фреймворки Angular 1, Angular2, Aurelia, React, VueJs, Web Components, но может быть использован с обычным javascript без подключения фреймворков. Бесплатная версия очень слаба по сравнению с платной, но много интересного в ней есть.

Установка пакета через npm с помощью команды:

npm install ag-grid

Подключение описано в файле aggrid.html:

 

 

Загрузка данных и вывод в файле aggrid-example.js

 

 

Рис.1. Таблица с использованием ag-grid

Рис.1. Таблица с использованием ag-grid

 

FancyGrid

FancyGrid – JavaScript-библиотека для рендеринга таблиц с функцией построения графиков и обменом данными с сервером. Есть плагины для AngularJS и jQuery. Бесплатная версия, а точнее триальная – это издевательство. В правом углу ниже таблицы будет огромная ссылка на сайт автора, а в консоли разработчика будет красоваться надпись "FancyGrid Trial Version! Purchase license for legal usage! Sales email: sales@fancygrid.com".

Установка:

npm install fancygrid

Использование:

Подключение плагина:

 

 

Вывод данных:

 

 

Рис.2. Вид бесплатной FancyGrid

Рис.2. Вид бесплатной FancyGrid

 

HandSontable

Установка:

npm install handsontable

или загрузите архив со страницы https://handsontable.com/community-download

HandSontable представляет собой инструмент для создания Excel-подобных таблиц. Есть версии для Polymer и AngularJS.

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

Код примера применения HandSontable

 

 

Вывод данных с помощью HandSontable

Вывод данных с помощью HandSontable

Koolgrid

Koolgrid (https://www.koolchart.com/koolgrid/) не имеет бесплатной версии, но упомянуть о нем стоит. Очень мощный инструмент для работы с таблицами в веб-интерфейсе. Подойдет для реализации сложных табличных интерфейсов. Стоимость решения от 100$ в зависимости от лицензии.