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

React Pivot Table themes

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


    import React from "react";
    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";
    
    class PivotTableDemo extends React.Component {
      render() {
        return (
          <>
            <FlexmonsterReact.Pivot
              componentFolder="https://cdn.flexmonster.com/"
              height={600}
              toolbar={true}
              report={{
                dataSource: {
                  type: "csv",
                  filename: "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",
                    },
                  ],
                  sorting: {
                    column: {
                      type: "desc",
                      tuple: [],
                      measure: {
                        uniqueName: "Revenue",
                        aggregation: "sum",
                      },
                    },
                  },
                  expands: {
                    rows: [
                      {
                        tuple: ["salesperson.[laszlo horvath]"],
                      },
                    ],
                  },
                },
                formats: [
                  {
                    name: "",
                    thousandsSeparator: ",",
                    decimalSeparator: ".",
                    decimalPlaces: 2,
                    currencySymbol: "$",
                    positiveCurrencyFormat: "$1",
                    nullValue: "",
                    textAlign: "right",
                    isPercent: false,
                  },
                ],
              }}
              shareReportConnection={{
                url: "https://olap.flexmonster.com:9500",
              }}
              beforetoolbarcreated={(toolbar) => {
                toolbar.showShareReportTab = true;
              }}
            />
          </>
        );
      }
    }
    
    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 report theme in corporate branding colors and use it in the React reporting tool. Refer to the Customizing appearance guide to learn how to apply a built-in theme, add custom CSS over it, or create 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.