Flexmonster MCP Server is here! Connect your ✨AI assistant to our documentation. Get started
+
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

React Pivot Table themes

With many different themes by Flexmonster Pivot Table & Charts for React, choose the color schemes that fit you most.

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
    import * as FlexmonsterReact from "react-flexmonster";

import "flexmonster/theme/stripedblue/flexmonster.css";

// More themes:
// import "flexmonster/theme/stripedteal/flexmonster.min.css";
// import "flexmonster/theme/purple/flexmonster.min.css";
// import "flexmonster/theme/blackorange/flexmonster.min.css";
// import "flexmonster/theme/brightorange/flexmonster.min.css";
// import "flexmonster/theme/yellow/flexmonster.min.css";
// import "flexmonster/theme/green/flexmonster.min.css";
// import "flexmonster/theme/midnight/flexmonster.min.css";
// import "flexmonster/theme/macos/flexmonster.min.css";
// import "flexmonster/theme/softdefault/flexmonster.min.css";
// import "flexmonster/theme/lightblue/flexmonster.min.css";
// import "flexmonster/theme/dark/flexmonster.min.css";
// import "flexmonster/theme/teal/flexmonster.min.css";
// import "flexmonster/theme/orange/flexmonster.min.css";
// import "flexmonster/theme/old/flexmonster.min.css";

function PivotTableDemo() {
  const report = {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/data/sales.csv"
    },
    slice: {
      rows: [
        {
          uniqueName: "Salesperson"
        },
        {
          uniqueName: "Payment Method"
        }
      ],
      columns: [
        {
          uniqueName: "Month",
          filter: {
            members: ["month.[june]", "month.[july]", "month.[august]"]
          }
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Revenue",
          aggregation: "sum",
          format: "currency"
        }
      ],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: {
            uniqueName: "Revenue",
            aggregation: "sum"
          }
        }
      },
      expands: {
        rows: [
          {
            tuple: ["salesperson.[laszlo horvath]"]
          }
        ]
      }
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        nullValue: "",
        textAlign: "right",
        isPercent: false
      },
      {
        name: "currency",
        decimalPlaces: 2,
        currencySymbol: "$",
        positiveCurrencyFormat: "$1"
      }
    ]
  };

  return (
    <>
      <FlexmonsterReact.Pivot
        height={600}
        toolbar={true}
        report={report}
        beforetoolbarcreated={(toolbar) => {
          toolbar.showShareReportTab = true;
        }}
        shareReportConnection={{
          url: "https://olap.flexmonster.com:9500"
        }}
      />
    </>
  );
}

export default PivotTableDemo;

    Just one line of code will change the component's style. We have a variety of predefined skins, ten of which are shown in the demo above. Check the full list of available built-in themes.

    Pick among these themes or create a custom theme in corporate branding colors and use it in the React reporting tool. Refer to the Changing themes guide to learn how to apply a built-in theme, add custom CSS over it, or create a new one from scratch.

    We added a custom theme builder app to make it easy for you to create a personalised theme for Flexmonster for React. Use it to build themes quickly and keep Flexmonster styles in one place.

    See our live examples

    With Google Charts Localization
    Prev Next

    Frequently asked questions

    Can't find your answer here?
    Visit the FAQ page

    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.