Skip to main content

DHTMLX Pivot. Adding custom CSS for table and header cells example

Demo of conditional CSS styling for DHTMLX Pivot table and header cells. Apply color-coded classes (green, red, gray) based on cell values using the cellStyle callback in tableShape and headerShape.

Live example​

const widget = new pivot.Pivot("#pivot", {
    tableShape: {
        totalColumn: true,
        totalRow:true,
        cellStyle: (field, value, area, method, isTotal) => {
            if (field === "status" && area === "rows" && value) {
                if (value === "Down") {
                    return "status-down";
                } else if (value === "Up") {
                    return "status-up";
                } else if (value === "Idle") {
                    return "status-idle";
                }
            }
            if(isTotal ==="column" && area == "values"){
                if(value > 40)
                    return "status-up";
                else if (value < 5)
                    return "status-down";
            }
        }
    },
    headerShape:{
        cellStyle:(field, value, area, method, isTotal) => {
            if(field == "streaming")
                return value ==="no"?"status-down":"status-up";
        }
    },
    fields,
    data: dataset,
    config: {
        rows: [
            "protocol",
            "status",
        ],
        columns: [
            "streaming"
        ],
        values: [
            {
                field: "id",
                method: "count"
            }
        ]
    }
});

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

<!-- custom styles -->

<style>
.status-down {
		color: red;
	}
	.status-up {
		color: green;
	}
	.status-idle {
		color: gray;
	}
</style>

<script>
const dataset = [
      {
			"id": "fr-0001",
			"status": "Up",
			"rtt": 20,
			"bandwidth": 1200,
			"protocol": "OpenVPN",
			"encryption": "AES-256",
			"active_users": 100,
			"uptime": 72,
			"downtime": 1,
			"p2p": "yes",
			"streaming": "yes",
			"ip_pool": 3500,
			"ping": 98,
			"user_score": 4.7
		},
      {
			"id": "de-0001",
			"status": "Up",
			"rtt": 15,
			"bandwidth": 1500,
			"protocol": "OpenVPN",
			"encryption": "AES-256",
			"active_users": 90,
			"uptime": 96,
			"downtime": 0,
			"p2p": "yes",
			"streaming": "yes",
			"ip_pool": 3595,
			"ping": 99,
			"user_score": 4.8
		},
      // ... 148 more items (see Live Editor for full data)
    ]; 
			
			const fields = [
		{
			"id": "id",
			"label": "ID",
			"type": "text"
		},
		{
			"id": "status",
			"label": "Status",
			"type": "text"
		},
		{
			"id": "rtt",
			"label": "RTT",
			"type": "number"
		},
		{
			"id": "bandwidth",
			"label": "Bandwidth",
			"type": "number"
		},
		{
			"id": "protocol",
			"label": "Protocol",
			"type": "text"
		},
		{
			"id": "encryption",
			"label": "Encryption",
			"type": "text"
		},
		{
			"id": "active_users",
			"label": "Active Users",
			"type": "number"
		},
		{
			"id": "uptime",
			"label": "Uptime",
			"type": "number"
		},
		{
			"id": "downtime",
			"label": "Downtime",
			"type": "number"
		},
		{
			"id": "p2p",
			"label": "p2p",
			"type": "text"
		},
		{
			"id": "streaming",
			"label": "Streaming",
			"type": "text"
		},
		{
			"id": "ip_pool",
			"label": "IP Pool",
			"type": "number"
		},
		{
			"id": "ping",
			"label": "Ping",
			"type": "number"
		},
		{
			"id": "user_score",
			"label": "User score",
			"type": "number"
		}
	];
</script>

Pivot tables displaying status information, threshold metrics, or categorical data benefit from color-coded visual feedback. When monitoring server statuses (Up, Down, Idle) or evaluating aggregated counts against thresholds, plain numbers and text labels require extra cognitive effort to interpret. Color-coded cells let users spot issues at a glance.

DHTMLX Pivot provides cellStyle callbacks in both tableShape and headerShape configurations. These callbacks receive the field name, cell value, area type, aggregation method, and total flag - returning a CSS class name that gets applied to the cell element. This allows conditional styling based on any combination of these parameters without modifying the data or injecting HTML.

This example demonstrates three levels of conditional CSS: row cells colored by status value (green for "Up", red for "Down", gray for "Idle"), total column cells colored by value thresholds (green for values above 40, red for values below 5), and header cells colored by the "streaming" field value (green for "yes", red for "no").

Solution overview​

To apply conditional CSS classes to pivot cells, define a cellStyle function inside tableShape. This function receives five arguments: field, value, area, method, and isTotal. Return a CSS class name string to apply it to the cell, or return nothing for default styling. The function handles two conditions: status field values in the rows area map to "status-up", "status-down", or "status-idle" classes, while total column cells in the values area apply threshold-based coloring.

For header cells, define a separate cellStyle function inside headerShape with the same signature. In this example, it targets the "streaming" column header, applying "status-down" for "no" values and "status-up" for others. The actual CSS classes are defined in a <style> block with simple color rules: .status-up { color: green }, .status-down { color: red }, .status-idle { color: gray }.

Key points​

  • Dual cellStyle callbacks: Both tableShape.cellStyle and headerShape.cellStyle accept the same function signature (field, value, area, method, isTotal), providing consistent conditional logic for data cells and headers
  • Area-aware styling: The area parameter distinguishes between "rows" and "values" areas, allowing different styling rules for row labels versus aggregated values
  • Total column support: The isTotal parameter equals "column" for total column cells, enabling threshold-based formatting specifically for aggregated totals
  • CSS class approach: Returning class names (not inline styles) keeps styling concerns in CSS, making it easy to update colors, add transitions, or apply dark mode themes

API reference​

Additional resources​