Skip to main content

DHTMLX Pivot. Styling (custom CSS) example

Demo of custom CSS theming in DHTMLX Pivot. Override CSS custom properties to create a dark theme with custom background colors, font colors, borders, and accent highlights.

Live example​

new pivot.Pivot("#pivot", {
	fields,
	data: dataset,
	config: {
		rows: [
			"studio",
			"genre"
		],
		values: [
			{
				field: "title",
				method: "count"
			},
			{
				field: "score",
				method: "max"
			},
		],
	}
});

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

<!-- custom styles -->

<style>
#pivot,
    #pivot .menu {
        --wx-background: #404151;
        --wx-background-alt: #212329;
        --wx-color-primary: #14B195;
        --wx-color-font: #FFFFFF;
        --wx-table-header-background: #2E2E3A;
        --wx-border: 1px solid #6B6C79;
        --wx-table-border: 1px solid #6B6C79;   
        --wx-table-select-background: var(--wx-background-alt);
        --wx-table-select-focus-background: var(--wx-color-primary);
        
        color-scheme: dark;
	}

    #pivot .menu,
    #pivot .dropdown,
    #pivot .popup {
        border: 1px solid #6B6C79;
    }
    #pivot .popup .editor button.secondary {
        background: var(--wx-background-alt);
        color: var(--wx-color-font);
    }
     #pivot .popup .editor {
        --wx-checkbox-border-color: #a4a5b2;
    }
    #pivot .popup .editor .select .icon {
        color: var(--wx-color-font)
    }
    #pivot .popup .editor input:focus,
    #pivot .popup .editor .select:focus {
        border: 1px solid #a4a5b2;
    }
</style>

<script>
const dataset = [
      {
        "rank": 1,
        "title": "Shingeki no Kyojin: The Final Season - Kanketsu-hen",
        "popularity": 609,
        "genre": "Action",
        "studio": "MAPPA",
        "type": "Special",
        "episodes": 2,
        "duration": 61,
        "members": 347875,
        "score": 9.17
      },
      {
        "rank": 2,
        "title": "Fullmetal Alchemist: Brotherhood",
        "popularity": 3,
        "genre": "Action",
        "studio": "Bones",
        "type": "TV",
        "episodes": 64,
        "duration": 24,
        "members": 3109951,
        "score": 9.11
      },
      // ... 246 more items (see Live Editor for full data)
    ]; 
    
    const fields = [
      {
        "id": "rank",
        "label": "Rank",
        "type": "number"
      },
      {
        "id": "title",
        "label": "Title",
        "type": "text"
      },
      {
        "id": "popularity",
        "label": "Popularity",
        "type": "number"
      },
      {
        "id": "genre",
        "label": "Genre",
        "type": "text"
      },
      {
        "id": "studio",
        "label": "Studio",
        "type": "text"
      },
      {
        "id": "type",
        "label": "Type",
        "type": "text"
      },
      {
        "id": "episodes",
        "label": "Episodes",
        "type": "number"
      },
      {
        "id": "duration",
        "label": "Duration",
        "type": "number"
      },
      {
        "id": "members",
        "label": "Members",
        "type": "number"
      },
      {
        "id": "score",
        "label": "Score",
        "type": "number"
      }
    ];
</script>

The default DHTMLX Pivot theme uses a light color scheme that works well in most applications. However, many modern dashboards and analytics tools offer dark themes to reduce eye strain, improve contrast for data-heavy displays, or simply match the overall application design system.

DHTMLX Pivot exposes a comprehensive set of CSS custom properties (variables) that control every visual aspect of the component. By overriding these variables on the pivot container, you can transform the entire appearance without modifying JavaScript code or component internals. Variables like --wx-background, --wx-color-font, and --wx-table-header-background give you precise control over colors, while --wx-border and --wx-table-border handle structural styling.

This example creates a complete dark theme by setting dark backgrounds (#404151, #212329), white font color, a teal primary accent (#14B195), and matching borders. Additional rules style popup elements, checkboxes, and input focus states to maintain visual consistency across all interactive parts of the pivot.

Solution overview​

Target the pivot container with CSS and override the --wx-* custom properties. Add color-scheme: dark for native form element styling. Additional selectors handle popups, dropdowns, and editors for full theme coverage.

The JavaScript configuration is minimal - a standard pivot with rows, values, and no extra styling logic:

Key points​

  • CSS variables for theming: Override --wx-background, --wx-color-font, --wx-color-primary, and other custom properties to fully restyle the pivot without touching JavaScript
  • Dark color scheme: Set color-scheme: dark on the container to ensure native form elements like scrollbars and inputs match the dark theme
  • Consistent popup styling: Extend theme overrides to .menu, .dropdown, and .popup selectors so configuration panels and editors match the table styling
  • Accent color control: Use --wx-color-primary to define the highlight color for selected items, active buttons, and focus states across the entire component

API reference​

Additional resources​