SpreadJS 14
Features / Pivot Table / Themes and Style
In This Topic
    Themes and Style
    In This Topic

    SpreadJS allows you to apply themes and styles over pivot table to change its appearance.

    Themes

    SpreadJS provides 29 light, 28 medium and 28 dark predefined themes which can be applied to a pivot table. The following image shows the light10 theme:

    Setting theme for pivot table

    You can change the theme of a pivot table in one of the following ways:

    Style

    You can apply a pivot table style to highlight any specific data. The style method can be used to apply styles to row and column fields. The following image shows the style for columns fields of a pivot table.

    Setting style

    The following example code shows how to apply style for column fields.

    JavaScript
    Copy Code
    function setMarkSubtotalPivotTableStyle(pivotTable) {
        // create style to mark Qtr Total's in specific color
        let style = new GC.Spread.Sheets.Style();
        style.backColor = "#03A685";
        let subtotalLabelPivotArea = {
            labelOnly: true,
            references: [{
                fieldName: "Qt",
                subtotal: true,
                items: ["Qtr1", "Qtr2", "Qtr3", "Qtr4"]
            }]
        };
        // set style to mark Qtr Total's in specific color
        pivotTable.setStyle(subtotalLabelPivotArea, style);
        let subtotalDataPivotArea = {
            dataOnly: true,
            references: [{
                fieldName: "Qtr",
                subtotal: true,
                items: ["Qtr1", "Qtr2", "Qtr3", "Qtr4"]
            }]
        };
        pivotTable.setStyle(subtotalDataPivotArea, style);
    }
    

    The following image shows the style for rows fields of a pivot table.

    Setting style

    The following example code shows how to apply style for row fields.

    JavaScript
    Copy Code
    function setMarkSeattlePivotTableStyle(pivotTable) {
        // create and set style to mark row with "Seattle" City
        let seattlePivotArea = {
            references: [{
                fieldName: "City",
                items: ["Seattle"],
                applyLabel: true,
                applyData: true,
                applyGrandTotal: true,
                applySubtotal: true
            }]
        };
        let style = new GC.Spread.Sheets.Style();
        style.backColor = "yellow";
        pivotTable.setStyle(seattlePivotArea, style);
    }