Get Free Trial
Get Free Trial
  1. Pivot Table demo
Data Sources
  1. MS Analysis Services
  2. Elasticsearch
  3. JSON and CSV
Views
  1. One million rows
  2. Pivot charts
  3. Dashboard
  4. Classic (tabular) view
  5. Flat table
Integration
  1. With amCharts
  2. With Highcharts
  3. With FusionCharts
  4. With Google Charts
Other
  1. Themes
  2. Localization
  3. Heat map
  4. Custom cells
  5. Live data update
  1. More examples

Custom cells

Manage how entire rows, columns, or specific cells are styled within the pivot table component.

For the best experience

Play with the demo on a larger screen: save this link for later or watch the video review now.


Edit in JSfiddle Get Free Trial
    const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 600,
  report: {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
        {
          uniqueName: "Business Type",
        },
      ],
      columns: [
        {
          uniqueName: "Color",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Quantity",
          aggregation: "percentofcolumn",
        },
      ],
      expands: {
        expandAll: true,
      },
    },
    formats: [
      {
        decimalPlaces: 2,
      },
    ],
  },
  customizeCell: customizeCellFunction,
});

function customizeCellFunction(cell, data) {
  if (data?.type === "value" && !data?.isDrillThrough) {
    if (data.value < 5) {
      cell.text = `<img src="https://cdn.flexmonster.com/i/empty_pie.svg" class="centered">`;
    } else if (data.value >= 5 && data.value < 10) {
      cell.text = `<img src="https://cdn.flexmonster.com/i/quarter_pie.svg" class="centered">`;
    } else if (data.value >= 10 && data.value < 25) {
      cell.text = `<img src="https://cdn.flexmonster.com/i/half_pie.svg" class="centered">`;
    } else if (data.value >= 25 && data.value < 50) {
      cell.text = `<img src="https://cdn.flexmonster.com/i/three_quarters_pie.svg" class="centered">`;
    } else if (data.value >= 50) {
      cell.text = `<img src="https://cdn.flexmonster.com/i/full_pie.svg" class="centered">`;
    }
  }
}

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

    img.centered {
  display: block !important;
  margin: auto !important;
  color: transparent !important;
}

#fm-pivot-view .fm-grid-row {
  min-height: 47px;
}

    What makes Flexmonster different from other solutions on the market is its high customizability. Not only can you change component themes and customize the Toolbar, but you can also replace cell values with any visual content (e.g., with icons), highlight cells based on their data, add hyperlinks, style totals and grand totals, and more.

    In this demo, you can see how to substitute numbers with icons based on cell values. Play with the demo's code to learn how you can achieve this with one hook.

    See our live examples

    Heat map Live data update
    Prev Next

    Frequently asked questions

    Can't find your answer?
    Visit the FAQ

    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.