UI виджет TreeTable

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

Скачайте JS TreeTable

Что такое TreeTable?

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

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

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

Webix TreeTable фичи

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

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

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

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

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

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

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

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

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

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

Чекбоксы

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

Фильтрация

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

Буфер обмена

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

Sparkline

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

Создавайте красивые интерфейсы с UI библиотекой Webix

Скачать