Skip to main content

Initialization

This guide will give you detailed instructions on how to create Pivot on a page to enrich your application with features of the Pivot table. 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.

Including source files​

See also how to download packages: Downloading packages.

To create a Pivot app, you need to include 2 source files on your page:

  • pivot.js
  • pivot.css

Make sure that you set 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">

Creating container​

Add a container for Pivot and give it an ID, for example "root":

index.html
<div id="root"></div>

Initializing Pivot​

Initialize Pivot with the pivot.Pivot constructor. It takes two parameters:

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

Configuration properties​

info

The full list of properties to configure Pivot can be found here.

Example​

In this snippet you can see how to initialize Pivot with the initial data: