Начало работыОснова Falcon SpaceРуководстваВозможностиКоммуникация пользователейТаблицыФормыПоля формыЛендингиДизайн, стилизация, юзабилитиИнтеграцииУниверсальный APIКаталогиНавигацияДокументыДополнительные компонентыПродвижение, SEOСистемные моментыСистемное администрированиеHOWTOЗагрузка файлов, картинокHOWTO SQLHOWTO JSHOWTO ВерсткаРешение проблемСоветы по реализации
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Настройка сниппета таблицы
Время чтения - 2 мин.Дата публикации 16.10.2025
<div class="as-table" data-code="dashboardPanels" data-itemid="566"></div>
Сниппет таблицы обрабатывается платформой и визуализируется в таблицу с данными.
Вы можете кастомизировать стили таблицы через data атрибуты в сниппете таблицы
Например, поставим кнопку фильтра красной с иконкой глаза:
<div class="as-table" data-code="watch_customClassesIcons" data-filterbtnclass="btn btn-primary" data-filterbtnicon="fa fa-eye"></div>
Пример на демостенде - https://demo.web-automation.ru/list/watch/kastomizaciya-knopok-stiley-tablic---66
Описание data элементов разметки
- data-code - код таблицы
- data-itemID- переданный в сниппете значение, которое можно передать в разметке сниппета (например, id категории). Если нужен параметр из url, то можно написать в фигурных скобках url-itemID
Описание data-* параметров по стилизации таблицы(с указанием значения по умолчанию):
- tableClass - добавляет CSS класс к тегу таблицы (можно использовать классы bootstrap - table-dark table-hover table-striped table-bordered table-borderless table-sm).
- filterBtnIcon = "fa fa-search" - иконка Font Awesome у кнопки фильтра. Смотреть иконки Font Awesome.
- filterBtnClass = "btn btn-secondary btn-md"
- showTypicalFilterBtn - если 1, то показывать кнопку сохранения типовых комбинаций фильтров.
- typicalFilterBtnIcon = "fa fa-bars" - кнопка типовые фильтры
- typicalFilterBtnClass = "btn btn-light btn-md"
- resetFilterBtnIcon = "" - кнопка сброса фильтра
- resetFilterBtnClass = "btn btn-light btn-md"
- titleTooltipIcon = "fa fa-info-circle" - подсказка рядом с названием
- titleTooltipClass = "btn btn-circle text-primary"
- titleClass = "" - css класс для контейнера заголовка
- subtitleClass = "" - css класс для контейнера подзаголовка
- toolbarClass = "" - css класс для контейнера панели рядом с названием
- groupToolbarClass = "" - css класс для контейнера панели групповых действий
- operationClass-code1 = "btn btn-light " - CSS классы кнопки операции (code1 - код операции)
- removeBtnIcon = "fa far fa-trash-alt" - кнопка удаления в строке
- removeBtnClass = ""
- commentsBtnIcon = "fa fa-comment" - кнопка комментариев в строке
- commentsBtnClass = ""
- numColHeader = "#" - заголовок столбца с порядковым номером
- createBtnIcon = "fa fa-plus"; - кнопка быстрого создания
- createBtnClass = "btn btn-primary"
- createModalType = "primary" - кнопка в строке для modal_ режима
- modalBtnIcon = "fa fa-dot-circle"
- modalBtnClass = ""
- subBtnPlusIcon = "fa-plus" кнопка в строке для sub_ режима (важно! здесь только 1 класс без fa добавки)
- subBtnMinusIcon = "fa-minus"
- subBtnClass = ""
- noItemsClass = "alert alert-info my-3" панель "Не найдено"
- noItemsIcon = "fa fa-frown"
- alwaysShowGroupPanel = "" Если стоит непустая строка, то панель групповых действий будет видна всегда, но при этом если нет выбранных галочек, то кнопки в этой панели будут активны (для кнопок операции будут проверяться выбранные галочки. Если их нет то выводится сообщение из этой настройки data-alwaysShowGroupPanel).
- disableRemoveConfirm - если "1", то не будет запрашиваться подтверждение удаления строки таблицы (confirm)
- progress - если указана иконка font awesome (fa fa-bars) или путь к картинке, то она будет загружаться в форму, пока идет прогрузка данных. Т.е. выполняет роль элемента прогресс-бара (аналогичный параметр есть и у Формы).
Примечание: для данных настроек вы можете их глобально установить в as.systemOptions.js через код вида "table.{code}", например:
{
"table.createBtnClass": "btn btn-danger"
}
Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Google поиск по нашей документации
Запрос расчета стоимости веб-проекта на базе Falcon Space
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта