Flexmonster Pivot Table & Charts provides an impeccable connection to Microsoft Analysis Services cubes.
import React from "react";
import * as FlexmonsterReact from "react-flexmonster";
class PivotTableDemo extends React.Component {
render() {
return (
<>
<div className="App">
<FlexmonsterReact.Pivot
componentFolder="https://cdn.flexmonster.com/"
height={600}
toolbar={true}
report={{
dataSource: {
type: "microsoft analysis services",
proxyUrl: "https://olap.flexmonster.com:8085/",
catalog: "Adventure Works DW Standard Edition",
cube: "Adventure Works",
binary: true,
},
slice: {
rows: [
{
uniqueName: "[Product].[Product Categories]",
},
],
columns: [
{
uniqueName: "[Customer].[Country]",
},
{
uniqueName: "[Date].[Month of Year]",
caption: "Month",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "[Measures].[Internet Total Product Cost]",
format: "currency",
},
{
uniqueName: "[Measures].[Internet Average Sales Amount]",
active: false,
format: "currency",
},
{
uniqueName: "[Measures].[Gross Profit]",
active: false,
format: "currency",
},
],
drills: {
rows: [
{
tuple: ["[Product].[Product Categories].[Category].&[4]"],
},
{
tuple: [
"[Product].[Product Categories].[Subcategory].&[28]",
],
},
{
tuple: [
"[Product].[Product Categories].[Subcategory].&[25]",
],
},
],
},
memberProperties: [
{
levelName: "[Product].[Product Categories].[Product]",
properties: ["List Price", "Start Date"],
},
],
},
options: {
showMemberProperties: true,
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
},
{
name: "currency",
currencySymbol: "$",
},
],
}}
shareReportConnection={{
url: "https://olap.flexmonster.com:9500",
}}
beforetoolbarcreated={(toolbar) => {
toolbar.showShareReportTab = true;
}}
/>
</div>
</>
);
}
}
export default PivotTableDemo;
#fm-pivot-view .fm-grid-view div.fm-level-0.fm-cell,
#fm-pivot-view .fm-grid-view div.fm-level-0.fm-cell.fm-total {
background-color: #a7d6ae;
}
#fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell,
#fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell.fm-header,
#fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell.fm-total {
background-color: #bee8c5;
}
#fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell,
#fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell.fm-header,
#fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell.fm-total {
background-color: #e1f7e4;
}
#fm-pivot-view .fm-grid-layout .fm-grand-total {
background-color: #f5f5f5 !important;
}
#fm-pivot-view .fm-grid-layout span.fm-hierarchy-link {
color: #0d0d0d !important;
}
Our React pivot grid allows you to connect to OLAP cubes using the XMLA protocol or a much faster approach via the Flexmonster Accelerator — a server-side proxy. Flexmonster works efficiently both with SSAS tabular and multidimensional models.
Refer to the Connecting to Microsoft Analysis Services guide to learn all the details needed to start with Microsoft Analysis Services and React pivot table.
To learn how to connect to Microsoft Analysis Services or Azure Analysis Services with the highest performance, get straight to the Getting started with Flexmonster Accelerator guide.