Need a special offer?Find out if your project fits.
+
List of all demos

JavaScript Pivot Table demo

Fast and powerful web pivot table library for developers to process large datasets.


    new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      height: 550,
      toolbar: true,
      report: {
        dataSource: {
          type: "json",
          filename: "data/retail-data.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.[2019]"],
              },
            ],
          },
          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;
    }
    

    Show data from various data sources

    Flexmonster Pivot Table is a ready-made reporting tool that can show the data to your end-users fast. It can help them create interactive responsive pivot grids and charts from various data sources and formats, such as CSV, JSON, Elasticsearch, Microsoft Analysis Services, MongoDB, SQL databases (MySQL, PostgreSQL, Oracle, etc) or other custom data sources.

    Integrate pivot library with any tech stack

    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.

    Customize to fit your web application

    You can add our pivot grid component to any project and adjust it to your needs. Pivot table can be customized to perfectly match your application’s design, localization, and customization preferences.

    Use advanced reporting pivot table features

    • Data summarization
    • Filtering
    • Sorting
    • Grouping
    • Totaling values

    You and your end-users can control how the data records are arranged on the grid using the pivot table layouts: classic (tabular), compact, or flat.

    Share your report results

    The results of data analysis and reporting can be printed or exported to the files of the most common formats: PDF, CSV, Excel, HTML, or PNG. As a developer, you can define how an end-user can export their reports: to the local file system or a server.