JavaScript UI виджет DataTable

DataTable (или DataGrid) - это мощный JavaScript виджет для табличных данных, разработанный с инновационным подходом к разработке веб-компонентов для больших данных.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Примеры интеграции с PHP, Node.js и .NET
  • Поддержка всех современных браузеров
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Редактируйте данные

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

Щелкните по любой ячейке, чтобы отредактировать значение в ней

Сортируйте данные

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

Щелкните по заголовку любой колонки, чтобы отсортировать данные в таблице

Фильтруйте данные

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

Валидация

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

Заполните пустые ячейки

Пейджинг

Если вы планируете загружать в DataTable большие данные, можно разбить таблицу на несколько страниц. Легко настраиваемые кнопки с номерами страниц и стрелками помогают с легкостью переходить между страницами.

Нажмите на кнопки, чтобы просмотреть другие страницы таблицы

Сохраняйте текущее состояние Data Table

Благодаря этому свойству, вы сможете хранить состояние DataTable в cookie-файлах, локальном или сессионном хранилище и затем восстанавливать его после обновления страницы. Информация обо всех действиях над данными в виджете будет сохраняться, благодаря чему пользователи не потеряют текущее состояние DataTable.

Измените состояние таблицы (измените ширину столбцов, примените фильтр, отсортируйте строки, покажите или спрячьте колонки) и затем обновите страницу

Drag-n-drop строк

Вы можете изменить порядок строк, перетаскивая их. Режим 'order' определяет возможность менять порядок строк в пределах одной таблицы. Если у вас на странице две таблицы, вы можете перетаскивать строки из одной таблицы в другую, в то время как номера строк первой таблицы изменятся соответственно. Дополнительная настройка позволит вам запретить перетаскивание отдельных строк, перетаскивание любых строк в определенные позиции в таблице и т.д.

Перетащите любую строку из одной таблицы в другую

Drag-n-drop колонок

Вы можете разрешить перетаскивание колонок в JavaScript таблице. В режиме 'order' вы сможете менять порядок строк в пределах одной таблицы.

Нажмите на хедер и удерживайте его, чтобы перетащить колонку

Работа с буфером обмена

Вы можете копировать данные из этого виджета в буфер обмена и вставлять их в другие виджеты или HTML-контейнеры. Работа с буфером обмена поддерживается во всех современных браузерах, включая Firefox, Opera, Chrome и Safari. Кроме того, вы можете копировать данные из DataTable в Excel-документ.

Используйте сочетания клавиш 'Ctrl+C' и 'Ctrl+V' для копирования и вставки содержимого ячеек

Изменяйте размеры колонок и строк

Вы можете изменять размеры колонок и строк, перетаскивая вертикальные или горизонтальные границы ячеек.

Наведите курсор на любую границу, затем перетащите ее

Фиксируйте строки и колонки

Вы можете создать DataTable с фиксированными колонками и строками, которые не будут перемещаться при прокрутке.

Прокрутите таблицу вправо

TreeTable

Разновидность виджета DataTable может отображать древовидные структуры данных подобно компоненту Tree. Виджет TreeTable позволяет создавать неограниченное число поддеревьев. Вы можете фильтровать данные в таких структурах по всему дереву или на конкретном уровне.

Выделение блоков ячеек

Кроме выделения ячейки, строки и колонки, вы можете выделять блоки ячеек. Кликните по первой ячейке из нужной вам области и протащите зажатый курсор дальше. Вы также можете использовать клавишу Shift чтобы выделить дополнительные ячейки.

Щелкните по любой ячейке и тяните курсор, чтобы выделить несколько ячеек

Дополнительные редакторы в Data Table

Вы можете добавлять более сложные редакторы для изменения данных в JavaScript Table: Multi-select, Grid Editor и DataView Editor. Редактор Multi-select позволяет выбирать несколько опций из списка, редактор Grid и DataView выводят доступные опции внутри виджетов DataTable и DataView соответственно.

Используйте редактор 'richselect' для изменения названий и 'combo' для изменения дат.

Дополнительные фильтры

С помощью функции фильтрации DataTable вы можете изменять содержимое таблицы, выбирая нужные значения из выпадающего списка (фильтры rich-select, multi-select) или выбирая даты во встроенном календаре.

Примените фильтры к таблице

Rowspan и colspan

Благодаря возможности объединять ячейки по горизонтали и вертикали, вы можете отображать сложные данные как в любой HTML таблице.

Меню заголовка таблицы

С помощью меню вы можете выбирать, какие колонки таблицы показывать.

Щелкните правой клавишей мыши по заголовку любой колонки.

Группировка колонок

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

Нажмите на 'плюс' и 'минус' в заголовке таблицы

Вертикальные заголовки

Вы можете размещать текст заголовков не только горизонтально, но и вертикально. Поворот текста в заголовке поможет вам сэкономить пространство в Data Table для другой информации.

Sparkline

Sparklines - это небольшие диаграммы, которые вы можете вставить в ячейки JavaScript Table. Доступны несколько видов Sparkline: линейная, двумерная, столбчатая диаграммы, Сплайн-диаграмма, Сплайн-диаграмма с областями и круговая диаграмма. Вы также можете добавить всплывающие подсказки (tooltip), которые появятся на экране, когда пользователь наведет курсор на диаграмму. Вы можете изменить цвета Sparklines. Кроме DataTable, Sparklines можно добавлять в другие виджеты, например, в List.

Вложенные строки и виджеты

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

Нажмите 'плюс', чтобы открыть вложенные строки и таблицы