With many different themes by Flexmonster Pivot Table & Charts for React, choose the color schemes that fit you most.
Play with the demo on a larger screen: save this link for later or watch the video review now.
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.