DataTable - это JS виджет для табличных данных. Другое название этого элемента - DataGrid. Используется для работы с табличными данными, от компактных табличных форм, до сложных таблиц с большим числом управляющих элементов, рассчитанных на работу с BigData. Webix предлагает готовый элемент - HTML5 DataTable с большим количеством фич и настроек. Глубокая оптимизация обеспечивает лучшую скорость отрисовки среди аналогичных решений.
живое демо
Готовый JS компонент для интеграции
Интеграция приложения при помощи нескольких строчек кода.
Фичи и возможности
Поддержка Drag-n-Drop, фильтры, группировка задач, контекстное меню и многое другое.
Молниеносный рендеринг
Сверхмалый размер компонента и глубоко оптимизированный JavaScript код.
Документация, примеры, тех.поддержка
Профессиональный продукт с детальной документацией и службой технической поддержки.
Functionality
JavaScript таблица позволяет легко вводить новые данные. По щелчку на любую ячейку, вы можете легко редактировать ее содержимое с помощью ввода нового значения в поле или выбрав значение из выпадающего списка.
Щелкните по любой ячейке, чтобы отредактировать значение в ней
Все строки таблицы можно сортировать в один щелчок по заголовку колонки. Вы можете использовать функцию сортировки DataTable, чтобы определить свой собственный критерий для упорядочивания данных.
Щелкните по заголовку любой колонки, чтобы отсортировать данные в таблице
Строки таблицы можно отфильтровать с помощью встроенных фильтров, помещаемых в заголовки колонок. Вы можете использовать функцию фильтрации DataTable, чтобы задать свои критерии для поиска данных.
JavaScript Table позволяет вам проверять вводимые данные. Используя валидацию, вы можете проверить, соответствуют ли значения конкретных ячеек таблицы заданным правилам. Если нет, строка с неправильными данными будет подсвечена и пользователь получит уведомление об этом.
Заполните пустые ячейки
Если вы планируете загружать в DataTable большие данные, можно разбить таблицу на несколько страниц. Легко настраиваемые кнопки с номерами страниц и стрелками помогают с легкостью переходить между страницами.
Нажмите на кнопки, чтобы просмотреть другие страницы таблицы
Благодаря этому свойству, вы сможете хранить состояние DataTable в cookie-файлах, локальном или сессионном хранилище и затем восстанавливать его после обновления страницы. Информация обо всех действиях над данными в виджете будет сохраняться, благодаря чему пользователи не потеряют текущее состояние DataTable.
Измените состояние таблицы (измените ширину столбцов, примените фильтр, отсортируйте строки, покажите или спрячьте колонки) и затем обновите страницу
Вы можете изменить порядок строк, перетаскивая их. Режим 'order' определяет возможность менять порядок строк в пределах одной таблицы. Если у вас на странице две таблицы, вы можете перетаскивать строки из одной таблицы в другую, в то время как номера строк первой таблицы изменятся соответственно. Дополнительная настройка позволит вам запретить перетаскивание отдельных строк, перетаскивание любых строк в определенные позиции в таблице и т.д.
Перетащите любую строку из одной таблицы в другую
Вы можете разрешить перетаскивание колонок в JavaScript таблице. В режиме 'order' вы сможете менять порядок строк в пределах одной таблицы.
Нажмите на хедер и удерживайте его, чтобы перетащить колонку
Вы можете копировать данные из этого виджета в буфер обмена и вставлять их в другие виджеты или HTML-контейнеры. Работа с буфером обмена поддерживается во всех современных браузерах, включая Firefox, Opera, Chrome и Safari. Кроме того, вы можете копировать данные из DataTable в Excel-документ.
Используйте сочетания клавиш 'Ctrl+C' и 'Ctrl+V' для копирования и вставки содержимого ячеек
Вы можете изменять размеры колонок и строк, перетаскивая вертикальные или горизонтальные границы ячеек.
Наведите курсор на любую границу, затем перетащите ее
Вы можете создать DataTable с фиксированными колонками и строками, которые не будут перемещаться при прокрутке.
Прокрутите таблицу вправо
Разновидность виджета DataTable может отображать древовидные структуры данных подобно компоненту Tree. Виджет TreeTable позволяет создавать неограниченное число поддеревьев. Вы можете фильтровать данные в таких структурах по всему дереву или на конкретном уровне.
Кроме выделения ячейки, строки и колонки, вы можете выделять блоки ячеек. Кликните по первой ячейке из нужной вам области и протащите зажатый курсор дальше. Вы также можете использовать клавишу Shift чтобы выделить дополнительные ячейки.
Щелкните по любой ячейке и тяните курсор, чтобы выделить несколько ячеек
Вы можете добавлять более сложные редакторы для изменения данных в JavaScript Table: Multi-select, Grid Editor и DataView Editor. Редактор Multi-select позволяет выбирать несколько опций из списка, редактор Grid и DataView выводят доступные опции внутри виджетов DataTable и DataView соответственно.
Используйте редактор 'richselect' для изменения названий и 'combo' для изменения дат.
С помощью функции фильтрации DataTable вы можете изменять содержимое таблицы, выбирая нужные значения из выпадающего списка (фильтры rich-select, multi-select) или выбирая даты во встроенном календаре.
Примените фильтры к таблице
Благодаря возможности объединять ячейки по горизонтали и вертикали, вы можете отображать сложные данные как в любой HTML таблице.
С помощью меню вы можете выбирать, какие колонки таблицы показывать.
Щелкните правой клавишей мыши по заголовку любой колонки.
Благодаря этому свойству пользователи Webix могут разворачивать или сворачивать колонки таблицы в один клик. Вы сами можете определять, какие колонки группировать и затем настраивать группировку.
Нажмите на 'плюс' и 'минус' в заголовке таблицы
Вы можете размещать текст заголовков не только горизонтально, но и вертикально. Поворот текста в заголовке поможет вам сэкономить пространство в Data Table для другой информации.
Sparklines - это небольшие диаграммы, которые вы можете вставить в ячейки JavaScript Table. Доступны несколько видов Sparkline: линейная, двумерная, столбчатая диаграммы, Сплайн-диаграмма, Сплайн-диаграмма с областями и круговая диаграмма. Вы также можете добавить всплывающие подсказки (tooltip), которые появятся на экране, когда пользователь наведет курсор на диаграмму. Вы можете изменить цвета Sparklines. Кроме DataTable, Sparklines можно добавлять в другие виджеты, например, в List.
В DataTable можно добавить вложенные строки и встроить другие виджеты. Они будут отображаться под каждой строкой таблицы. Содержимое вложенной строки можно задать с помощью template, а встроенным виджетом может быть любой Webix виджет. Вы можете сворачивать/разворачивать вложенные строки и виджеты по щелчку на иконку соответствующей строки таблицы.
Нажмите 'плюс', чтобы открыть вложенные строки и таблицы
Полезные статьи про DataTable
Создаем приложение на Webix за 30 секунд
Фильтрация в компоненте DataTable
Создаем Playlist приложение с Webix
Создаем Time Tracker приложение с Webix
Создавайте красивые интерфейсы с UI библиотекой Webix
