Відображаючи таблицю на веб-сайті, майте на увазі, що багато хто переглядатиме її на мобільному пристрої. Отже, стіл повинен добре виглядати на стаціонарному комп’ютері та на маленькому екрані.

На перший погляд публікація таблиці може здатися легкою і навряд чи варто думати про це. Тоді цікаво, що існує безліч доступних бібліотек таблиць даних JavaScript.

Здається, існує великий попит на інструменти, які допомагають публікувати адаптивні таблиці. Пошук у Google показує, що розробникам доступно 10 000 бібліотек JavaScript.

У цій публікації перелічено 34 найкращі бібліотеки таблиць даних JavaScript 2021 року. Використання цього списку може заощадити веб-розробникам багато часу.

Критерії

По-перше, добре переглянути критерії, яким мають відповідати бібліотеки таблиць даних JavaScript. Критерії складаються з чотирьох категорій.

Документація.

Бібліотека повинна мати надійну документацію. Це повинно показати, як він був побудований, і дозволити іншим реконструювати його.

Настроюваність.

Настроювана бібліотека є кращою та кориснішою для користувачів. Це має дозволяти користувачеві додавати або видаляти функції.

Сумісність.

JavaScript використовується в багатьох різних браузерах і пристроях. Отже, щоб бути максимально корисною, бібліотека повинна працювати на різноманітних пристроях.

Взаємодія з користувачем.

Він повинен не тільки працювати, але і бути зручним для користувача.

Чи відповідає плагін стилю продукту? Це важливо для таких бібліотек, як бібліотеки вибору дати.

34 найкращі бібліотеки таблиць даних JavaScript

Можна сортувати

Sortable надзвичайно малий і не залежить від інших бібліотек. Він займає менше 2 Кб.

Він має відкритий код і використовує JavaScript і CSS. Він додає функції сортування до таблиць і поставляється з шістьма красивими темами.

Крім того, що він невеликий і автономний, він гарантує, що таблиці реагують. Він швидкий і простий у використанні.

сітка аг

Наступний вибір — це ag-Grid, який є професійною сіткою даних JavaScript.

Він підтримує багато найбільш використовуваних фреймворків JavaScript. Наприклад, він підтримує Angular 1 і 2, Vue.js і React.

Сітка даних дозволяє користувачеві фільтрувати, закріплювати, редагувати, групувати, вибирати та змінювати розмір табличних даних. Деякі з його унікальних функцій включають:

Створіть заголовки
Редагувати клітинки
Створення шаблонів клітинок
Виконайте стилізацію клітинок і візуалізацію

React-віртуалізовано

React-virtualized — це бібліотека таблиць даних JavaScript, яка найкраще працює для великих наборів даних. Він швидко відображає великі списки та табличні дані.

Це безкоштовно та є одним із найкращих доступних варіантів. Він уже отримав понад 22 000 зірок на Github.

Іншими функціями є повна документація та велика спільнота, яка надає підтримку.

W2Ui

W2UI — це сучасна й актуальна бібліотека JavaScript інтерфейсу користувача, яка підтримується HTML5 і CSS3. Він спрямований на використання інтерфейсними розробниками для насичених веб-програм на основі даних.

Це повне рішення, яке містить деякі основні віджети інтерфейсу користувача, наприклад:

Вискочити
Макет
Вкладки
Бічна панель
Панель інструментів
Сітка
Форми
Поле керування

Хочете створити таблиці даних у WordPress?

wpDataTables може зробити це за вас. Є вагома причина, чому це плагін №1 WordPress для створення адаптивних таблиць і діаграм.

Фактичний приклад wpDataTables у дикій природі

І це дуже легко зробити щось подібне:

Ви надаєте дані таблиці
Налаштуйте та налаштуйте його
Опублікуйте його в публікації або на сторінці

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

«Так, але мені дуже подобається Excel, і на веб-сайтах нічого подібного немає». Так, є. Ви можете використовувати умовне форматування, як у Excel або Google Таблицях.

Чи я казав вам, що ви також можете створювати діаграми зі своїми даними? І це лише мала частина. Для вас є багато інших функцій.

Ext JS Grid

Це професійна високопродуктивна бібліотека для створення мобільних і веб- додатків. Він містить необхідні фреймворки, інструменти та засоби інтерфейсу користувача для їх створення.

Компоненти дозволяють розробникам додавати надійні інструменти аналізу до програм. Він добре інтегрується з іншими інструментами таблиць даних JavaScript, щоб створювати найкращі таблиці.

Серед багатьох його особливостей:

Індивідуальні макети
Перетягнути і кинути
Пробурити
Редагування
Фільтрування
Групування
Нескінченна прокрутка
Пряма трансляція даних
Блокування
Поворотний
Теми
Візуалізація

Легкий компонент таблиці даних Vanilla

Легкий компонент Vanilla Data Table Component невеликий і сумісний із Bootstrap. Для роботи не потрібне інше програмне забезпечення. Він добре працює з великими джерелами даних.

Деякі додаткові функції:

Редагування
Фільтрування
Замовлення
Пагінація

webix

Наступним плагіном сітки даних є webix. Він добре працює як зі складними, так і з простими таблицями.

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

Розширені функції включають:

Групування сітки
Меню заголовка
Розмах рядків і розмах рядів
Спарклайни
Підрядки та підвиди.
Вертикальні заголовки

jQuery King Table

Ця бібліотека JavaScript JQuery допомагає створювати адміністративні таблиці. Він підтримує таблиці, які залежать від введення даних.

Плагін JQuery має кілька цікавих функцій:

Автоматичне приховування меню
Пошук на стороні клієнта та сервера
Настроювані перегляди фільтрів
Індивідуальні інструменти
Пагінація на стороні сервера
Підтримує JSON, XML і CSV.

Телерик

Telerik — це компанія, яка розробила фреймворк Kendo UI JS.

Це комерційний продукт, призначений для веб-, нативних і гібридних програм. Він працює з різними віджетами та підтримує MVC, .NET і PHP.

Деякі з мережевих рішень, які він пропонує:

Сітка
Планувальник
Електронна таблиця
Сітка дерева

Backgrid.js

Backgrid.js допомагає користувачам створювати сітки даних і стилізувати їх. Він невеликий, повністю адаптивний і пропонує різноманітні модулі.

Це дозволяє користувачеві редагувати, сортувати та відображати дані в логічний і привабливий спосіб. Окрім стандартної функції, він дозволяє створювати індивідуальні API.

Його легкість робить його дуже адаптивним і реактивним. Тим не менш, основні елементи допомагають зробити дані доступними для редагування та відображення.

React-Table

React-Table — дуже популярна бібліотека JavaScript для створення таблиць даних. За час, поки він був доступний через Github, він зібрав понад 14 500 зірок.

Навіть великі компанії, такі як Amazon, Intuit і Google, використовують його.

Ця бібліотека, яка також підтримує хуки, часто оновлюється та вдосконалюється. Незважаючи на те, що він невеликий, він пропонує всі найбільш часто використовувані функції для створення таблиць.

Документація повна і містить багато практичних прикладів.

Sheetsee.js

Sheetsee.js підключає Google Таблиці до веб-сайту для візуалізації таблиць та інших діаграм на основі даних. Це клієнтська бібліотека JavaScript.

jQWidgetS

Це 100% фреймворк бібліотеки JQuery JavaScript для створення адаптивних веб- та мобільних додатків. Він використовує лише відкриті стандарти та технології, такі як CSS і HTML5.

Він демонструє чудову сумісність із Angular, KnockoutJS, Typescript та різними серверними технологіями.

PrimeNG

Це бібліотека різних компонентів інтерфейсу користувача для Angular. Усі елементи є відкритими та вільними для використання будь-ким, як це визначено ліцензією MIT.

Набір інструментів полегшує роботу з великими та складними наборами даних.

Сковорідка

Бібліотека Griddle для React дуже настроюється. Це більше, ніж упорядковувати набір даних у сітці.

Він пропонує можливість налаштування та можливість додавання плагінів. Це робить його універсальним інструментом для відтворення списків даних.

Базова версія містить усі загальні функції та умовності.

Vuetable

Vuetable — це більше, ніж таблиця даних. Його основним компонентом є Vue.js, який запитує дані JSON із сервера.

Потім він відображає інформацію як таблицю HTML.

Крім того, він додає такі функції, як розширювана та замінювана пагінація. Також є можливість додавати кнопки до рядків.

React DataGrid

Деякі з функцій React DataGrid включають:

Пагінація клієнта
Ієрархічні сітки
Вбудовані колонтитули
Підсумкові фільтри

За допомогою нього користувачі можуть визначати, які клітинки можна редагувати, а які ні. Вони також можуть вибрати колір, який вони матимуть.

Це дозволяє глядачеві вибирати певні рядки. Він навіть пропонує анімацію та підтримку Lazy Load.

Функція експорту дуже різноманітна. Він створює файли Excel, Text, Word або XML.

Handsontable

Встановлення та використання Handsontable прості. Розмітка та використання цієї бібліотеки дуже схожі на Excel, що спрощує роботу зі стовпцями та рядками.

API дуже повний. Вихідний код відкритий і налаштовується відповідно до будь-яких особливих вимог.

Існують плагіни для розширення опцій, які Handsontable пропонує як стандарт.

Набір даних

Dataset допомагає людям упорядковувати та публікувати табличні дані.

Не має значення, у якій формі надходять дані, Datasette може перетворити їх на веб-сайт і API. Результатом є інтерактивні таблиці, які можна переглядати.

Це хороший варіант для тих, кому потрібно працювати з великими обсягами інформації. Наприклад, журналісти, куратори, органи місцевого самоврядування та архівісти.

Фантазійна сітка

Це серверна бібліотека сітки даних JavaScript, яка також може створювати діаграми. Він підтримує багато найважливіших фреймворків, наприклад:

Кутовий 1
Кутовий 2
jQuery
VueJS
Веб-компоненти.

Fancy Grid має систему розумних модулів. Він визначає, що потрібно, і завантажує відповідний модуль.

Крім того, він пропонує деякі унікальні функції, такі як:

Дані Ajax
Гнучкий CRUD
Фільтрування
пейджінг
Сортування

DGrid

DGrid — це новий хлопець. Це сіткова бібліотека JavaScript із новим підходом до використання поточних можливостей браузера та сховищ об’єктів.

Водночас він невеликий, модульний і дозволяє додавати розширення. DGrid доступний за ліцензією з відкритим вихідним кодом, що робить його вільним для використання та модифікації.

jsGrid

Це плагін JQuery, який клієнт може встановити самостійно. Ця легка бібліотека здатна виконувати кілька поширених операцій у сітці.

jsGrid є гнучким, і користувач може налаштувати компоненти та зовнішній вигляд. Він видаляє, редагує, фільтрує, вставляє, розбиває на сторінки та сортує.

Варто зазначити, що функція розбиття на сторінки працює як на стороні сервера, так і на стороні клієнтів. Користувачі можуть надавати клітинкам різні типи, наприклад, прапорці, числа, виділення та текст.

Компонент таблиці Vuetify

Vuetify Table Component — ідеальний інструмент для розробки веб- та мобільних додатків. Важливо зазначити, що Vuetify підтримує таблиці даних.

Оскільки це платформа Material Design Framework, з нею легко працювати, і всі її компоненти готові до використання. Існує достатньо документації для підтримки розробників, які працюють із цією бібліотекою.

Також є велика спільнота, яка допомагає вирішити конкретні проблеми. Vuetify пропонує такі функції:

Вбудоване редагування
Пагінація
Пошук
Підтримка сортування
І набагато більше

Електронна таблиця jExcel

Ця бібліотека Vanilla виглядає чудово та забезпечує найкращі операції CRUD. Він працює таким чином, що нагадує Excel.

З ним легко працювати та пропонує знайому функцію перетягування.

Електронну таблицю jExcel можна налаштувати. Таблиці, які він виробляє, багаті функціональними можливостями.

Він дозволяє користувачеві виконувати всі стандартні операції. Додаткові функції:

Пагінація
Зміна розміру кількох стовпців
Статичні елементи HTML
Об’єднання колонок

Таблиця даних матеріального дизайну

Ця бібліотека таблиць даних JavaScript поєднує в собі Angular Material і Material Design. Він особливо підходить для представлення великих обсягів даних.

Він показує дані подібно до настільних корпоративних програм.

KendoReact

Цей професійний пакет інтерфейсу користувача допомагає компаніям створювати грід-додатки за допомогою React. Усі компоненти інтерфейсу користувача оптимізовані для React і не мають жодних залежностей.

KendoReact дозволяє користувачам редагувати, групувати, фільтрувати, змінювати розмір і порядок табличних даних. Це чудовий варіант для отримання огляду інформації та тенденцій.

KendoReact має два режими: неконтрольований і регульований. У неконтрольованому режимі користувач може експортувати дані як файл Excel або PDF.

DevExtreme

DevExtreme — чудова бібліотека сіток. Ця бібліотека призначена для створення адаптивних таблиць для комп’ютерів і пристроїв із сенсорним екраном.

Зробити красивим, крім іншого, допомагає:

Редактори даних
Сітки даних
Інтерактивні діаграми
Навігація та багатоцільові віджети

DevExtreme працює з популярними фреймворками, такими як Angular, ASP.NET, MVC і React.

EmberTable.js

Основною перевагою EmberTable.js є те, що він відображає лише ті рядки, які користувач вибирає для відображення. Це означає, що він дуже добре обробляє великі обсяги даних, навіть до мільйонів рядків.

EmberTable.js використовує Ember, а API простий і легко налаштовується. Він також містить Lazy Rendering.

EmberTable пропонує деякі важливі функції:

Перевпорядкування стовпців
Зміна розміру стовпця
Можливість налаштування
Легка конфігурація
Розширюється

SlickGrid

JavaScript SlickGrid є повністю відкритим кодом. Це клієнтська бібліотека керування сіткою даних, яка містить компоненти JQuery.

Він сумісний із фреймворками, орієнтованими на дані, і з Bootstrap. Він використовує дані JSON і зовнішні компоненти для налаштування своїх джерел даних.

ngx-datatable

ngx-datatable є компонентом Angular. Розробники створили його для обробки величезних обсягів складних даних.

Він невеликий і не залежить від зовнішніх компонентів. Проте він має всі функції, необхідні для відтворення таблиць.

Таким чином, він дуже легкий і адаптований.

Це дозволяє користувачеві створювати те, що вони хочуть, і не вимагає жодних деталей макіяжу. Користувач сам може сортувати, фільтрувати та розбивати його на сторінки.

AnyGrids

AnyGrids — це бібліотека сітки даних, яка використовує в основі Vanilla. Він працює швидко та легко та обробляє дані з таких джерел:

Дані AJAX
Масиви JavaScript
дані JSON

Є два варіанти для користувача: тег сценарію та встановлення пакета npm. Завдяки цим інсталяціям і додатковим компонентам це стане в нагоді для будь-якого проекту.

AnyGrids пропонує такі функції та багато іншого:

Обчислення колонок
Візуалізація власних даних
Спеціальні спарклайни (смуга, лінійний, круговий)
Фільтрація даних
Групування даних
Пагінація
Сортування
Використовуйте теми пакетів

Кутова сітка інтерфейсу користувача

Angular UI Grid є частиною набору на основі рідного AngularJS. Він добре обробляє великі обсяги інформації з понад 10 000 рядків.

Його дизайн гарантує, що користувачам потрібно використовувати лише ті компоненти, які їм потрібні. Це робить його легким і простим у використанні.

Angular UI Grid пропонує всі звичайні функції. До них належать:

Фільтрування
Тестування інтеграції
Взаємодія
Сортування

Легко редагована сітка даних із Vanilla JavaScript – GridEdit

GridEdit невеликий і дозволяє користувачам легко створювати сітки даних і електронні таблиці, які можна редагувати. Просте подвійне клацання дозволяє редагувати клітинку.

Кластеризувати

Цей плагін Vanilla JavaScript є останнім у списку бібліотек сітки даних.

Він не має проблем з обробкою великих обсягів даних. Власне, це і є мета його конструкції.

Таким чином, це допомагає користувачам створювати плавні веб-сторінки.

Він спрямований на те, щоб об’єктна модель документа була чистою та незавантаженою від усіляких невикористаних тегів. Він ділить списки на менші кластери та показує елементи для позицій прокручування.

Він додає кілька додаткових рядків як у верхній, так і в нижній частині, щоб імітувати повний розмір таблиці. Він повністю чуйний і підтримує всі поширені браузери та портативні пристрої.

Завершення роздумів про ці бібліотеки таблиць даних JavaScript

Сітки даних залишаються чудовим способом представлення даних. Не дивно, що вони широко використовуються на веб-сайтах та в інших програмах.

Отже, коли є можливість упорядкувати дані в рядки та стовпці, це розумно робити.

Усі наведені вище приклади відмінно підійдуть для створення таблиць JavaScript. Деякі з них трохи просунутіші; інші зосереджені на легкості та простоті.

Це найкращі та найпопулярніші доступні бібліотеки. Використовуйте їх, щоб створювати красиві таблиці з існуючих даних, обробляючи та впорядковуючи їх.

Якщо вам сподобалося читати цю статтю про бібліотеки таблиць даних JavaScript, ви повинні переглянути цю статтю про те, як створити таблицю даних.

Ми також писали про кілька пов’язаних тем, як-от альтернатива DataTables, бібліотека таблиць JavaScript, плагіни таблиць WordPress, як створити таблицю в WordPress без плагіна, як вставити таблицю в WordPress , плагіни таблиць цін WordPress і як створити статистичні таблиці у WordPress.

Джерело запису: wpdatatables.com