Get Free Trial
List of all demos

JavaScript Pivot Table demo

Fast and powerful JavaScript pivot grid for data visualization and reporting.


    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.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: "-13w0a1w1c23j00",
            },
          ],
          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: "-13w0a1w1c23j00",
            thousandsSeparator: " ",
            decimalSeparator: ".",
            decimalPlaces: 0,
            currencySymbol: "$",
            positiveCurrencyFormat: "$1",
            nullValue: "-",
            textAlign: "right",
            isPercent: false,
          },
        ],
      },
      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;
    }
    

    With Flexmonster as a reporting tool, you can display the data to your end-users and let them create interactive reports based on the underlying data source: CSV, JSON, Elasticsearch, Microsoft Analysis Services, MongoDB, SQL databases (MySQL, PostgreSQL, Oracle, etc) or other custom data sources.

    Flexmonster seamlessly integrates with all popular client-side frameworks, server-side technologies, and programming languages. Check out the full list of available pivot table integrations.

    Our web pivot control offers a lot of advanced reporting features out of the box:

    • Data summarization
    • Filtering
    • Sorting
    • Grouping

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

    Moreover, 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.