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

Раскрашенные при помощи условного форматирования таблицы могут имитировать тепловую карту.

Настройка таблицы

Раздел «Общие настройки»

В разделе «Общие настройки» устанавливаются общие настройки таблицы. Заполните поля:

• «Заголовок» — включите переключатель «Заголовок» и введите значение заголовка и при необходимости подзаголовка;
• «Предупреждение "неполные данные"» — включите переключатель, если необходимо выводить уведомление о неполности данных. По умолчанию таблица выводит 5000 записей и если в этой таблице больше 5000 записей, то в шапке таблицы выводится предупреждение, что не все данные выведены;
• «Отступы» — установите значение для отступа слева, сверху, справа и снизу компонента;
• «Точность чисел» — установите значение для определения точности количества знаков после точки у числовых значений. Например, при установки значения «2» вместо «220» в таблице будет отображаться значение в формате «220.00»;
• «Цвет фона» — выберите цвет фона компонента;
• «Формат даты» — выберите из выпадающего списка формат отображения значения даты в таблице;
• «Гиперссылка строки» — заполните поле при необходимости перехода по гиперссылке при нажатии на строку таблицы;
• «Шаблон экспорта» — для загрузки шаблона экспорта нажмите на кнопку «Загрузить», загрузите необходимый шаблон с локального компьютера. При загрузке шаблона отобразиться поле «Привязка шаблона к уровню дрилла» и кнопка «Удалить шаблон». Заполните поле и при необходимости замены файла шаблона нажмите на кнопку «Удалить шаблон» и загрузите заново.

Раздел «Данные»

• «Лимит при запросе (строки) — максимальное количество строк, которое будет получено из источника данных при формировании таблицы. Ограничение помогает снизить нагрузку на сервер и ускорить загрузку.
• «Лимит при показе (строки)» — максимальное количество строк, которое будет отображено пользователю в таблице на экране, даже если в источнике данных их больше.
• «Лимит при показе (серии)» — максимальное количество серий, которое будет отображено пользователю в таблице на экране, даже если в источнике данных их больше.
• «Лимит при экспорте (строки)» — максимальное количество строк, которое будет выгружено при экспорте таблицы в файл Excel. Чтобы увеличить объём выгрузки, укажите большее значение.
• «Анимация обновления» — переключатель, включающий или отключающий визуальные эффекты при обновлении данных в таблице.
• «Интервальное обновление» — переключатель автоматического обновления данных в таблице. При включении необходимо указать интервал обновления в секундах.

Раздел «Режимы»

В разделе «Режимы» устанавливаются основные правила работы с таблицей:

• «Автоширина колонок» — при включении переключателя ширина колонок будет изменяться автоматически в зависимости от размеров экрана. Колонки, у которых установлена фиксированная ширина изменяться не будут;
• «Перетаскивание колонок» — при включении переключателя будет возможность менять колонки местами в режиме просмотра;
• «Многострочный заголовок» — при включении переключателя надпись в заголовке колонки будет переноситься на следующую строку;
• «Подытоги» — позволяет отображать промежуточные итоги показателей (отдельная строка в таблице, подытоги разного уровня вложенности выделяются цветами с разной насыщенностью). При включении этого режима предыдущие настройки «Категорий» и «Серий» удаляются и появляется специальная «полка», на которой нужно разместить группировочные для подытогов (категории для подытогов);

• «Итоги» —при включении переключателя позволяет отображать итоговые значения по данным в строках таблицы (отдельная строка в конце таблицы, выделена цветом). Структура настроек таблицы (категории, серии и группировка по ним) не меняется. Для настройки функции агрегации по столбцу таблицы воспользуйтесь настройкой в поле Значения;

• «Число закрепленных колонок» — поле ввода данных, позволяет закрепить нужное число колонок таблицы. Удобно использовать в случае длинных таблиц;
• «Высота ячеек» — поле ввода данных, позволяет закрепить высоту строк в таблице (параметр задается в количестве строк);
• «Высота заголовка» — поле ввода данных, позволяет закрепить высоту заголовка таблицы (параметр задается в количестве строк).

Раздел «Колонки»

В разделе «Колонки» устанавливаются настройки для каждой колонки. Выберите из списка нужную колонку и установите настройки:

• «Колонка»:
  • «Показывать» — включенный переключатель позволяет скрыть колонку для режима просмотра. Используется в случае, если в таблице нужна служебная колонка, например, для сортировки данных, которую при этом не нужно отображать для пользователя отчета;
  • «Заголовок по другому полю» —  выпадающий список для выбора только одного поля с полки «Значения». По умолчанию в поле всегда указано значение «Нет» (отображается исходное название поля);
  • «Конвертация в гиперссылку» — при включенным переключателе осуществляется парсинг значений, начинающихся с «http://…». При включении функциональности, позволяет переходить по ссылке, заданной в поле «Гиперссылка»;
  • «Разрешить использование html-тегов» — включенный переключатель позволяет обрабатывать HTML-теги, присутствующие в данных, подробнее см. раздел «id/325030?_cok_AsPuPo_INSTANCE_contentView_refererPlid=399" class="kb-dynamic-link__anchor kb-dynamic-link__anchor_popup" target="_blank">Использование HTML-кода для оформления данных в таблице»;
  • «Гиперссылка» — выберите ниже из выпадающего списка колонку со ссылкой, по которой будет осуществлен переход;
  • «Всплывающее окно» — при включенным переключателе будет возможность пользователю открывать ссылку, содержащуюся в поле, путем нажатия на соответствующую строку таблицы. Ссылка может вести как на внешний сайт, так и на форму ввода данных для добавления новой записи, подробнее см. раздел «id/437929?_cok_AsPuPo_INSTANCE_contentView_refererPlid=399" class="kb-dynamic-link__anchor kb-dynamic-link__anchor_popup" target="_blank">Открытие и редактирование записей ФВД из таблицы»;
  • «Порядок отображения» — поле влияет на последовательность колонок в таблице:
    • сначала выводятся колонки, для которых заполнено поле «Порядок отображения» в порядке увеличения значения этого поля затем, колонки с незаполненным полем «Порядок отображения» по базовому правилу:
      • сначала «Категории»;
      • затем «Серии» и «Значения», с учетом порядка, в котором эти поля размещены на полках.
  • «Псевдоним» — введите наименование колонки для отображения в режиме просмотра;
  • «Ширина» — фиксированная ширина, если не установить, то будет подбираться автоматически;
  • «Прозрачность цвета» — установите величину прозрачности выбранной колонки, к которой применена настройка с цветом.
• «Выравнивание»:
  • «Горизонтальное» и «Вертикальное» — выравнивание по ширине и высоте соответственно — для любых колонок.
• «Форматирование»:
  • «Формат даты» — используется для колонок с данными типа «Строка» или «Дата», установите необходимое значение;
  • «Знаков после запятой» — используется для колонок с числовыми полями, установите необходимое значение;
  • «Разделитель разрядов» — добавлена возможность для полей с полки Значения включать и отключать разделитель групп разрядов (внутри чисел группировать символы по три);
  • «Спарклайны» — при включении переключателя выявляется соотношения максимального и минимального значения по колонке и показывается соответствие этим величинам в виде длины графика;
  • «Суффиксы значений» — поле позволяет добавлять знак % к числовым значениям, при этом не влияя на расчет итоговых результатов. Полезно для визуализации данных, когда необходимо показать относительные значения без изменения исходных расчетов;
  • «Скрывать одинаковые строки» — опция объединяет повторяющиеся ячейки в таблице для уменьшения визуального шума, как показано на рисунке ниже;
    jpg/92aeeddd-cf50-6efb-878b-9d2d82b7dd58?t=1740729953691" width="1037">
  • «Отображать пустое как ноль» — при включении переключателя опция позволяет выводить вместо пустых ячеек таблицы нули для колонок с числовыми полями;
  • «Разрешить перенос строк только управляющим символом» — при включении переключателя опция позволяет перенос строк только управляющим символом.

Подробнее про настройку поля «Заголовок по другому полю»

Данное поле заполняется при возникновении потребности динамически менять заголовок в зависимости от выбранных пользователем значений (например, в фильтрах или переключателях). Яркий пример — отчет «Дебиторская/Кредиторская задолженность», где название колонки должно меняться в зависимости от выбора пользователя.

Пример использования заголовка по другому полю:

• Пользователь создает таблицу с полем с полем «Переменное значение» на полке Значения, в котором будет отображаться сумма Дебиторской или Кредиторской задолженности в зависимости от значения переменной окружения в отчете;
• Пользователь хочет, чтобы заголовок колонки «Переменное значение» менялся в зависимости от значения переменной: !env.var_value!
• Пользователь на полке Значений создает вычисляемое поле «Заголовок задолженности» с формулой, например:

CASE
WHEN {!env.var_value!; 'Не определено'} = 'Дебиторская' THEN 'Дебиторская задолженность'
WHEN {!env.var_value!; 'Не определено'} = 'Кредиторская' THEN 'Кредиторская задолженность'
END

• Пользователь скрывает отображение поля «Заголовок задолженности» («Показывать» = «Нет»), чтобы оно не отображалось в таблице;
• Пользователь заходит в раздел «Колонки» и выбирает поле «Переменное значение»;
• Пользователь в новом параметре «Заголовок по другому полю» выбирает поле «Заголовок Задолженности»;
• Система заменяет стандартный заголовок «Переменное значение» на вычисленное значение «Дебиторская задолженность» или «Кредиторская задолженность», в зависимости от значения переменной;
• Пользователь может в любой момент очистить выбор поля «Заголовок по другому полю» нажатием на иконку крестика, и заголовок колонки вернётся к значению «Переменное значение».

Раздел «Стилизация»

В разделе «Стилизация» настраиваются цвета для шапки таблицы, зебры и спарклайна. Заполните поля:

• «Тема» — выберите необходимую тему из выпадающего списка;
• «Цвет фона заголовков таблицы» — установите цвет фона заголовка;
• «Цвет текста заголовков таблицы» — установите цвет текста заголовка;
• «Тип "зебры"» —выберите тип чередования строк в "зебре": «Через три», «Через три», «Без чередования»;

• «Цвет "зебры"» — установите цвет строк "зебры";
• «Цвет спарклайна» — установите цвет спарклайна.

Пример спарклайна:

Пример использования множественных серий:

Раздел «Режим фильтра»

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

Заполните поля:

• «Цвет фона выбранной строки» — выберите цвет фона выбранной строки, при том, если поле пустое, то будет использоваться цвет строки итогов;
• «Цвет текста выбранной строки» — выберите цвет текста выбранной строки, при том, если поле пустое, то будет использоваться цвет строки итогов;
• «Стиль текста» — выберите стилизацию шрифта выбранной строки нажатием на нужную пиктограмму: Полужирный, Курсив, Подчеркнутый.

Если в таблице будет настроен хотя бы один уровень дрилла, то режим фильтра перестанет работать.

Если ранее в разделе «Колонки» было настроено поле «Конвертация в гиперссылку», то при включении режима фильтра конвертация во всех колонках станет недоступна (опция выключится).

Раздел «Условное форматирование»

В разделе «Условное форматирование» настраивается цвет колонки, спраклайна или всей строки в зависимости от данных в колонке.

Настройка форматирования:

• для добавления правила нажмите кнопку «Создать»;

• введите значение наименования правила в поле «Название»;
• выберите колонку, данные в которой будут проверяться, в поле «Колонка»;

• задайте условия проверки в поле «Условие 1». Одновременно может проверяться два условия (если нужно проверить несколько диапазонов значений для одного поля, можно сделать несколько правил). После ввода значения нажмите на клавишу <Enter>, при этом цвет введенного значения должен измениться с красного на черный, это является подтверждением правильности ввода;
• установите в полях «Цвет текста», «Цвет фона», «Цвет спарклайна» цвет текста, фона или спарклайна при срабатывании условия;
• включенный переключатель «Вся строка» распространит форматирование на все ячейки строки.

Раздел «Сортировка»

В разделе включается и выключается возможность сортировки в таблице:

• «Сортировка по нескольким колонкам» — при включении сортировки на колонке таблица отсортировывается по этой колонке. Можно установить знак сортировки на нескольких колонках таблицы. Порядок сортировки устанавливается в порядке выбора колонок для сортировки, при этом рядом со знаком сортировки появляется ее номер. Количество уровней сортировки не ограничено. Переключение между сортировкой в алфавитном и в обратном порядке и выключение сортировки в колонки осуществляется последовательным нажатием на знак сортировки в колонке;

• «Смена сортировки нажатием на заголовок» — в режиме просмотра для таблицы с этой опцией, при наведении на заголовок столбца, курсор превращается в значок «рука» и при нажатии срабатывает сортировка. Эта опция полезна для работы с таблицами на планшетах.

Настройка цвета фона ячейки

Цвет фона ячеек таблицы настраивается через меню «пилюли» (стрелочка вниз в левом нижнем углу — кнопка «Настройки»). В поле «Цвет по другому полю» укажите столбец с данными в виде «Hex»-значения цвета.

На полку «Значения» также положите «пилюлю» с типом «Цвет» и к этой колонке примените настройку «Прозрачность цвета (%)».

Установите прозрачность выбранной колонки, к которой применена настройка с цветом, в настройках «Колонки», поле «Прозрачность цвета».

Изображение в ячейке таблицы

В таблице можно настроить отображение изображений, если в наборе данных есть поле с картинками в формате image/png;base64.

Настройка:

1. Добавьте на полку «Вычисляемое поле» и укажите параметры отображения с использованием HTML-разметки.
   .png/a47bbb6e-5de3-8d94-fde5-ad7f21cacedf?t=1738756129378" width="856">

   Пример настройки:

   <img src="data:image/png;base64,{{ max('test_imagebase64') }}" width="320" height="180" /> 

   Где:

   • test_imagebase64 — поле из набора данных, содержащее изображение в формате Base64.
   • width="320" height="180" — размеры отображаемого изображения (можно изменить при необходимости).

2. В настройках колонки включите переключатель «Разрешить использование HTML-тегов», чтобы изображения корректно отображались в таблице.

Предупреждение о неполных данных

Опция «Предупреждение "неполные данные"» предназначена для настройки отображения предупреждения для таблицы на дашборде и в заголовке при экспорте данных в файл Excel. Предупреждение выводится по условию: если количество строк равно настроенному пользователем лимиту при запросе/показе/экспорте.

/* Родительскому элементу таблицы (или обертке) задаем flex */
.hs-table__table {
  display: flex;
  flex-direction: column;
}

Выгрузка больших данных

При экспорте таблицы (подробнее про экспорт смотрите в разделе «id/235167?_cok_AsPuPo_INSTANCE_contentView_refererPlid=399" class="kb-dynamic-link__anchor kb-dynamic-link__anchor_popup" target="_blank">Экспорт отчета») если объем данных превышает 1 миллион записей, будет распределение их по нескольким листам в Excel. В одном Excel-файле по умолчанию будет 5 листов.

Будет происходить автоматическое создание новых листов в Excel при превышении 1 млн строк на одном листе. Все Excel-файлы будут упакованы в единый архив (формат архива — .zip), который называется в соответствии с заголовком визуализации. Например, если таблица называется «Table», то при выгрузке двух Excel-файлов они будут иметь наименование «Table_0001» и «Table_0002».

Листы внутри нескольких Excel-файлов имеют сквозное наименование, например, при выгрузке таблицы с 7 млн строк в первом Excel-файле будет 5 листов с наименованием «Лист_1», «Лист_2», «Лист_3», «Лист_4», «Лист_5», а внутри второго Excel-файла будет «Лист_6», «Лист_7».

Дополнительно

Стилизация элементов таблицы через пользовательский CSS

Для изменения стилей компонентов, используя пользовательские CSS-правила, подробнее см. раздел «Изменение стилей CSS».

Изменение Итогов в Таблице

Для изменения положения Итогов, например, для перемещения на самый верх таблицы и закрепления их там, используйте следующий код:

/* Родительскому элементу таблицы (или обертке) задаем flex */
.hs-table__table {
  display: flex;
  flex-direction: column;
}

/* Меняем порядок tbody элементов */
.hs-table__table > tbody:nth-of-type(1) {
  order: 2; /* Первый tbody (основные данные) станет вторым */
}

.hs-table__table > tbody:nth-of-type(2) {
  order: 1; /* Второй tbody (итоги) станет первым */
}

.sub-all-row td {
background-color: white !important;
color: red !important;
}

Для изменения текста «Итого» на любой другой статичный текст, используйте следующий код:

/* Скрываем оригинальный текст */
.hs-table__table .sub-all-row td:first-child div {
    visibility: hidden;
    position: relative;
}

/* Добавляем новый текст */
.hs-table__table .sub-all-row td:first-child div::after {
    content: "Новый текст";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

После применения представленных выше двух CSS-правил, таблица будет выглядеть таким образом:

Подсветка строк при проваливании дрилла

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

.drillDownActive {
  tbody {
    /* Цвет фона строки */
    td {
      background: rgba(35, 206, 50, 0.3) !important;
    }
    /* Цвет рамки строки */
    tr {
      border: 1px solid rgba(14, 115, 14, 1);
    }
  }
  thead {
    /* Цвет рамки шапки Таблицы (наращиваем шапку, чтобы она была вровень с рамкой строки) */
    tr {
      border: 1px solid rgba(122, 130, 155, 1);
    }
  }
}