tableShape

Описание

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

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

tableShape?: {
    templates?: {
        [field: string]: (
            value: any,
            operation: string
        ) => any;
    },
	totalRow?: boolean | "sumOnly",
	totalColumn?: boolean | "sumOnly",
    marks?: {
        [cssClass: string]: ((v: any, columnData: any, rowData: any) => boolean)
        | "max" 
        | "min"
    },
    sizes?: {
        rowHeight?: number,
        headerHeight?: number,
        columnWidth?: number,
        footerHeight?: number
    },
    tree?:boolean,
    cleanRows?: boolean,
    split?: {
        left?: boolean,
        right?: boolean,
    },
    cellStyle?: (
        field: string, 
        value: any, 
        area: "rows"|"columns"|"values", 
        method?: string,
        isTotal?: "row"|"column"|"both") 
        => string,
};

Параметры

• templates - (необязательный) позволяет задавать шаблоны для ячеек; это объект, где:
  • каждый ключ — это идентификатор поля
  • значение — функция, которая возвращает строку и принимает значение ячейки и операцию. Ко всем столбцам, основанным на указанном поле, будет применён соответствующий шаблон. Например, это позволяет задавать единицы измерения или возвращать необходимое количество знаков после запятой для числовых значений и т. д. Смотрите пример ниже.
• marks - (необязательный) позволяет отмечать ячейку с необходимыми значениями. Это объект, где ключи — имена CSS-классов, а значения — либо функция, либо одна из предопределённых строк ("max", "min"). Функция должна возвращать булево значение для проверяемого значения. Если возвращается true, CSS-класс присваивается ячейке. Подробнее с примерами смотрите здесь: Стилизация ячеек.
• sizes - (необязательный) определяет следующие параметры размеров таблицы:
  • rowHeight - (необязательный) высота строки в таблице Pivot в пикселях. Значение по умолчанию — 34
  • headerHeight - (необязательный) высота заголовка в пикселях; значение по умолчанию — 30
  • footerHeight - (необязательный) высота подвала в пикселях; значение по умолчанию — 30
  • columnWidth - (необязательный) ширина столбца в пикселях; значение по умолчанию — 150
• cellStyle - (необязательный) функция, применяющая пользовательский стиль к ячейке. Функция принимает следующие параметры:
  • field - (обязательный) строка, представляющая имя поля, к которому применяется стиль
  • value - (обязательный) значение ячейки (фактические данные для данной строки и столбца)
  • area - (обязательный) строка, указывающая область таблицы, в которой находится ячейка ("rows", "columns" или "values")
  • method - (необязательный) строка, представляющая операцию, выполняемую над ячейкой (например, "sum", "count" и т. д.)
  • isTotal - (необязательный) определяет, принадлежит ли ячейка итоговой строке, итоговому столбцу или и тому, и другому: "row"|"column"|"both"
    Функция cellStyle возвращает строку, которая может использоваться как имя CSS-класса для применения определённых стилей к ячейке.
• tree - (необязательный) если установлено значение true, включает режим дерева, при котором данные отображаются с раскрываемыми строками; значение по умолчанию — false. Подробнее с примерами смотрите здесь: Переключение в режим дерева
• totalColumn - (необязательный) если true, включает генерацию итогового столбца с итоговыми значениями для строк (по умолчанию установлено false). Если установлено значение "sumOnly", будет сгенерирован столбец с итоговой суммой (доступно только для операции sum)
• totalRow - (необязательный) если true, включает генерацию подвала с итоговыми значениями (по умолчанию установлено false). Если установлено значение "sumOnly", будет сгенерирована строка с итоговым значением (доступно только для операции sum)
• cleanRows - (необязательный) если установлено значение true, дублирующиеся значения в масштабных столбцах скрываются в табличном представлении. Значение по умолчанию — false
• split - (необязательный) позволяет закреплять столбцы справа или слева в зависимости от указанного параметра (смотрите Закрепление столбцов):
  • left (boolean) - если установлено значение true (по умолчанию false), фиксирует столбцы слева, делая их статичными и видимыми при прокрутке. Количество закреплённых столбцов равно числу полей строк, определённых в свойстве config
  • right (boolean) - фиксирует итоговые столбцы справа; значение по умолчанию — false

По умолчанию tableShape не определён, что означает отсутствие итоговой строки и итогового столбца, отсутствие применённых шаблонов и маркировок, данные отображаются в виде таблицы, а не дерева, и столбцы не фиксируются при прокрутке.

Пример

В приведённом ниже примере мы применяем шаблон к ячейкам state, чтобы отображать составное название штата (полное название и аббревиатуру).

const states = {
  "California": "CA",
  "Colorado": "CO",
  "Connecticut": "CT",
  "Florida": "FL",
// другие значения,
};

const table = new pivot.Pivot("#root", {
    tableShape: {
        templates: {
            // задаём шаблон для настройки значений ячеек "state"
            state: v => v+ ` (${states[v]})`,
        }
    },
    fields,
    data,
    config: {
        rows: ["state", "product_type"],
        columns: [],
        values: [
            {
                field: "profit",
                method: "sum"
            },
            {
                field: "sales",
                method: "sum"
            },
            // другие значения
        ],
    },
    fields,
});

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

• Pivot 2. Режим дерева
• Pivot 2. Замороженные (фиксированные) столбцы
• Pivot 2. Задать высоту строки, заголовка, подвала и ширину всех столбцов
• Pivot 2. Чистые строки
• Pivot 2. Добавление пользовательского CSS для ячеек таблицы и заголовка

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

• Конфигурация
• Стиль ячеек