Skip to main content Skip to footer

Wijmo OLAP: Customizing the UI and PivotGrid

The images in our Excel export post show a user interface that looks like Excel. They were built using two controls:

  • The PivotPanel provides the area where you can drag and drop fields to build views, and
  • The PivotGrid shows the summary data, with collapsible rows and columns, and subtotals.

But those are just examples. You have complete flexibility to combine the controls in the Wijmo Olap module to build interfaces that meet your application’s requirements.

Full Wijmo OLAP series:

Dashboard-style interface with pre-defined views

This simple UI shows a list of pre-defined views on the left and a PivotGrid on the right. It is easy to use on desktop or mobile devices:

Custom PivotGrid with KPI icons and colors

The PivotGrid control extends the FlexGrid, so you can customize the display of the grid cells using the formatItem event and modifying the content of each cell with complete flexibility. For example, the PivotGrid below uses colors and icons similar to the ones in Excel's icon sets to show how sales changed from quarter to quarter:

Tabbed interface with PivotGrid, PivotChart, and Raw Data

The Wijmo Olap controls can be combined with any other HTML elements or controls on the page, providing complete flexibility when building user interfaces that are tailored for specific purposes. The example below uses Google’s Material Design Lite for the page layout and tabs. A column on the left of the page contains the PivotPanel used to customize the pivot view. A column on the right contains tabs that allow users to select between a PivotGrid, PivotChart, or the raw data:

More from the Wijmo OLAP series

  1. Getting Started with Wijmo's HTML5 OLAP Module: Create Basic Pivot Tables
  2. Answer Recurring Questions with Pre-Defined Views
  3. Filtering Data in a PivotGrid
  4. Exporting a PivotGrid to Excel
  5. Customizing the UI and PivotGrid

See Angular OLAP demo | See JS OLAP Demo


comments powered by Disqus