mark

defines the styling of cells via a predefined or custom function

Example

<style>
    .max_cell {
        background: #FF5722;
        color: #FFF
    }
 
    .min_cell {
        background: #4CAF50;
        color: #FFF
    }
</style>
 
var pivot = new dhx.Pivot(document.body, {
    data: dataset,
    fields: {
        // the fields structure         
    },
    fieldList: [
        // the list of fields
    ],
    // styling cells with min and max values 
    // via the predefined functions 
    mark: {
        min: "min_cell",
        max: "max_cell"
    }
});

You can set a custom styling for cells by specifying a function as a value of the mark option.

A custom function takes several parameters:

• cell - the value of a cell
• columnData - an array with the data of a column
• row - the object of a row
• column - the object of a column

Note that a custom function must return a string with the name of the applied CSS class.

<style>
    .mark {
        background: #757575;
        color: #FFF;
    }
 
    .customMaxCell {
        background: #ffd6d6;
    }
 
    .biggestMaxCell {
        background: #fa9595;
    }
</style>
 
 
var pivot = new dhx.Pivot(document.body, {
    data: dataset,
    fields: {
        // the fields structure         
    },
    fieldList: [
        // the list of fields
    ],
    // styling cells with values less than 10
    // via a custom function 
    mark: function (cell, columnData, row, column) {
        if (column.method === "max") {
            var max = Math.max.apply(null, columnData);
            if (max === parseFloat(cell)) {
                return "biggestMaxCell"
            }
            return "customMaxCell"
        }
        if (cell < 10 && cell !== null) {
            return "mark"
        }
        return false;
    }
});

Related sample:  Min/max mark

Related sample:  Custom mark

Back to top