This guide shows how to specify configurations that will be common for all reports. You can configure the following:
To apply global configs, use the GlobalObject, which can be considered as a global parent report:
const pivot = new Flexmonster({
container: "pivot-container",
global: {
// Global configs
}
// Other configs
});To specify a data source for all reports, configure the global.dataSource property:
global: {
dataSource: {
filename: "https://cdn.flexmonster.com/data/data.csv"
}
}For more info about available data source configurations, see the DataSourceObject.
To specify options for all reports, configure the global.options property.
The following example demonstrates how to specify the readOnly option for all reports:
global: {
options: {
readOnly: true
}
}In the next example, we apply date and time formatting for all reports using the datePattern option:
global: {
options: {
datePattern: "'Date: 'MM/dd/yy"
}
}Read more about available options in the Options guide.
To specify a localization for all reports, configure the global.localization property:
global: {
localization: "https://cdn.flexmonster.com/loc/es.json"
}To learn more about localization, read the Localizing the component guide.
If a configuration is set both in the global settings and inside the report, the report-specific value will override the global one. For example, check out the following Flexmonster configuration:
const pivot = new Flexmonster({
container: "pivot-container",
global: {
options: {
readOnly: true
},
},
report: {
dataSource: {
filename: "data/data.json"
},
options: {
readOnly: false
}
}
});As a result, options.readOnly is set to false, and the report remains interactive.
Can't find your answer?
Visit the FAQ
Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.
Flexmonster works in plain JavaScript and TypeScript projects. It also integrates with React, Next.js, Angular, Vue, Blazor, and other technologies. See all integration options.
Flexmonster supports JSON and CSV files, SQL databases, MongoDB, Elasticsearch, and Microsoft Analysis Services (SSAS). You can also connect other data sources through your own backend. See supported data sources.
Flexmonster offers licenses for internal corporate use, SaaS products, and OEM distribution. Pricing varies by license and plan. SaaS projects can also use the free SaaS Entry license during development. Learn more on the pricing page.
Yes. Flexmonster offers a 30-day free trial that lets you evaluate all its features. No credit card is required. The trial version has a watermark.
To get started with Flexmonster, follow our integration guide.