Skip to main content

headerShape

Description​

Optional. Configures the look and behavior of headers in the Pivot table

Usage​

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,
};

Parameters​

  • collapsible - (optional) if set to true, dimension groups in the table are collapsible. It's set to false by default
  • vertical - (optional) if set to true, changes the text orientation in all headers from horizontal to vertical. The default value is false
  • cellStyle - (optional) a function that applies a custom style to a header cell. The function returns a name of css class and takes the following parameters:
    • field (string) - (required) a string representing the field name the cell corresponds to. For the header of the tree column the field is ""
    • value (string | number | date) - (required) the value of a cell
    • area - (required) a string indicating the area of the table where a cell resides ("rows", "columns" or "values" area)
    • method (string) - (optional) a string that can represent the operation performed for a field from the "values` area (e.g., "sum", "count", etc.) or the name of a predicate set for a field from the "columns" area
    • isTotal - (optional) defines whether a cell belongs to a total column
  • template - (optional) defines the format of text in headers. By default, for the fields applied as rows the value of the label parameter is displayed and for the fields applied as values the label and method are shown (e.g., Oil(count)). The function takes the field id, label and the method or predicate id (if any) and returns the processed value. The default template is as follows:
template: (label, id, subLabel) =>
    label + (subLabel ? ` (${subLabel})` : "")

Example​

In the example below for the values fields the header will display the label, the method name (subLabel) and converts the result to lowercase (e.g., profit (sum)):

new pivot.Pivot("#pivot", {
    data,
    headerShape: {
        // a custom template for header text 
        template: (label, id, subLabel) => (label + (subLabel ? ` (${subLabel})` : "")).toLowerCase(),
        },
    config: {
        rows: ["state", "product_type"],
        columns: [],
        values: [
            {
                field: "profit",
                method: "sum"
            },
            {
                field: "sales",
                method: "sum"
            },
            // other values
        ],
    },
    fields,
});

Related samples:

Related articles: