### Install Dependencies and Start Dev Server (Yarn)

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-svelte.md

Commands to install project dependencies and start the development server using Yarn.

```bash
yarn 
yarn start // or yarn dev
```

--------------------------------

### Navigate and Install Dependencies

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-angular.md

Change directory into the newly created project and install all necessary dependencies using yarn. Then, start the development server.

```bash
cd my-angular-pivot-app
yarn
yarn start // or yarn dev
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-react.md

Install project dependencies and start the development server using npm.

```json
npm install
npm run dev
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-react.md

Install project dependencies and start the development server using Yarn.

```jsx
yarn
yarn start // or yarn dev
```

--------------------------------

### Install Dependencies for Documentation

Source: https://github.com/dhtmlx/docs-pivot/blob/master/README.md

Install the necessary project dependencies using Yarn.

```bash
$ yarn
```

--------------------------------

### Start Local Documentation Server

Source: https://github.com/dhtmlx/docs-pivot/blob/master/README.md

Run the documentation on a local server to explore it.

```bash
$ yarn start
```

--------------------------------

### Export Data Example

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/table/export.md

Demonstrates how to export data from the table. This example is interactive and can be run directly.

```html
<iframe src="https://snippet.dhtmlx.com/zjuloqxd?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
```

--------------------------------

### Example Usage of api.on()

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/internal/on-method.md

This example demonstrates how to use the api.on() method to listen for the 'open-filter' event and log the field label when a filter is activated.

```APIDOC
## Example Usage of api.on()

### Description
The example below shows how to output the label of a field for which the filter was activated.

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

table.api.on("open-filter", (ev) => {
    const fieldObj = ev.field;
    const field = fieldObj.base || fieldObj.field;

    if (field) {
        console.log("The field for which filter was activated:", ev.field.label);
    }
}, {tag: "open-filter-tag"});
```
```

--------------------------------

### Create React App

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-react.md

Use npx to create a new React project. Ensure Node.js and optionally Vite are installed.

```bash
npx create-react-app my-react-pivot-app
```

--------------------------------

### Create Svelte Project with Vite

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-svelte.md

Use this command to initialize a new Svelte project with Vite. Ensure Node.js is installed.

```bash
npm create vite@latest
```

--------------------------------

### Custom Header Template Example

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/config/headershape-property.md

This example demonstrates how to customize the header text by converting the default label, subLabel, and method to lowercase. This is useful for standardizing header appearance.

```jsx
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,
});
```

--------------------------------

### Import Pivot Trial Package

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-svelte.md

Import the Pivot component and its CSS file when using the trial version installed from the @dhx/trial-pivot package.

```html
<script>
import { Pivot } from '@dhx/trial-pivot';
import '@dhx/trial-pivot/dist/pivot.css';
</script>
```

--------------------------------

### Create Vue Project

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-vue.md

Use the official Vue project scaffolding tool to create a new Vue project. Ensure Node.js is installed before running this command.

```bash
npm create vue@latest
```

--------------------------------

### Import Pivot PRO Version

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-react.md

Import Pivot source files for the PRO version when installed from a local folder. Ensure the CSS file is correctly referenced.

```jsx
import { Pivot } from 'dhx-pivot-package';
import 'dhx-pivot-package/dist/pivot.css';
```

--------------------------------

### Import Pivot PRO Version

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-vue.md

Import Pivot source files for the PRO version when installing from a local folder. Ensure the CSS path is correct, using 'pivot.min.css' if the files are minified.

```html
<script>
import { Pivot } from 'dhx-pivot-package';
import 'dhx-pivot-package/dist/pivot.css';
</script>
```

--------------------------------

### Pivot Initialization with Data

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/config/data-property.md

Example of initializing the DHTMLX Pivot component with the `data` property.

```APIDOC
## Pivot Initialization with Data

### Example
```jsx
const table = new pivot.Pivot("#root", {
    fields,
    data: [
        {
            rank: 1,
            title: "Shingeki no Kyojin: The Final Season - Kanketsu-hen",
            popularity: 609,
            genre: "Action",
            studio: "MAPPA",
            type: "Special",
            episodes: 2,
            duration: 61,
            members: 347875,
            score: 9.17,
        },
        {
            rank: 2,
            title: "Fullmetal Alchemist: Brotherhood",
            popularity: 3,
            genre: "Action",
            studio: "Bones",
            type: "TV",
            episodes: 64,
            duration: 24,
            members: 3109951,
            score: 9.11
        },
        //other data objects
    ],
    config: {
        rows: ["studio", "genre"],
        columns: [],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            }
        ]
    }
});
```
```

--------------------------------

### Expand/Collapse All Rows Example

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/table/open-row.md

This example demonstrates how to open and close all rows in the DHTMLX Pivot table using a button click. It utilizes the getTable method to access the table instance and assumes tree mode is enabled.

```javascript
{
    view: "pivot",
    id: "pivot1",
    //... other pivot config
    on: {
        "open-row": (args) => {
            console.log(args);
            return false;
        },
        "close-row": (args) => {
            console.log(args);
            return false;
        }
    }
}
```

--------------------------------

### Implement Custom Sorting with UI Interaction

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/working-with-data.md

Set up default sorting for fields and enable UI interaction for sorting by clicking on column headers. This example includes updating icons and reconfiguring the table.

```jsx
const bar = document.getElementById("bar");

let sorted = ["studio", "genre"];
setFields();
bar.addEventListener('click', (e) => switchSort(e.target.id), false);

function setFields(){
    let html = "";
    let sortedFields = fields.filter(f => (sorted.indexOf(f.id) != -1));

    sortedFields.forEach((f) =>{
        const order = f.sort || "asc";
        html += `<div class="field" id="${f.id}">
                    ${f.label}<i class="icon wxi-${order}" ></i>
                </div>`;
    });
    bar.innerHTML = html;
}

function switchSort(id){
    fields.forEach(f => {
        if(f.id == id){
             f.sort =  f.sort != "desc" ? "desc" : "asc";
        }
    });
    // change fields in Pivot config
    table.setConfig({fields}); 
    // update icons
    setFields(bar, fields);
}

const table = new pivot.Pivot("#root", {
    fields,
    data: dataset,
    config: {
        rows: [
            "studio",
            "genre"
        ],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            }
        ]
    }
});
```

--------------------------------

### Define Pivot Structure and Aggregation

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/working-with-data.md

Configure the Pivot table's rows, columns, values, and filters using the 'config' property. This example shows how to set up aggregation methods for values.

```jsx
const table = new pivot.Pivot("#root", {
    fields,
    data,
    config: {
        rows: ["continent", "name"],
        columns: ["year"],
        values: [
            "count(oil)",
            { field: "oil", method: "sum" },
            { field: "gdp", method: "sum" }
        ]
    },
    fields,
    filters: {
        name: {
            contains: "B"
        }
    }
});
```

--------------------------------

### Include Pivot JS and CSS Files

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/loading-data.md

Includes the necessary DHTMLX Pivot JavaScript and CSS files in your HTML. Ensure the paths are correct for your project setup.

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

<script src="./common/data.js"></script>
```

--------------------------------

### Create New Angular Project

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-angular.md

Use Angular CLI to create a new Angular project. Ensure Server-Side Rendering (SSR) and Static Site Generation (SSG) are disabled if you plan to follow this guide.

```bash
ng new my-angular-pivot-app
```

--------------------------------

### Define Custom Mark Styles

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/stylization.md

Create CSS rules to define the visual appearance of marked cells. This example shows how to style cells marked with 'min_cell', 'max_cell', and 'g_avg' classes, ensuring they are distinct and readable.

```html
<style>
    .min_cell {
        background: #4caf50 !important;
        color: #fff;
    }

    #root .max_cell {
        background: #ff5722 !important;
        color: #fff;
    }

    .g_avg {
        background: #57a5c9 !important;
        color: #fff;
    }
</style>
```

--------------------------------

### Get Pivot Reactive State

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/internal/getreactivestate-method.md

Call this method to get an object containing the current configuration, data, and state of the Pivot. This is useful for inspecting or saving the Pivot's current setup.

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

// output the current config state to the console
let config;
let state = table.api.getReactiveState();

if (config) {
    console.log("There were some changes in Pivot config. Its current state:");
    console.log(config);
}
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-react.md

Change the current directory to the newly created React project.

```bash
cd my-react-pivot-app
```

--------------------------------

### Example: Removing the Last Value Field

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/events/delete-field-event.md

This example demonstrates how to trigger the delete-field event using the api.exec() method to remove the last field from the 'values' area. It retrieves the current state, identifies the last value field, and then executes the delete-field command.

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

//calling methods of API: remove a specific value from values in config
function removeLastField() {
    if (table.api) {
        const state = table.api.getState();
        const config = state.config;

        const count = config.values.length;

        if (count) {
            const lastValue = config.values[count - 1];

            table.api.exec("delete-field", {
                area: "values",
                id: lastValue.id, // auto-generated ID of an item added to config.values
            });
        }
    }
}

const button = document.createElement("button");

button.addEventListener("click", removeLastField);
button.textContent = "Remove";

document.body.appendChild(button);
```

--------------------------------

### Import Pivot Trial Version

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-vue.md

Import Pivot source files for the trial version. This is used for development and testing purposes.

```html
<script>
import { Pivot } from '@dhx/trial-pivot';
import '@dhx/trial-pivot/dist/pivot.css';
<script>
```

--------------------------------

### Import Trial Pivot Version

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-react.md

Import Pivot source files for the trial version. Note the different import paths compared to the PRO version.

```jsx
import { Pivot } from '@dhx/trial-pivot';
import "@dhx/trial-pivot/dist/pivot.css";
```

--------------------------------

### Get Pivot State

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/internal/getstate-method.md

Retrieves the current configuration of the Pivot, such as rows, columns, and values. This is useful for inspecting or saving the pivot's state.

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

const { config } = table.api.getState();
console.log(config); //output the config state to console
```

--------------------------------

### Intercepting 'add-field' to Redefine Default Method

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/working-with-data.md

Redefine the default method for a field when it's added. This example sets the 'max' method for numeric fields.

```javascript
const table = new pivot.Pivot("#root", {
  fields,
  data: dataset,
  config: {
    rows: ["studio", "genre"],
    columns: [],
    values: [
      {
        field: "title",
        method: "count",
      },
      {
        field: "score",
        method: "max",
      },
    ],
  },
});
//adding values with a predefined method
table.api.intercept("add-field", (ev) => {
  const { fields } = table.api.getState();
  const type = fields.find((f) => f.id == ev.field).type;

  if (ev.area == "values" && type == "number") {
    ev.method = "max";
  }
});
```

--------------------------------

### showConfigPanel()

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/methods/showconfigpanel-method.md

Shows or hides the Configuration panel. This method is useful for controlling the panel's visibility based on application state or user interactions.

```APIDOC
## showConfigPanel()

### Description
Shows or hides the Configuration panel.

### Method Signature
`showConfigPanel({mode: boolean}): void;`

### Parameters
#### Parameters
- **mode** (boolean) - Required - If `true`, the Configuration panel is shown. If `false`, the Configuration panel is hidden. Defaults to `true`.

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

table.showConfigPanel ({
    mode: false
});
```
```

--------------------------------

### Function to Get Data and Configuration

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/loading-data.md

Provides a function to retrieve data, configuration, and field definitions for Pivot. Ensure 'data' and 'fields' are defined before calling.

```jsx
function getData() {
    return {
        data,
        config: {
            rows: ["continent", "name"],
            columns: ["year"],
            values: [
                "count(oil)",
                { field: "oil", method: "sum" },
                { field: "gdp", method: "sum" }
            ],
            filters: {
                genre: {
                    contains: "D",
                    includes: ["Drama"],
                }
            }
        },
        fields
    };
}
const fields = [
    { id: "year", label: "Year", type: "number" },
    { id: "continent", label: "Continent", type: "text" },
    { id: "form", label: "Form", type: "text" },
    { id: "oil", label: "Oil", type: "number" },
    { id: "balance", label: "Balance", type: "number" }
];

const data = [
    {
        name: "Argentina",
        year: 2015,
        continent: "South America",
        form: "Republic",
        gdp: 181.357,
        oil: 1.545,
        balance: 4.699,
        when: new Date("4/21/2015")
    },
    //other data
];
```

--------------------------------

### Configure Pivot Component with Data and Filters

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/config/config-property.md

Initializes the Pivot component with fields, dataset, and configuration including rows, values, and filters. Demonstrates complex filter definitions.

```javascript
const table = new pivot.Pivot("#root", {
    fields,
    data: dataset,
    config: {
        rows: ["studio", "genre"],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            }
        ],
        filters: {
            genre: {
                contains: "D",
                includes: ["Drama"]
            },
            title: {
                // filter for another field ("title")
                contains: "A"
            }
        }
    }
});
```

--------------------------------

### Clone DHTMLX Pivot Documentation

Source: https://github.com/dhtmlx/docs-pivot/blob/master/README.md

Clone the documentation repository to your local machine and navigate into the directory.

```bash
$ git clone git@github.com:DHTMLX/docs-pivot.git
$ cd docs-pivot
```

--------------------------------

### Toggle Configuration Panel Programmatically

Source: https://context7.com/dhtmlx/docs-pivot/llms.txt

Use `showConfigPanel` to hide or show the configuration panel without user interaction. Pass `mode: false` to hide and `mode: true` to show.

```javascript
const table = new pivot.Pivot("#root", { fields, data, config: { /*...*/ } });

// Hide the configuration panel programmatically
table.showConfigPanel({ mode: false });

// Show it again
table.showConfigPanel({ mode: true });
```

--------------------------------

### Applying Default Methods in Pivot Configuration

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/working-with-data.md

Demonstrates how to apply default aggregation methods like 'count' and 'max' to specific fields within the pivot configuration's 'values' parameter.

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

--------------------------------

### Get Pivot DataStore Properties

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/internal/getstores-method.md

Call this method on the Pivot API instance to access the DataStore configuration. It returns an object containing the data store parameters.

```javascript
const stores = table.api.getStores();
console.log("DataStore:", stores);
```

--------------------------------

### getTable()

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/methods/gettable-method.md

Gets access to the underlying Table widget instance in the Pivot table. This method allows direct interaction with the Table API for operations such as data serialization and exporting.

```APIDOC
## getTable()

### Description
Gets access to the underlying Table widget instance in the Pivot table.

### Method Signature
`getTable(wait:boolean): Table | Promise;`

### Parameters
*   **wait** (boolean) - Optional - Defines if to wait until Table API is available in Pivot. If set to `true`, the method returns a promise with Table API.

### Example
```jsx
// Access table instance
let table_instance = table.getTable();

function toCSV() {
    table_instance.exeс("export", {
        options: {
            format: "csv",
            cols: ";"
        }
    });
}

// ... button event listener to call toCSV() ...
```

### Related Methods
*   [`close-row`](/api/table/close-row)
*   [`export`](/api/table/export)
*   [`filter-rows`](/api/table/filter-rows)
*   [`open-row`](/api/table/open-row)
```

--------------------------------

### Bootstrap the Angular Application

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/integration-with-angular.md

Update 'main.ts' to bootstrap the AppModule. This is the entry point for launching your Angular application with the Pivot component.

```jsx
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
```

--------------------------------

### Define Custom Predicates for Data Pre-processing

Source: https://context7.com/dhtmlx/docs-pivot/llms.txt

Custom predicates can be defined to transform field values before they are used. This example shows 'monthYear' for date grouping and 'profitSign' for categorizing numbers.

```javascript
const customPredicates = {
  monthYear: {
    label: "Month-year",
    type: "date",
    handler: d => new Date(d.getFullYear(), d.getMonth(), 1),
    template: (date, locale) => {
      const months = locale.getRaw().calendar.monthFull;
      return months[date.getMonth()] + " " + date.getFullYear();
    }
  },
  profitSign: {
    label: "Profit Sign",
    type: "number",
    filter: { type: "tuple", format: v => (v < 0 ? "Negative" : "Positive") },
    field: f => f === "profit",
    handler: v => (v < 0 ? -1 : 1),
    template: v => (v < 0 ? "Negative profit" : "Positive profit")
  }
};

const table = new pivot.Pivot("#pivot", {
  fields,
  data: dataset,
  predicates: { ...pivot.defaultPredicates, ...customPredicates },
  tableShape: { tree: true },
  config: {
    rows: ["product_type", "product"],
    columns: [
      { field: "profit", method: "profitSign" },
      { field: "date",   method: "monthYear" }
    ],
    values: [{ field: "sales", method: "sum" }]
  }
});
```

--------------------------------

### Initialize Pivot Component

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/overview/main-overview.md

Instantiate the Pivot component by providing an HTML container ID and a configuration object. Refer to the Pivot properties for detailed configuration options.

```jsx
new pivot.Pivot("#root", {
    // configuration parameters
});
```

--------------------------------

### Define Pivot Data

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/config/data-property.md

An example of how to structure the data array for the Pivot table. Each object represents a row with various properties like name, year, continent, and financial figures.

```javascript
const data = [
    {
        name: "Argentina",
        year: 2015,
        continent: "South America",
        form: "Republic",
        gdp: 181.357,
        oil: 1.545,
        balance: 4.699,
        when: new Date("4/21/2015")
    },
    {
        name: "Argentina",
        year: 2017,
        continent: "South America",
        form: "Republic",
        gdp: 212.507,
        oil: 1.732,
        balance: 7.167,
        when: new Date("1/15/2017")
    },
    {
        name: "Argentina",
        year: 2014,
        continent: "South America",
        form: "Republic",
        gdp: 260.071,
        oil: 2.845,
        balance: 6.728,
        when: new Date("6/16/2014")
    },
    {
        name: "Argentina",
        year: 2014,
        continent: "South America",
        form: "Republic",
        gdp: 324.405,
        oil: 4.333,
        balance: 5.99,
        when: new Date("2/20/2014")
    },
    {
        name: "Argentina",
        year: 2014,
        continent: "South America",
        form: "Republic",
        gdp: 305.763,
        oil: 2.626,
        balance: 7.544,
        when: new Date("8/17/2014")
    },
    //other data
];
```

--------------------------------

### Create Pivot Instance with Container (HTML)

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/how-to-start.md

Create a DIV element to serve as the container for the Pivot component and initialize the Pivot instance in your JavaScript code.

```html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with Pivot</title>
        <script src="./dist/pivot.js"></script>   
        <link href="./dist/pivot.css" rel="stylesheet">  
    </head>
    <body>
        <div id="root"></div>
        <script>
            const table = new pivot.Pivot("#root", {
                // configuration properties
            });
        </script>
    </body>
</html>
```

--------------------------------

### Initialize Pivot with Local Data

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/loading-data.md

Creates a new Pivot instance and initializes it with data obtained from the getData function. Requires a target element with the ID 'root'.

```jsx
const { data, config, fields } = getData();
const table = new pivot.Pivot("#root", { data, config, fields });
```

--------------------------------

### Detach an action handler

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/internal/detach-method.md

This example demonstrates how to attach an event handler with a specific tag and then detach it using the `detach` method. It logs messages when the 'open-filter' event occurs and stops logging when a button is clicked.

```javascript
const table = new pivot.Pivot("#root", {
    fields,
    data: dataset,
    config: {
        rows: ["studio", "genre"],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            }
        ]
    }
});

// add handler
if (table.api) {
    table.api.on(
        "open-filter",
        ({ area }) => {
            console.log("Opened: " + area);
        },
        { tag: "track" }
    );
}

// detach handler
function stop() {
    table.api.detach("track");
}

const button = document.createElement("button");

button.addEventListener("click", stop);
button.textContent = "Stop logging";

document.body.appendChild(button);
```

--------------------------------

### Pivot Constructor

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/overview/main-overview.md

Initializes a new Pivot instance. It requires an HTML container ID and a configuration object.

```APIDOC
## Pivot constructor

~~~jsx
new pivot.Pivot("#root", {
    // configuration parameters
});
~~~

**Parameters**:

- An HTML container (the ID of the HTML container)
- An object of the configuration parameters
```

--------------------------------

### Expand/Collapse All Rows in Tree Mode

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/configuration.md

When tree mode is enabled, use the `close-row` and `open-row` events via the `getTable` method to expand or collapse all rows. This example demonstrates controlling all data rows with button clicks.

```javascript
const table = new pivot.Pivot("#root", {
    tableShape: {
        tree: true
    },
    fields,
    data: dataset,
    config: {
        rows: ["type", "studio"],
        columns: [],
        values: [
            {
                field: "score",
                method: "max"
            },
            {
                field: "rank",
                method: "min"
            },
            {
                field: "members",
                method: "sum"
            },
            {
                field: "episodes",
                method: "count"
            }
        ]
    }
});

const api = table.api;
const table = api.getTable();
// setting all table branches closed on the table config update
api.intercept("render-table", (ev) => {
    ev.config.data.forEach((r) => (r.open = false));

    // returning "false" here will prevent the table from rendering
    // return false;
});

function openAll() {
    table.exec("open-row", { id: 0, nested: true });
}

function closeAll() {
    table.exec("close-row", { id: 0, nested: true });
}

const openAllButton = document.createElement("button");
openAllButton.addEventListener("click", openAll);
openAllButton.textContent = "Open all";

const closeAllButton = document.createElement("button");
closeAllButton.addEventListener("click", closeAll);
closeAllButton.textContent = "Close all";

document.body.appendChild(openAllButton);
document.body.appendChild(closeAllButton);
```

--------------------------------

### Fetch Server Data and Initialize Pivot

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/loading-data.md

Initializes Pivot with empty data and then fetches data and fields from server endpoints using the fetch API. Updates the Pivot instance with the fetched data.

```jsx
const table = new pivot.Pivot("#root", {fields:[], data: []});
const server = "https://some-backend-url";

Promise.all([
    fetch(server + "/data").then((res) => res.json()),
    fetch(server + "/fields").then((res) => res.json())
]).then(([data, fields]) => {
    table.setConfig({data, fields});
});
```

--------------------------------

### Format Currency Fields with Prefix and Decimal Places

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/working-with-data.md

Initialize the Pivot table with currency-related fields formatted using a `prefix` (e.g., '$') and specified `minimumFractionDigits` and `maximumFractionDigits` for consistent decimal display.

```jsx
// Initialize pivot with pre-defined dataset and fields
new pivot.Pivot("#pivot", {
    data,
    config: {
        rows: ["state", "product_type"],
        columns: [],
        values: [
            { field: "marketing", method: "sum" },
            // other values

        ],
    },
    fields:[
        // Custom format
        { id: "marketing", label: "Marketing", type:"number", format:{
                prefix: "$", minimumFractionDigits: 2, maximumFractionDigits: 2 }
        }
    ]
});
```

--------------------------------

### Customize Total Column Style

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/stylization.md

Adjust the appearance of total columns by overriding the `.wx-total` CSS class. This example sets a background color and font weight for total cells, differentiating them from regular data cells.

```html
<style>
    .wx-cell.wx-total {
        background: #fafafb;
        font-weight: var(--wx-header-font-weight);
    }
</style>
```

--------------------------------

### Accessing Table Instance and Exporting Data

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/methods/gettable-method.md

This snippet demonstrates how to obtain the Table widget instance from a Pivot instance and then use its API to export data in CSV format upon a button click. Ensure the Table API is available before calling `getTable` if used during initialization.

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

// access table instance
let table_instance = table.getTable();

function toCSV() {
    table_instance.exeс("export", {
        options: {
            format: "csv",
            cols: ";"
        }
    });
}

const exportButton = document.createElement("button");

exportButton.addEventListener("click", toCSV);
exportButton.textContent = "Export";

document.body.appendChild(exportButton);
```

--------------------------------

### Intercepting 'render-table' Event

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/internal/intercept-method.md

Use this snippet to intercept the 'render-table' event and modify its configuration, for example, to make all rows collapsible at initialization. The callback receives the event object, and an optional tag can be provided to manage the handler.

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

//make all rows close at the initialization
table.api.intercept("render-table", (ev) => {
    ev.config.data.forEach((row) => (row.open = false));
}, {tag: "render-table-tag"});
```

--------------------------------

### Triggering the delete-field event with exec

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/internal/exec-method.md

This example demonstrates how to use `api.exec()` to trigger the `delete-field` event, removing the last field from the 'values' area of the pivot configuration. It uses `api.getState()` to retrieve the current configuration before executing the event.

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

function removeLastField() {
    if (table.api) {
        const state = table.api.getState();
        const config = state.config;

        const count = config.values.length;

        if (count) {
            const lastValue = config.values[count - 1];

            table.api.exec("delete-field", {
                area: "values",
                id: lastValue.id, // auto-generated ID of an item added to config.values
            });
        }
    }
}

const button = document.createElement("button");

button.addEventListener("click", removeLastField);
button.textContent = "Remove";

document.body.appendChild(button);
```

--------------------------------

### Initialize Pivot with Constructor

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/initialization.md

Initialize the Pivot component using the pivot.Pivot constructor. Pass the ID of the HTML container and an object with configuration properties like fields, data, and layout settings.

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

--------------------------------

### setConfig() method

Source: https://context7.com/dhtmlx/docs-pivot/llms.txt

The `setConfig()` method allows you to update the widget's configuration partially at runtime, preserving existing settings and automatically re-initializing the widget.

```APIDOC
## `setConfig()` method — runtime configuration update

Partially updates the widget configuration. Only the keys provided are changed; all other settings are preserved. The widget re-initializes automatically.

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

// Add a third row field and an extra value column
table.setConfig({
  config: {
    rows: ["studio", "genre", "duration"],
    columns: [],
    values: [
      { field: "title",    method: "count" },
      { field: "score",    method: "max"   },
      { field: "type",     method: "count" }
    ]
  }
});

// Load new data from a server without rebuilding from scratch
const server = "https://api.example.com";
Promise.all([
  fetch(server + "/data").then(r => r.json()),
  fetch(server + "/fields").then(r => r.json())
]).then(([data, fields]) => table.setConfig({ data, fields }));
```
```

--------------------------------

### Intercepting add-field Event to Set Default Method

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/api/events/add-field-event.md

Use the api.intercept() method to listen for the 'add-field' event and modify the event object. This example sets the 'min' method for new numeric fields added to the 'values' area.

```javascript
const table = new pivot.Pivot("#root", {
    fields,
    data: dataset,
    config: {
        rows: ["studio", "genre"],
        columns: [],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            }
        ]
    }
});
//adding values with a predefined method
table.api.intercept("add-field", (ev) => {
    const { fields } = table.api.getState();
    const type = fields.find((f) => f.id == ev.field).type;

    if (ev.area == "values" && type == "number") {
        ev.method = "min";
    }
});
```

--------------------------------

### Hide Configuration Panel via API

Source: https://github.com/dhtmlx/docs-pivot/blob/master/docs/guides/configuration.md

Use the `api.exec()` method with the `show-config-panel` event and `mode: false` to hide the configuration panel after initialization.

```jsx
const table = new pivot.Pivot("#root", {
    fields,
    data,
    config: {
        rows: ["studio", "genre"],
        columns: [],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            }
        ]
    }
});
//hide the configuration panel
table.api.exec("show-config-panel", {
    mode: false
});
```