При отображении таблицы на веб-сайте имейте в виду, что многие будут просматривать ее на мобильных устройствах. Итак, таблица должна хорошо смотреться на настольном компьютере и на маленьком экране.

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

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

В этом посте перечислены 34 лучших библиотеки таблиц данных JavaScript 2021 года. Использование этого списка может сэкономить веб-разработчикам много времени.

Критерии

Во-первых, полезно просмотреть критерии, которым должны соответствовать библиотеки таблиц данных JavaScript. Критерии состоят из четырех категорий.

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

Библиотека должна иметь надежную документацию. Это должно показать, как оно было построено, и позволить другим реконструировать его.

Настраиваемость.

Настраиваемая библиотека лучше и полезнее для пользователей. Он должен позволять пользователю добавлять или удалять функции.

Совместимость.

JavaScripts используются во многих различных браузерах и устройствах. Итак, чтобы быть максимально полезной, библиотека должна работать на самых разных устройствах.

Пользовательский опыт.

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

Соответствует ли плагин стилю продукта? Это важно для таких библиотек, как библиотеки выбора даты.

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 может сделать это за вас. Есть веская причина, по которой это плагин WordPress №1 для создания адаптивных таблиц и диаграмм.

Фактический пример wpDataTables в дикой природе

И очень легко сделать что-то вроде этого:

Вы предоставляете данные таблицы
Настройте и настройте его
Опубликовать в посте или на странице

И это не только красиво, но и практично. Вы можете создавать большие таблицы, содержащие до миллионов строк, или вы можете использовать расширенные фильтры и поиск, или вы можете сделать их редактируемыми.

«Да, но я просто слишком люблю Excel, и на веб-сайтах нет ничего подобного». Да, есть. Вы можете использовать условное форматирование, как в Excel или Google Sheets.

Я говорил вам, что вы тоже можете создавать диаграммы с вашими данными? И это только малая часть. Есть много других функций для вас.

Расширенная JS-сетка

Это профессиональная высокопроизводительная библиотека для создания мобильных и веб- приложений. Он содержит необходимые фреймворки, инструменты и инструменты пользовательского интерфейса для их создания.

Компоненты позволяют разработчикам добавлять в приложения надежные инструменты анализа. Он хорошо интегрируется с другими инструментами таблиц данных JavaScript для создания лучших таблиц.

Среди его многочисленных особенностей:

Индивидуальные макеты
Перетаскивание
Детализация
Редактирование
Фильтрация
Группировка
Бесконечная прокрутка
Потоковая передача данных в реальном времени
Блокировка
Поворот
Темы
Визуализация

Облегченный компонент таблицы данных Vanilla

Облегченный компонент Vanilla Data Table Component имеет небольшой размер и совместим с Bootstrap. Для работы не требуется другое программное обеспечение. Он хорошо работает с большими источниками данных.

Некоторые расширенные функции:

Редактирование
Фильтрация
Заказ
Пагинация

вебикс

Следующим плагином сетки данных является webix. Он хорошо работает как со сложными, так и с простыми таблицами.

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

Расширенные функции включают в себя:

Группировка сетки
Меню заголовка
Rowspan и colspan
Спарклайны
Подстроки и подпредставления.
Вертикальные заголовки

Таблица короля jQuery

Эта библиотека JQuery JavaScript помогает создавать административные таблицы. Он поддерживает таблицы, которые зависят от ввода данных.

Плагин JQuery имеет несколько интересных функций:

Автоматическое скрытие меню
Поиск на стороне клиента и сервера
Пользовательские фильтры
Пользовательские инструменты
Пагинация на стороне сервера
Поддерживает JSON, XML и CSV.

Телерик

Telerik — компания, стоящая за разработкой JS-фреймворка Kendo UI.

Это коммерческий продукт, предназначенный для веб-приложений, нативных и гибридных приложений. Он работает с различными виджетами и поддерживает MVC, .NET и PHP.

Вот некоторые из сетевых решений, которые он предлагает:

Сетка
Планировщик
Электронная таблица
Сетка дерева

Backgrid.js

Backgrid.js помогает пользователям создавать сетки данных и стилизовать их. Он небольшой, полностью адаптивный и предлагает множество модулей.

Это позволяет пользователю редактировать, сортировать и отображать данные логичным и привлекательным способом. Помимо стандартной функции, он позволяет создавать настраиваемые API.

Его легкость делает его очень адаптируемым и реактивным. Тем не менее, основные элементы помогают сделать данные редактируемыми и отображаемыми.

Реагировать-Таблица

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.

Кроме того, он добавляет такие функции, как расширяемая и заменяемая нумерация страниц. Существует также возможность добавления кнопок в ряды.

Реагировать на DataGrid

Некоторые из функций React DataGrid включают в себя:

Пагинация клиента
Иерархические сетки
Нижние колонтитулы
Сводные фильтры

С его помощью пользователи могут определить, какие ячейки редактируются, а какие нет. Они также могут выбрать, какой цвет они будут иметь.

Это позволяет зрителю выбирать определенные строки. Он даже предлагает анимацию и поддержку Lazy Load.

Функция экспорта очень универсальна. Он создает файлы Excel, Text, Word или XML.

Handsontable

Установка и использование Handsontable просты. Структура и использование этой библиотеки очень похожи на Excel, что упрощает работу со столбцами и строками.

API очень полный. Исходный код является открытым и настраиваемым для удовлетворения любых особых требований.

Доступны плагины для расширения опций, которые Handsontable предлагает в стандартной комплектации.

Набор данных

Набор данных помогает людям организовывать и публиковать табличные данные.

Неважно, в какой форме или форме поступают данные, Dataset может превратить их в веб-сайт и 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. Он особенно подходит для представления больших объемов данных.

Он отображает данные аналогично настольным корпоративным приложениям.

КендоReact

Этот профессиональный пакет пользовательского интерфейса помогает компаниям создавать грид-приложения с помощью React. Все компоненты пользовательского интерфейса оптимизированы для React и не имеют зависимостей.

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

KendoReact имеет два режима: неконтролируемый и регулируемый. В неконтролируемом режиме пользователь может экспортировать данные в виде файла Excel или PDF.

DevExtreme

DevExtreme — отличная сеточная библиотека. Эта библиотека предназначена для создания адаптивных таблиц для компьютеров и устройств с сенсорным экраном.

Помимо всего прочего, он помогает сделать красивым:

Редакторы данных
Сетки данных
Интерактивные графики
Навигация и многоцелевые виджеты

DevExtreme работает с популярными фреймворками, такими как Angular, ASP.NET, MVC и React.

EmberTable.js

Основное преимущество EmberTable.js заключается в том, что он отображает только те строки, которые пользователь выбирает для отображения. Это означает, что он очень хорошо справляется с большими объемами данных, вплоть до миллионов строк.

EmberTable.js использует Ember, а его API прост и удобен в настройке. Он также содержит отложенный рендеринг.

EmberTable предлагает несколько важных функций:

Изменение порядка столбцов
Изменение размера столбца
Настраиваемый
Простая конфигурация
Расширяемый

SlickGrid

JavaScript SlickGrid полностью открыт. Это клиентская библиотека управления сеткой данных, содержащая компоненты JQuery.

Он совместим с платформами, ориентированными на данные, и с Bootstrap. Он использует данные JSON и внешние компоненты для настройки своих источников данных.

ngx-данные

ngx-datatable — это компонент Angular. Разработчики сделали его способным обрабатывать огромные объемы сложных данных.

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

Таким образом, он очень легкий и адаптируемый.

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

AnyGrid

AnyGrids — это библиотека сетки данных, в основе которой лежит ваниль. Он работает быстро и легко и обрабатывает данные из следующих источников:

AJAX-данные
Массивы JavaScript
JSON-данные

Для пользователя есть два варианта: тег script и установка пакета npm. С этими установками и дополнительными компонентами это полезно для любого проекта.

AnyGrids предлагает следующие функции и многое другое:

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

Угловая сетка пользовательского интерфейса

Angular UI Grid является частью пакета, основанного на родном AngularJS. Он хорошо обрабатывает большие объемы информации с более чем 10 000 строк.

Его дизайн гарантирует, что пользователям нужно использовать только те компоненты, которые имеют отношение к ним. Это делает его легким и удобным в обращении.

Angular UI Grid предлагает все обычные функции. Это включает:

Фильтрация
Тестирование интеграции
Взаимодействие
Сортировка

Легко редактируемая сетка данных с ванильным JavaScript — GridEdit

GridEdit небольшой и позволяет пользователям легко создавать редактируемые сетки данных и электронные таблицы. Простой двойной щелчок позволяет редактировать ячейку.

Кластеризовать

Этот плагин Vanilla JavaScript является последним в списке библиотек сетки данных.

У него нет проблем с обработкой больших объемов данных. Собственно, это и есть цель его конструкции.

Таким образом, это помогает пользователям создавать гладкие веб-страницы.

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

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

Заканчивая мысли об этих библиотеках таблиц данных JavaScript

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

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

Все перечисленные выше примеры отлично справятся с созданием таблиц JavaScript. Некоторые немного более продвинуты; другие сосредотачиваются на том, чтобы быть легкими и простыми.

Это лучшие и самые популярные доступные библиотеки. Используйте их для создания красивых таблиц из существующих данных, обрабатывая и систематизируя их.

Если вам понравилось читать эту статью о библиотеках таблиц данных JavaScript, вы должны прочитать эту статью о том, как создать таблицу данных.

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

Источник записи: wpdatatables.com