Перейти к основному содержимому

headerShape

Описание​

Необязательный. Настраивает внешний вид и поведение заголовков в таблице Pivot

Использование​

headerShape?: {
    collapsible?: boolean,
    vertical?: boolean,
    template?: (label: string, field: string, subLabel?: string) => string,
    cellStyle?: (
        field: string, 
        value: any, 
        area: "rows"|"columns"|"values", 
        method?: string,
        isTotal?: boolean) 
        => string,
};

Параметры​

  • collapsible - (необязательный) если задано значение true, группы измерений в таблице становятся сворачиваемыми. По умолчанию установлено значение false
  • vertical - (необязательный) если задано значение true, изменяет ориентацию текста во всех заголовках с горизонтальной на вертикальную. Значение по умолчанию — false
  • cellStyle - (необязательный) функция, применяющая пользовательский стиль к ячейке заголовка. Функция возвращает имя CSS-класса и принимает следующие параметры:
    • field (string) - (обязательный) строка, представляющая имя поля, которому соответствует ячейка. Для заголовка столбца дерева поле равно ""
    • value (string | number | date) - (обязательный) значение ячейки
    • area - (обязательный) строка, указывающая область таблицы, в которой находится ячейка ("rows", "columns" или "values")
    • method (string) - (необязательный) строка, представляющая операцию, выполняемую для поля из области "values" (например, "sum", "count" и т.д.), или имя предиката, заданного для поля из области "columns"
    • isTotal - (необязательный) определяет, принадлежит ли ячейка итоговому столбцу
  • template - (необязательный) определяет формат текста в заголовках. По умолчанию для полей, применяемых как строки, отображается значение параметра label, а для полей, применяемых как значения, — метка и метод (например, Oil(count)). Функция принимает идентификатор поля, метку и метод или идентификатор предиката (если есть) и возвращает обработанное значение. Шаблон по умолчанию выглядит следующим образом:
template: (label, id, subLabel) =>
    label + (subLabel ? ` (${subLabel})` : "")

Пример​

В примере ниже для полей values заголовок будет отображать метку, название метода (subLabel) и переводить результат в нижний регистр (например, profit (sum)):

new pivot.Pivot("#pivot", {
    data,
    headerShape: {
        // пользовательский шаблон для текста заголовка
        template: (label, id, subLabel) => (label + (subLabel ? ` (${subLabel})` : "")).toLowerCase(),
        },
    config: {
        rows: ["state", "product_type"],
        columns: [],
        values: [
            {
                field: "profit",
                method: "sum"
            },
            {
                field: "sales",
                method: "sum"
            },
            // другие значения
        ],
    },
    fields,
});

Связанные примеры:

Связанные статьи:

Need more help?Contact Support