UI виджет TreeTable

TreeTable (TreeGrid) - это JavaScript виджет, который позволяет сочетать возможности JavaScript Table и JavaScript Tree в одном виджете. Это уникальный виджет, позволяющий просто и наглядно представить огромные, многомерные массивы данных.

живое демо

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

Что такое TreeTable?

Это специализированный компонент для работы с большими объемами табличных данных. TreeGrid позволяет одновременно отобразить множество информации (даже многомерные таблицы) в одном, компактном UI виджете. Группировка данных происходит посредством сворачивания в иерархические элементы на подобии ветвей дерева данных. Но, в отличии от классического tree, пользователь может сворачивать-заворачивать целые таблицы. Такой подход к организации данных позволяет:

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

Важным преимуществом TreeTable перед другими data widgets является простота и высокая юзабилити. Компактно приставленные данные легко проанализировать и использовать даже не опытному пользователю.

Webix TreeTable фичи

Сквозная сортировка

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

Кликните на заголовок любого столбца, чтобы отсортировать данные в таблице.

Редактируйте элементы Tree Table

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

Кликните по любому элементу Tree Table, чтобы изменить его

Сохранение текущего состояния

Вы можете легко сохранять текущее состояние JavaScript TreeGrid, чтобы позже вернуться к нему.

Нажмите 'Save state', откройте и закройте ветки, затем нажмите 'Restore state'

Выделение элементов JavaScript TreeGrid

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

Нажмите на любой элемент, чтобы выделить строку

Экспорт данных в Excel, PNG и PDF

JavaScript компонент Tree Table позволяет экспортировать данные в PDF, PNG и Excel. Вы также можете изменить вид таблицы в файле, добавив несколько опций при экспорте.

Нажмите на кнопки, чтобы экспортировать Tree Table

Чекбоксы

Вы можете использовать чекбоксы в компоненте TreeGrid для выделения его элементов. Эта возможность помогает выбирать одновременно несколько элементов для редактирования или удаления. Вы можете использовать стандартные чекбоксы или чекбоксы с третьим 'неопределенным' состоянием.

Чекбоксы с тремя состояниями. Покликайте по чекбоксам и затем разверните дерево

Фильтрация

Tree Table поддерживает клиентскую фильтрацию. Вы можете использовать встроенные фильтры или определить свои. В зависимости от типа данных в таблице, вы можете использовать один из доступных фильтров: фильтр по датам, числам, richselect фильтр, multicombo фильтр и т.д.

Примените фильтр к первому уровню таблицы (1-ая таблица) и ко всем уровням (2-ая таблица)

Буфер обмена

Благодаря поддержке буфера обмена, вы можете копировать и вставлять элементы таблицы в пределах данного Tree Table или вставлять их в другие компоненты. Копирование возможно в нескольких режимах, например, 'block', 'selection', и 'repeat'.

Используйте клавиатуру, чтобы скопировать и вставить элементы TreeTable

Sparkline

Чтобы визуализировать данные, вы можете добавлять небольшие графики в TreeTable. Sparkline бывают нескольких типов: линейные, двумерные, столбиковые, Сплайн-диаграммы, двумерные Сплайн-диаграммы и круговые диаграммы. Кроме того, вы можете добавлять всплывающие подсказки, которые будут появляться каждый раз при наведении курсора на график.

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