Skip to main content

DHTMLX Pivot. Alternate row color (striped rows, zebra-striping) example

Demo of alternating row colors (zebra striping) in DHTMLX Pivot using pure CSS. Improves readability in large datasets with automatic nth-child selectors that persist across filtering, sorting, and data operations.

Live example​

const widget = new pivot.Pivot("#pivot", {
    fields, 
    data: dataset,
    config:  {
		rows: [
            "state"
        ],
        columns: [
            "product_line",
            "product_type"
        ],
        values: [
            {
                field: "profit",
                method: "var"
            },
            {
                field: "sales",
                method: "sum"
            },
            {
                field: "date",
                method: "min"
            }
        ]
	}
});

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

<!-- custom styles -->

<style>
.pivot .wx-h-row .wx-cell {
        background:  #f1f1f1;
    }
	.pivot .wx-row:nth-child(2n) {
		background: var(--wx-background-alt);
	}
</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 working with large pivot tables containing dozens or hundreds of rows, visual fatigue becomes a real problem. Users struggle to track data across horizontal rows, especially when column counts are high. This issue intensifies during data analysis sessions when comparing values across multiple columns.

Zebra striping (alternating row colors) is a proven design pattern that improves table readability by creating visual separation between rows. Instead of relying solely on horizontal grid lines, alternating background colors guide the eye across the table, reducing errors when reading complex data.

DHTMLX Pivot supports zebra striping through pure CSS styling using the :nth-child() selector. This approach requires no JavaScript configuration and automatically adapts when users filter, sort, or manipulate the pivot table. The styling persists across all data operations, maintaining visual consistency without manual intervention.

Solution overview​

To implement zebra striping in DHTMLX Pivot, use CSS :nth-child(2n) selector to target every even row. Apply a background color to these rows using the built-in CSS variable --wx-background-alt, which ensures compatibility with DHTMLX's theme system.

The CSS selector .pivot .wx-row:nth-child(2n) specifically targets data rows within the pivot table. The wx-row class represents individual table rows, while wx-h-row represents header rows. By styling only wx-row, you ensure that zebra striping applies exclusively to data rows, leaving headers with their default styling. The header row cells get a custom background of #f1f1f1 through the .pivot .wx-h-row .wx-cell selector.

Key points​

  • Pure CSS implementation: No JavaScript configuration required - styling is applied through standard CSS selectors that work with any DHTMLX theme
  • Automatic adaptation: The :nth-child() selector dynamically recalculates when users filter, sort, or modify the pivot table, maintaining alternating colors without manual updates
  • Theme compatibility: Using var(--wx-background-alt) ensures the alternate row color matches DHTMLX's theme system, adapting automatically to light/dark mode switches
  • Header exclusion: The .wx-row selector specifically targets data rows, excluding header rows (.wx-h-row) to maintain visual hierarchy and prevent confusion

API reference​

The CSS implementation uses standard browser selectors and does not require specific DHTMLX Pivot API methods. However, you can customize the pivot table structure through the DHTMLX Pivot configuration API.

For advanced styling scenarios, refer to the DHTMLX Pivot styling guide to learn about additional CSS variables and customization options.

Additional resources​