Initialization

This guide explains how to create Pivot on a page and enrich your application with Pivot table features. Take the following steps to get a ready-to-use component:

1. Include the Pivot source files on a page.
2. Create a container for Pivot.
3. Initialize Pivot with a constructor.

Include source files

A Pivot app requires two source files on the page. For instructions on downloading the package, see Downloading packages.

Include the following files:

• pivot.js
• pivot.css

Set the correct relative paths to the source files:

index.html

<script type="text/javascript" src="./dist/pivot.js"></script>  
<link rel="stylesheet" href="./dist/pivot.css">

Create a container

Pivot renders into an HTML container element. Add a container and assign an ID, for example "root":

index.html

<div id="root"></div>

Initialize Pivot

The pivot.Pivot constructor takes two parameters:

• the ID of the HTML container
• an object with configuration properties

The following code snippet creates a Pivot instance in the "root" container with initial fields, data, and structure:

// create Pivot
const table = new pivot.Pivot("#root", {
    // configuration properties
    fields,
    data,
    config: {
        rows: ["studio", "genre"],
        columns: ["title"],
        values: [
            {
                field: "score",
                method: "max"
            }
        ]
    }
});

The constructor returns a Pivot instance. Call API methods on the returned instance:

• getTable — get access to the underlying Table widget instance
• setConfig — update the current Pivot configuration
• setLocale — apply a new locale to Pivot
• showConfigPanel — show or hide the Configuration panel

Configuration properties

The Pivot constructor accepts an object with configuration properties that control data, layout, and behavior.

info

For the full list of properties to configure Pivot, see Properties overview.

Example

The snippet below initializes Pivot with the initial data: