Examples

We often use JSFiddle.net to provide live examples of our pivot table component. JSFiddle is a free development environment that allows editing and execution of HTML, JavaScript and CSS. With the help of this tool, we have added more than 500 fiddles demonstrating our functionality: from API calls to integration with charting libraries. All examples are divided into categories. Please have a look at the categories menu on the left side. If you are not sure which category is needed just scroll down and look through the titles.

Check out more than 500 samples

Embedding Flexmonster

Flexmonster is embedded via new Flexmonster() API call. In this section, you can find various examples showing how to embed pivot table, including the integration with the Kendo UI Splitter widget.

    Data source

    Our component supports a variety of data sources: CSV, JSON, SQL databases and OLAP cubes. This section demonstrates the connection to each data source either by defining it in the report or using API calls.

      Configuring the mapping

      Using mapping, you can define how fields are treated and presented within the component. Learn how to specify the caption and type for the field, configure the field’s visibility in the component, create folders, configure multilevel hierarchies, etc.

        Configuring the slice

        Define which data is shown in your reports: add rows, columns, measures, and report filters. Learn how to configure sorting and different types of filtering, expand values, and many more in this section.

          Conditional formatting

          Flexmonster pivot table allows highlighting cells depending on their values. Conditional formatting is available both via API or via the user interface. This section shows how to configure conditional rules in our component.

            Number formatting

            Numeric values can easily be formatted in Flexmonster. This section shows how to set currency symbol, precision, thousand and decimal separators.

              Setting options

              With the help of options, it is possible to configure which functionality is available for the end users as well as the appearance of Flexmonster Pivot Table.

                Aggregation functions

                An aggregation function allows you to configure how the data records are aggregated into the value in the pivot table. This section shows how each aggregation works.

                  Calculated measures

                  Our pivot table allows creating calculated values which can be saved within the report and later be opened again. Calculated values can be added via UI, whereas this section shows how they are defined in the code.

                    Configuring the report

                    This section demonstrates various ways to define a report in Flexmonster. Each report contains information about the data and how it will be visualized.

                      Customizing the grid

                      Flexmonster provides customizeCell function which can modify each cell in the table during rendering. Below are the most common use cases of grid customization.

                        Customizing the Toolbar

                        Our pivot table comes with the Toolbar that provides access to the main functionality. This section shows different ways to modify the current Toolbar by adding or removing tabs.

                          Customizing the context menu

                          The context menu provides quick access to different features, such as sorting and filtering. You can customize the context menu and manage the list of available actions. See examples below for reference.

                            Demos

                            All demos from our Demos section are gathered below. Find different data sources, color schemes and views.

                              CSS themes

                              Flexmonster comes with sixteen predefined themes. Choose between available color schemes and change the style of the component.

                                Custom CSS

                                Configure the look and feel of Flexmonster Pivot Table by adding custom CSS styles. Everything can be customized: from font sizes to cell borders.

                                  Flexmonster Pivot Charts

                                  This section lists examples with the component's built-in charts — Flexmonster Pivot Charts.

                                    Highcharts

                                    See the data from a new perspective by integrating Flexmonster with Highcharts library. Find the needed Highcharts type in the list below.

                                      amCharts

                                      Extend the component's visualization functionality by integrating Flexmonster with amCharts library. Find the needed amCharts type in the list below.

                                      amCharts 5

                                        amCharts 4

                                          FusionCharts

                                          Get even more from data visualization by integrating with FusionCharts. Find the needed FusionCharts type in the list below.

                                            Google Charts

                                            Enhance web reporting experience by integrating with Google Charts. Find the needed Google Charts type in the list below.

                                              Other charting libraries

                                              Flexmonster can be integrated with any 3rd charting library. Here, we added integrations with Chart.js, d3.js, and other libraries.

                                                Custom UI controls and views

                                                This section contains examples of custom UI controls and views created for Flexmonster using its extensive API.

                                                  Events

                                                  Flexmonster offers a variety of different events. This section shows how they all work and also some interesting use cases.

                                                    Export and print

                                                    Export our pivot table to Excel, PDF, HTML, image, CSV, or simply print it. Check out the most popular ways to use export in the section below.

                                                      GlobalObject

                                                      With the GlobalObject, Flexmonster can save certain configurations common for all reports. This section demonstrates how the GlobalObject might be used.

                                                        Other

                                                        Here are gathered some other interesting use cases.