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.