We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
List of all demos

React Pivot Table: custom cells

Control how rows, columns, or specific cells are styled inside the React pivot table component.


    import React from "react";
    import * as FlexmonsterReact from "react-flexmonster";
    
    class PivotTableDemo extends React.Component {
      render() {
        return (
          <>
            <FlexmonsterReact.Pivot
              componentFolder="https://cdn.flexmonster.com/"
              height={600}
              toolbar={true}
              report={{
                dataSource: {
                  type: "csv",
                  filename: "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={this.customizeCellFunction}
              shareReportConnection={{
                url: "https://olap.flexmonster.com:9500",
              }}
              beforetoolbarcreated={this.customizeToolbar}
            />
          </>
        );
      }
    
      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'>`;
          }
        }
      };
    
      customizeToolbar = (toolbar) => {
        toolbar.showShareReportTab = true;
        const tabs = toolbar.getTabs();
        toolbar.getTabs = () => {
          const exportTab = tabs.find(tab => tab.id == "fm-tab-export");
          if (!exportTab) return tabs;
          const exportToTabs = exportTab.menu.filter(
            tab => tab.id == "fm-tab-export-html" || 
            tab.id == "fm-tab-export-csv" || 
            tab.id == "fm-tab-export-excel" || 
            tab.id == "fm-tab-export-pdf");
          if (!exportToTabs) return tabs;
          exportToTabs.map(exportToTab => exportToTab.handler = () => {
            const exportType = exportToTab.id.substring(14);
            pivotRef.current.flexmonster.exportTo(exportType, {
              useCustomizeCellForData: false
            });
          });
          return tabs;
        }
      };
    }
    
    export default PivotTableDemo;
    
    img.centered {
      display: block !important;
      margin: auto !important;
      color: transparent !important;
    }
    
    #fm-pivot-view .fm-grid-row {
      min-height: 47px;
    }
    

    Flexmonster for React differentiates from the other solutions on the market with its high customizability. You already know that you can change report 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 semantics, add hyperlinks, style totals and grand totals, and more.

    Here you can see how to substitute numbers with icons based on cell values. Play with the demo’s code to learn how to reach this with one hook.