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

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
  • 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​

const table = new pivot.Pivot("#root", {
    fields,
    data: dataset,
    config: {
        rows: ["studio", "genre"],
        columns: [],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            }
        ]
    },
    headerShape: {
        vertical: true,
        template: (label, field, subLabel) => field + (subLabel ? ` (${subLabel})` : "")
    }
});

Related samples:

Related article: Configuration