Get Free Trial

JavaScript Pivot Table

A high-performance web pivot table and charts component designed for processing and analyzing large datasets. Built for enterprise environments, this data visualization library offers seamless integration for complex analytical workflows.

Edit in JSfiddle Get Free Trial

new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 550,
  toolbar: true,
  report: {
    dataSource: {
      type: "json",
      filename: "https://cdn.flexmonster.com/data/retail-data-2024.json",
      mapping: {
        "Quantity": {
          type: "number",
        },
        "Price": {
          type: "number",
        },
        "Retail Category": {
          type: "string",
        },
        "Sales": {
          type: "number",
        },
        "Order Date": {
          type: "year/quarter/month/day",
        },
        "Date": {
          type: "date",
        },
        "Status": {
          type: "string",
        },
        "Product Code": {
          type: "string",
        },
        "Phone": {
          type: "string",
        },
        "Country": {
          type: "string",
          folder: "Location",
        },
        "City": {
          type: "string",
          folder: "Location",
        },
        "CurrencyID": {
          type: "property",
          hierarchy: "Country",
        },
        "Contact Last Name": {
          type: "string",
        },
        "Contact First Name": {
          type: "string",
        },
        "Deal Size": {
          type: "string",
        },
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
          filter: {
            members: [
              "country.[australia]",
              "country.[usa]",
              "country.[japan]",
            ],
          },
        },
        {
          uniqueName: "Status",
        },
      ],
      columns: [
        {
          uniqueName: "Order Date",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
          format: "currency",
        },
      ],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: {
            uniqueName: "Price",
            aggregation: "sum",
          },
        },
      },
      expands: {
        rows: [
          {
            tuple: ["country.[japan]"],
          },
        ],
      },
      drills: {
        columns: [
          {
            tuple: ["order date.[2024]"],
          },
        ],
      },
      flatSort: [
        {
          uniqueName: "Price",
          sort: "desc",
        },
      ],
    },
    conditions: [
      {
        formula: "#value > 35000",
        measure: "Price",
        aggregation: "sum",
        format: {
          backgroundColor: "#00A45A",
          color: "#FFFFFF",
          fontFamily: "Arial",
          fontSize: "12px",
        },
      },
      {
        formula: "#value < 2000",
        measure: "Price",
        aggregation: "sum",
        format: {
          backgroundColor: "#df3800",
          color: "#FFFFFF",
          fontFamily: "Arial",
          fontSize: "12px",
        },
      },
    ],
    formats: [{
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2,
        nullValue: "-"
      },
      {
        name: "currency",
        currencySymbol: "$"
      }
    ]
  },
  customizeCell: customizeCell,
  shareReportConnection: {
    url: "https://olap.flexmonster.com:9500",
  },
  beforetoolbarcreated: function (toolbar) {
    toolbar.showShareReportTab = true;
  },
});

function customizeCell(cell, data) {
  if (data.type === "header" && data.hierarchy?.caption === "Country" && data.member?.properties) {
    const name = data.member.properties.CurrencyID;
    cell.addClass("fm-custom-cell");
    let flag;
    if (data.expanded) {
      flag = `<i class="fm-icon fm-expanded-icon" title="Click to collapse"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`;
    } else {
      flag = `<i class="fm-icon fm-collapsed-icon" title="Click to expand"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`;
    }
    cell.text = `<div style="display:flex; align-items:center; font-size:12px; position:relative;">
${flag}<span style="margin-left: 2px; line-height: 16px;">${data.member.caption}</span></div>`;
  }
}

<div id="pivot-container"></div>

.fm-custom-cell {
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
}

.fm-custom-cell .flag-icon {
  width: 21px !important;
  height: 16px !important;
  margin-left: 0 !important;
  margin-right: 2px !important;
}

#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
  top: -2px;
  height: 16px;
}

JavaScript pivot grid to work with massive data

Flexmonster is built to visualize large data (1 GB+) and millions of rows fast. By optimizing memory handling, Flexmonster keeps your workspace lag-free, even when processing massive volumes of data. It supports a wide variety of data sources, enabling seamless integration and rapid data processing for any tech stack:

CSV files
JSON files
Elasticsearch
Microsoft Analysis Services
MongoDB
SQL databases (MySQL, PostgreSQL, Oracle, etc.)
Other data sources

Advanced reporting and data analysis features

Flexmonster provides a comprehensive suite of Excel-like analytical tools that allow end-users to perform complex data operations directly in the browser:

Aggregate large datasets using sum, count, average, and other functions.
Use built-in filtering, multi-column sorting, and grouping.
Display grand totals and subtotals for rows and columns.
Choose between classic (tabular), compact, or flat views.
Drill-through: view raw data records behind any specific value cell.

The results of data analysis and reporting can be either printed or exported to files of the most common formats: PDF, CSV, Excel, HTML, or PNG. Developers can choose to download save files locally or send them directly to a server. To resume work later, save the report as JSON or share it via a link.

Embed a JS pivot grid into your application

Effortlessly add the pivot grid library to your web project by following our comprehensive how-to guide or watching our pivot table integration video tutorial.

Flexmonster pivot grid seamlessly integrates with all popular client-side frameworks (Angular, React, Vue, Blazor, etc.), server-side technologies, and programming languages. Check out the full list of available pivot table integrations.

Why use Flexmonster as your JavaScript pivot table component?

Flexmonster is a professional JavaScript pivot table component engineered for web-based data visualization. It embeds seamlessly into any website, CRM, ERP, or BI platform, providing end-users with interactive, real-time data analysis and reporting capabilities. With a fully customizable UI and extensive API, you can control everything from component styling to localization, ensuring it aligns perfectly with your application’s requirements.

MS Analysis Services

Prev Next

Frequently asked questions

Can't find your answer?
Visit the FAQ

What is Flexmonster Pivot Table & Charts?

Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.

Which frameworks does Flexmonster work with?

Which data sources can Flexmonster connect to?

How is Flexmonster licensed?

Can I try Flexmonster before buying?