Форматирование виджета "Таблица"

Owned by Эдуард Столяр
Last updated: нояб. 21, 2023
5 min read

Форматирование может применяться в следующих элементах виджета:

  • Заголовки столбцов

     

  • Ячейки данных

При форматировании шапки можно использовать следующую зарезервированную команду:

  • @value - значение ячейки шапки;

При форматировании ячеек данных можно использовать следующие зарезервированные команды:

  • @value - значение в ячейке таблицы;

  • @row -массив значений строчки;

    • @row[0] - обращение к элементу массива через индекс столбца;

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

Примеры форматирования

Добавление подписи к значению

Вы можете добавить любую надпись к значениям таблицы. Например, можно округлить большое числовое значение и добавить к нему фразу млн. руб. Для этого необходимо выполнить следующую команду:

Math.round(@value/100000) + ' млн. руб'

Где

Math.round(@value/100000) - округление числового значения и деление его на 100000;

+ ' млн. руб' - добавленный текст.

Изменение названия столбцов

Вы можете как полностью изменить название столбца, так и добавить текст к существующему значению. В нашем примере мы добавим слово руб. к фразам Стоимость реализации товара и Закупочная стоимость, а также заменим слово Город на Города России. Для этой цели мы введем следующую команду в поле Форматирование текста раздела Заголовки столбцов:

@value == 'Стоимость реализации товара' ? @value + " руб." : @value == 'Закупочная стоимость' ? @value + " руб." : @value == 'Город' ? @value = "Города России" : " "

Где
@value == 'Стоимость реализации товара', @value == 'Закупочная стоимость' – условие, при котором названием колонки является фраза Стоимость реализации товара / Закупочная стоимость;
@value + " руб." – текст (руб.), который должен добавиться к названию колонки при удовлетворении условия;
@value == 'Город' – условие, при котором названием колонки является фраза Город;
@value = "Города России" – замена текста, удовлетворяющего условию (Город) на фразу Города России.

Изменение значений в ячейках

При необходимости возможно заменить значения в ячейках таблицы. В нашем примере мы заменим буквы Ж и М на слова Женщины и Мужчины. Для этого мы введем следующую команду в поле Текст раздела Ячейки данных при включённом форматировании:

@value == "Ж" ? @value = "Женщины": @value == "М" ? @value = "Мужчины": @value

Где
@value == "Ж" – условие (для удовлетворения условия значение должно быть Ж);
@value = "Женщины" - замена текста, если условие удовлетворено.

Изменение цвета фона ячейки

Цвет фона ячеек можно изменить в зависимости от значения ячейки. Например, можно задать определенный цвет фона для различных категорий значений. В нашем примере мы зададим красный цвет для городов Самара и Барнаул, зеленый - для городов Нижнеудинск и Севастополь, и синий - для Москвы. Для этого мы введем следующую команду в поле Фон раздела Ячейки данных при включенном форматировании:

@value =='Самара' || @value == 'Барнаул' ? 'red': @value =='Москва' ? 'blue' : @value == 'Нижнеудинск' || @value == 'Севастополь' ? 'green':''

Где
@value =='Самара' || @value == 'Барнаул' – условие (значение должно быть либо Самара, либо Барнаул);
|| – логический оператор ИЛИ;
'red' - назначение цвета при удовлетворении условия;
@value =='Москва' – условие (значение должно быть Москва);
'blue' – назначение цвета при удовлетворении условия;
@value == 'Нижнеудинск' || @value == 'Севастополь' – условие (значение должно быть либо Нижнеудинск, либо Севастополь)
'green' – назначение цвета при удовлетворении условия.

Возможно использование различных цветовых форматов:

  • HTML имя цвета (например, red)

  • RGBA (например, rgba(225,0,0,225))

  • HEX (например, #ff0000)

Изменение цвета значений

Вы можете изменять цвет значений в ячейках таблицы в зависимости от различных условий. Например, можно одну категорию значений обозначить одним цветом, а другую - другим. В нашем примере мы сравним значения ячеек в двух столбцах, и если разница будет больше 100, выделим эти значения синим цветом, в противном случае - красным. Для этого мы введем следующую команду в поле Цвет текста раздела Ячейки данных:

@row[0] - @row[1] > 100 ? 'blue':'red'

Где
@row[0], @row[1] - обращение к элементу массива через индекс столбца;
@row[0] - @row[1] - получение разницы между значениями из столбцов с индексами 0 и 1;
> 100 ? 'blue' - выделение значений, между которыми разница больше 100, синим цветом;
:'red' – выделение всех остальных значений красным цветом.

Возможно использование различных цветовых форматов:

  • HTML имя цвета (например, red)

  • RGBA (например, rgba(225,0,0,225))

  • HEX (например, #ff0000)

Форматирование значений ячеек

Вы можете отформатировать значения ячеек, чтобы они отображались особым образом в зависимости от текста значения. Например, можно выделить жирным шрифтом определенные категории значений. В нашем примере мы выделим слово Москва во всей таблице. Для этого мы введем следующую команду в поле Форматирование текста раздела Ячейки данных:

@value=='Москва'?'<b>' + @value +'</b>':@value

Где
@value=='Москва' – искомое значение, которое нужно выделить жирным шрифтом;
<b>' + @value +'</b>' – выделение значения жирным шрифтом с помощью тэгов;
:@value – указывает на то, что все остальные значения остаются без изменения.