Fast and powerful web pivot table library for developers to process large datasets.
new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
height: 550,
toolbar: true,
report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/retail-data-2024.json",
mapping: {
"Quantity": {
type: "number",
},
"Price": {
type: "number",
},
"Retail Category": {
type: "string",
},
"Sales": {
type: "number",
},
"Order Date": {
type: "year/quarter/month/day",
},
"Date": {
type: "date",
},
"Status": {
type: "string",
},
"Product Code": {
type: "string",
},
"Phone": {
type: "string",
},
"Country": {
type: "string",
folder: "Location",
},
"City": {
type: "string",
folder: "Location",
},
"CurrencyID": {
type: "property",
hierarchy: "Country",
},
"Contact Last Name": {
type: "string",
},
"Contact First Name": {
type: "string",
},
"Deal Size": {
type: "string",
},
},
},
slice: {
rows: [
{
uniqueName: "Country",
filter: {
members: [
"country.[australia]",
"country.[usa]",
"country.[japan]",
],
},
},
{
uniqueName: "Status",
},
],
columns: [
{
uniqueName: "Order Date",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
format: "currency",
},
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Price",
aggregation: "sum",
},
},
},
expands: {
rows: [
{
tuple: ["country.[japan]"],
},
],
},
drills: {
columns: [
{
tuple: ["order date.[2024]"],
},
],
},
flatSort: [
{
uniqueName: "Price",
sort: "desc",
},
],
},
conditions: [
{
formula: "#value > 35000",
measure: "Price",
aggregation: "sum",
format: {
backgroundColor: "#00A45A",
color: "#FFFFFF",
fontFamily: "Arial",
fontSize: "12px",
},
},
{
formula: "#value < 2000",
measure: "Price",
aggregation: "sum",
format: {
backgroundColor: "#df3800",
color: "#FFFFFF",
fontFamily: "Arial",
fontSize: "12px",
},
},
],
formats: [{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
nullValue: "-"
},
{
name: "currency",
currencySymbol: "$"
}
]
},
customizeCell: customizeCell,
shareReportConnection: {
url: "https://olap.flexmonster.com:9500",
},
beforetoolbarcreated: function (toolbar) {
toolbar.showShareReportTab = true;
},
});
function customizeCell(cell, data) {
if (data.type === "header" && data.hierarchy?.caption === "Country" && data.member?.properties) {
const name = data.member.properties.CurrencyID;
cell.addClass("fm-custom-cell");
let flag;
if (data.expanded) {
flag = `<i class="fm-icon fm-expanded-icon" title="Click to collapse"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`;
} else {
flag = `<i class="fm-icon fm-collapsed-icon" title="Click to expand"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`;
}
cell.text = `<div style="display:flex; align-items:center; font-size:12px; position:relative;">
${flag}<span style="margin-left: 2px; line-height: 16px;">${data.member.caption}</span></div>`;
}
}
<div id="pivot-container"></div>
.fm-custom-cell {
display: flex !important;
align-items: center !important;
font-size: 12px !important;
}
.fm-custom-cell .flag-icon {
width: 21px !important;
height: 16px !important;
margin-left: 0 !important;
margin-right: 2px !important;
}
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
top: -2px;
height: 16px;
}
Flexmonster pivot table is a ready-made reporting tool that can show the data to your end-users fast. It can help them create interactive responsive pivot grids and charts from various data sources, such as:
Flexmonster pivot grid seamlessly integrates with all popular client-side frameworks (Angular, React, Vue, Blazor, etc.), server-side technologies, and programming languages. Check out the full list of available pivot table integrations.
You can add our pivot grid component to any project and adjust it to your needs. Pivot table can be customized to perfectly match your application’s design, localization, and customization preferences.
You and your end-users can control how the data records are arranged on the grid using the Flexmonster pivot table layouts: classic (tabular), compact, or flat. It is also possible to show details about value cells in the drill-through view.
The results of data analysis and reporting can be either printed or exported to files of the most common formats: PDF, CSV, Excel, HTML, or PNG. As a developer, you can define how an end-user can export their reports: to the local file system or a server.
If you want to save your report so that it can be restored in Flexmonster Pivot later, you can save the report as JSON or share it via the link.