Skip to main content

fields

Description​

Optional. An array of objects with fields for the Pivot table

The fields property in the configuration object controls how the widget interprets the types of the data fields it receives and allows defining the sorting order for a field.

Usage​

fields?: [{
    id: string,
    label?: string,
    type: "number" | "date" | "text",
    sort?: "asc" | "desc" | ((a: any, b: any) => number),
    format?: string | boolean | numberFormatOptions{}
}];

Parameters​

By default, if the property is not set, the widget automatically analyzes the incoming data and populates the fields object accordingly.

Each object in the fields array should have the following properties:

  • id - (required) the ID of a field
  • label - (optional) the field label to be displayed in GUI
  • type - (required) data type in a field ( "number", "date", or "string")
  • sort - (optional) defines the default sorting order for the field. Accepts "asc", "desc", or a custom sorting function
  • format - (optional) allows customizing the format of numbers and dates in a field; the format will be also applied during export
    • string - (optional) the format for dates (by default, Pivot uses dateFormat from locale)
    • boolean - (optional) if set to false, a number is displayed as is, without any formatting
    • numberFormatOptions - (optional) an object with options for formatting numeric fields; by default, numbers will be shown with a maximum of 3 decimal digits and group separation for the integer part is applied.
      • minimumIntegerDigits(number) - (optional) the minimum number of integer (for example, if the value is set to 2, the number 1 will be shown as "01"); the default is 1;
      • minimumFractionDigits(number) - (optional) the minimum number of fraction digits to use (for example, if the value is set to 2, the number 10.5 will be shown as "10.50"); the default is 1;
      • maximumFractionDigits(number) - (optional) the maximum number of fraction digits to use (for example, if the value is set to 2, the number 10.3333... will be shown as "10.33"); the default is 3;
        For more details about digit options refer to Digit options
      • prefix (string) - (optional) a string (before a number) for additional symbols like currency
      • suffix (string) - (optional) a string (after a number) for additional symbols like currency
info

If a template is applied via the tableShape property, it will override the format settings.

Example​

const table = new pivot.Pivot("#root", {
    fields: [
        {
            id: "rank",
            label: "Rank",
            type: "number"
        },
        {
            id: "title",
            label: "Title",
            type: "text"
        },
        {
            id: "genre",
            label: "Genre",
            type: "text"
        },
        {
            id: "studio",
            label: "Studio",
            type: "text"
        },
        {
            id: "type",
            label: "Type",
            type: "text"
        },
        {
            id: "score",
            label: "Score",
            type: "number"
        },
        //other fields
    ],
    data,
    config: {
        rows: ["studio", "genre"],
        columns: [],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            }
        ]
    }
});

Related articles:

Related sample: Pivot 2. Defining fields formats