Skip to main content

DHTMLX Pivot. Styling (custom CSS) for total column example

Demo of custom CSS styling for the total column in DHTMLX Pivot. Use the .wx-cell.wx-total CSS selector to apply a distinct background color and bold font weight to summary cells, making totals stand out visually.

Live example​

const widget = new pivot.Pivot("#pivot", {
    tableShape: {
        split: {
            left: true, //freezes all fields from rows on the left side 
            right: true //freezes Total column(s) on the right side 
        },
        totalRow: true,
        totalColumn: true,
    },
    fields,
    data: dataset,
    config: {
        rows: [
            "state"
        ],
        columns: [
            "product_line",
            "product_type",
            "product"
        ],
        values: [
            {
                field: "profit",
                method: "sum"
            },
            {
                field: "profit",
                method: "median"
            }
        ]
    },
    columnShape: {
        autoWidth: {
            columns: {
                profit: true,
                state: true
            },
        },
    },
});

<!-- component container -->
<div id="pivot" style="width: 100%; height: 100%;"></div>

<!-- custom styles -->

<style>
.wx-cell.wx-total {
        background: #fafafb;
        font-weight: var(--wx-header-font-weight);
    }
</style>

<script>
const dataset = [
      {
        "cogs": 51,
        "date": "10/1/2018",
        "inventory_margin": 503,
        "margin": 71,
        "market_size": "Major Market",
        "market": "Central",
        "marketing": 46,
        "product_line": "Leaves",
        "product_type": "Herbal Tea",
        "product": "Lemon",
        "profit": -5,
        "sales": 122,
        "state": "Colorado",
        "expenses": 76,
        "type": "Decaf"
      },
      {
        "cogs": 52,
        "date": "10/1/2018",
        "inventory_margin": 405,
        "margin": 71,
        "market_size": "Major Market",
        "market": "Central",
        "marketing": 17,
        "product_line": "Leaves",
        "product_type": "Herbal Tea",
        "product": "Mint",
        "profit": 26,
        "sales": 123,
        "state": "Colorado",
        "expenses": 45,
        "type": "Decaf"
      },
      // ... 1060 more items (see Live Editor for full data)
    ];
    const fields = [
      {
        "id": "cogs",
        "label": "Cogs",
        "type": "number"
      },
      {
        "id": "date",
        "label": "Date",
        "type": "date"
      },
      {
        "id": "inventory_margin",
        "label": "Inventory Margin",
        "type": "number"
      },
      {
        "id": "margin",
        "label": "Margin",
        "type": "number"
      },
      {
        "id": "market_size",
        "label": "Market Size",
        "type": "text"
      },
      {
        "id": "market",
        "label": "Market",
        "type": "text"
      },
      {
        "id": "marketing",
        "label": "Marketing",
        "type": "number"
      },
      {
        "id": "product_line",
        "label": "Product Line",
        "type": "text"
      },
      {
        "id": "product_type",
        "label": "Product Type",
        "type": "text"
      },
      {
        "id": "product",
        "label": "Product",
        "type": "text"
      },
      {
        "id": "profit",
        "label": "Profit",
        "type": "number"
      },
      {
        "id": "sales",
        "label": "Sales",
        "type": "number"
      },
      {
        "id": "state",
        "label": "State",
        "type": "text"
      },
      {
        "id": "expenses",
        "label": "Expenses",
        "type": "number"
      },
      {
        "id": "type",
        "label": "Type",
        "type": "text"
      }
    ];
</script>

When pivot tables include a total column alongside many data columns, the summary values can blend in with regular data cells. Users scanning across a wide table may struggle to distinguish total aggregations from individual breakdowns, especially when the total column sits at the far right edge after horizontal scrolling.

DHTMLX Pivot assigns the .wx-total CSS class to total column cells. By targeting .wx-cell.wx-total in your stylesheet, you can apply custom background colors, font weights, or any other visual treatment to make total cells immediately recognizable. Combined with the tableShape.split property to freeze the total column on the right, this creates a prominent, always-visible summary section.

This example configures a pivot with state rows and three levels of column grouping (Product Line, Product Type, Product). The total column displays Profit (Sum) and Profit (Median) aggregations. CSS gives total cells a light gray background (#fafafb) and bold font weight, while the split configuration keeps totals frozen on the right side of the table.

Solution overview​

Enable totalColumn: true in tableShape and use split.right: true to freeze the total column. Then add a CSS rule targeting .wx-cell.wx-total to style the total cells differently from regular data cells.

Key points​

  • Built-in CSS class: DHTMLX Pivot automatically applies the .wx-total class to total column cells, providing a ready-made hook for custom styling
  • Visual distinction: A light background and bold font weight make total cells stand out from regular data cells, improving scanability across wide tables
  • Frozen total column: Combine split.right: true with totalColumn: true to keep the styled total column visible at all times during horizontal scrolling
  • CSS variable integration: Use var(--wx-header-font-weight) to maintain consistency with the pivot's built-in header styling rather than hardcoding weight values

API reference​

  • Pivot tableShape: Configuration for table appearance including split, totalRow, and totalColumn settings.
  • Pivot columnShape: Configuration for column behavior including auto-width settings.
  • Pivot configuration: Properties for defining rows, columns, and value aggregations.

Additional resources​