Get Free Trial
  1. API reference
  2. Welcome
    1. Introduction
    2. Get Flexmonster
    3. Quick start
    4. System requirements
    5. Troubleshooting
    6. Managing license keys
    7. Migrating from WebDataRocks to Flexmonster
  3. Integration with frameworks
    1. Available tutorials
    2. Angular
      1. Integration with Angular
      2. Flexmonster usage in Angular
    3. React
      1. Integration with React
      2. Flexmonster usage in React
    4. Vue
      1. Integration with Vue 2
      2. Flexmonster usage in Vue 2
      3. Integration with Vue 3
      4. Flexmonster usage in Vue 3
    5. Other integrations
      1. Integration with Python
        1. Integration with Django
        2. Integration with Jupyter Notebook
      2. Integration with React Native
      3. Integration with Blazor
      4. Integration with AngularJS (v1.x)
      5. Integration with TypeScript
      6. Integration with R Shiny
      7. Integration with jQuery
      8. Integration with Ionic
      9. Integration with Electron.js
      10. Integration with Webpack
      11. Integration with RequireJS
  4. Connecting to Data Source
    1. Supported data sources
    2. JSON
      1. Connecting to JSON
      2. Connecting to JSON using Flexmonster Data Server
      3. Managing data presentation in JSON
    3. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Flexmonster Data Server
      3. Managing data presentation in CSV
    4. Database
      1. Connecting to SQL databases
      2. Connecting to a MySQL database
      3. Connecting to a Microsoft SQL Server database
      4. Connecting to a PostgreSQL database
      5. Connecting to an Oracle database
    5. Flexmonster Data Server
      1. Introduction to Flexmonster Data Server
      2. Getting started with Flexmonster Data Server
      3. Flexmonster Admin Panel Guide
      4. Data sources guide
      5. Security and authorization guide
      6. The Data Server as a DLL
        1. Getting started with the Data Server as a DLL
        2. Referencing the Data Server as a DLL
        3. Implementing the API controller
        4. Implementing the server filter
        5. Implementing the custom parser
        6. DLL configurations reference
        7. The controller's methods for request handling
      7. The Data Server as a console application
        1. Installing the Data Server as a console application
        2. Configurations reference
        3. Data sources guide
        4. Security and authorization guide
      8. Troubleshooting the Data Server
    6. MongoDB
      1. Introduction to Flexmonster MongoDB Connector
      2. Getting started with the MongoDB Connector
      3. Embedding the MongoDB Connector into the server
      4. Configuring the MongoDB Connector
    7. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Flexmonster Accelerator
      3. Referencing the Accelerator as a DLL
      4. Configuring the authentication process
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    8. Custom data source API
      1. Introduction to the custom data source API
      2. A quick overview of a sample Node.js server
      3. A quick overview of a sample .NET Core server
      4. Implement your own server
        1. Implementing the custom data source API server
        2. Implementing filters
        3. Supporting more aggregation functions
        4. Supporting multilevel hierarchies
        5. Returning data for the drill-through view
        6. Testing your custom data source API server
    9. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
    10. Connecting to other data sources
  5. Accessibility
    1. Accessibility overview
    2. Keyboard navigation
  6. Configuring the component
    1. Available tutorials
    2. Getting started with the report
    3. Configure the data source
      1. Data source
      2. Mapping
    4. Define which data to show
      1. Slice
      2. Custom sorting
      3. Calculated values
    5. Manage Flexmonster’s functionality
      1. Options
      2. Configuring global options
    6. Format fields
      1. Number formatting
      2. Date and time formatting
      3. Conditional formatting
  7. Saving component configs
    1. Available tutorials
    2. Save and restore the report
    3. Share the report
    4. Export and print
  8. Charts
    1. Available tutorials
    2. Flexmonster Pivot Charts
    3. Integration with Highcharts
    4. Integration with amCharts
    5. Integration with Google Charts
    6. Integration with FusionCharts
    7. Integration with any charting library
  9. Customizing
    1. Available tutorials
    2. Customizing the Toolbar
    3. Customizing appearance
    4. Customizing the context menu
    5. Customizing the grid
    6. Customizing the pivot charts
    7. Localizing the component
  10. Security
    1. Security in Flexmonster
    2. Security aspects of connecting to an OLAP cube
      1. Ways of connecting to an OLAP cube
      2. The data transfer process
      3. Data security
      4. Data access management
  11. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.8 to 2.9
    4. Migration guide from 2.7 to 2.8
    5. Migration guide from 2.6 to 2.7
    6. Migration guide from 2.5 to 2.6
    7. Migration guide from 2.4 to 2.5
    8. Migration guide from 2.3 to 2.4
    9. Migration guide from 2.2 to 2.3
  12. Flexmonster CLI Reference
    1. Overview
    2. Troubleshooting the CLI
    3. flexmonster create
    4. flexmonster add
    5. flexmonster update
    6. flexmonster version
    7. flexmonster help
  13. Documentation for older versions
Table of contents

Customizing the grid

Besides appearance customization of the component in general, Flexmonster also provides functionality for extended grid customization. The customizeCell API call allows styling up entire columns, rows, or specific cells according to a certain requirement. 

About the customizeCell API call

The customizeCell function is triggered for each table cell during rendering, and it has two parameters:

  • The cell builder, which contains the cell’s current HTML representation and through which the representation can be customized.
  • The CellDataObject, which contains information about the cell, e.g., its position on the grid and the semantics of data this cell represents. 

Check out a full description of the customizeCell parameters.

This guide contains seven examples illustrating how customizeCell helps in achieving visualization goals. To see more examples of customizeCell usage, visit the Examples page.

Example 1. Alternating row colors

This sample explains how to alternate row colors on the grid.

Here’s how the customizeCellFunction can be defined:

function customizeCellFunction(cell, data) {
  if (data.type == "value") {
    if (data.rowIndex % 2 == 0) {
    } else {

Here is the CSS code sample:

#fm-pivot-view .fm-grid-view div.alter {
  background-color: #e1e1e1;

In this sample, the CSS class is applied only to cells where data.type is "value", which means that the cell contains data.

Try a live sample on JSFiddle.

The same approach can be used for alternating column colors.

Example 2. Styling subtotals and grand totals

Totals in rows and columns can be styled independently. The CellDataObject has properties specifying if the cell is subtotal in the compact pivot table, subtotal in the classic form, or grand total. Based on the values of these properties in each cell, a CSS class can be added to it. Here is an example:

function customizeCellFunction(cell, data) {
	if (data.isClassicTotalRow) 

The CSS code sample:

#fm-pivot-view .fm-grid-view .fm-total-classic-r {
  background-color: #B2DBBF;

Try it on JSFiddle: Styling subtotals and grand totals.

Example 3. Highlighting levels through the entire grid

Highlighting entire levels in the pivot table, including data cells, is available through the CellDataObject’s level property. In this example, classes with colors for three levels are added to cells depending on their level property.

Note that .fm-level-{n} classes are already assigned to the row header cells, and customizeCellFunction adds classes to cells with data to highlight the entire level.

The CSS code sample:

#fm-pivot-view .fm-grid-view {
background-color: #6869aa;

#fm-pivot-view .fm-grid-view {
background-color: #8e8ebf;

#fm-pivot-view .fm-grid-view {
background-color: #aeaecf;

The customizeCellFunction can be defined as follows:

function customizeCellFunction(cell, data) {
  if (data.level != undefined) {
      cell.addClass("fm-level-" + data.level);

Live sample on JSFiddle: Highlighting levels through the entire grid.

Example 4. Highlighting cells based on their data

The CellDataObject has measure, rows, and columns properties that contain info about the cell’s semantics. Take a closer look at several samples demonstrating the usage of these properties.

4.a. Highlighting a certain member on the grid

This example describes how to highlight cells containing info about a certain member regardless of their position:

const highlightedMembers = {
"Country": ["Canada", "Germany"],
"Business Type": ["Warehouse"]

function customizeCellFunction(cell, data) {
if (data.rows) {
data.rows.forEach(row => {
if (highlightedMembers[row.hierarchyName] &&
highlightedMembers[row.hierarchyName].includes(row.caption)) {
if (data.columns) {
data.columns.forEach(column => {
if (highlightedMembers[column.hierarchyName] &&
highlightedMembers[column.hierarchyName].includes(column.caption)) {

Then, after the attributes were added, the following CSS selector can be written:

.highlight {
  background-color: #FFB74D !important;

Try a live sample on JSFiddle: Highlighting a certain member on the grid.

4.b. Highlighting a certain measure on the grid

This sample is similar to the previous sample, but information about the measure is added to cells as follows:

function customizeCellFunction(cell, data) {
if (data.measure) {
cell.attr["measure"] =;

Each HTML cell will have a measure attribute, and the following CSS selector will highlight the rows with Price:

#fm-pivot-view .fm-grid-view div[measure="Price"] {
background-color: #B2DBBF;

Live sample on JSFiddle: Highlighting a certain measure on the grid.

4.c. Adding all the semantic info to cell builder attributes

This JSFiddle example demonstrates another way of adding all the semantic info to cell builder attributes: Highlighting cells based on their semantic.

This sample takes into account the position of the hierarchies in rows and columns.

Example 5. Styling rows based on conditional formatting

It is also possible to highlight the entire row in the pivot table if the condition of the conditional formatting is true for at least one cell in this row. 

The CellDataObject has the conditions property containing a list of the conditional formatting ids that are true for this cell.

Check the JSFiddle example that applies formatting to the entire row if the condition is true for at least one cell in this row: Styling rows based on the conditional formatting.

Example 6. Representing numbers by icons

This example demonstrates how to replace cell values with the images depending on which interval the value belongs to: high, middle, and so forth. Try it on JSFiddle: Custom cells demo.

This case describes adding links to all the countries in the report. It can be done through the text property of the cell builder. Try a live sample on JSFiddle: Add hyperlinks.

The possibilities of customizeCell are not limited by the above seven cases. This API call covers many variants of visualization. To learn more about the customizeCell function and the CellDataObject, see the API documentation:

What’s next?

You may be interested in the following articles: