Skip to main content

DHTMLX Pivot. Min/max and custom marks for cells (conditional format) example

Demo of conditional cell formatting in DHTMLX Pivot. Use built-in min and max marks to highlight extreme values, and define custom mark functions with CSS classes to color cells based on any condition.

Live example​

const pivotWidget = new pivot.Pivot("#pivot", {
	fields,
	data: dataset,
	config: {
		rows: [
			"studio",
			"genre"
		],
		values: [
			{
				field: "title",
				method: "count"
			},
			{
				field: "score",
				method: "max"
			},
		],
	},
	tableShape: {
		marks: {
			// built-in marks (min/max highlight)
			min_cell: "min",
			max_cell: "max",
			// custom mark
			g_avg: v => (v % 1 !== 0) && v > 8.5
		},
	}
});

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

<!-- custom styles -->

<style>
.min_cell {
        background: #cfffe2 !important;
        color: #1e745f;
	}

	#pivot .max_cell {
        background: #f8c1c1 !important;
        color: #a60404;
	}

    .g_avg {
        background: #edd9ff !important;
        color: #543c68;
    }
</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>

When reviewing aggregated data in a pivot table, spotting minimum and maximum values or cells that exceed certain thresholds can be difficult in large grids. Without visual indicators, users must scan every cell manually to identify outliers or notable values, which is slow and error-prone.

DHTMLX Pivot provides a tableShape.marks configuration that applies CSS classes to cells based on their values. Two built-in marks - "min" and "max" - automatically detect and highlight the lowest and highest values in each column. You can also define custom marks as functions that receive the cell value and return true when the cell should be marked.

This example demonstrates all three mark types on an anime dataset. The min_cell mark highlights minimum values in green, the max_cell mark highlights maximum values in red, and the custom g_avg mark highlights scores above 8.5 (non-integer values) in purple. Each mark name corresponds to a CSS class that defines the visual style.

Solution overview​

To add conditional formatting, define marks in tableShape.marks. Use the string "min" or "max" for built-in marks, or provide a function that returns true for cells to highlight. Each mark key becomes a CSS class name that you style separately.

Key points​

  • Built-in min/max marks: Set a mark to "min" or "max" to automatically detect and highlight the lowest or highest values in each column without writing custom logic
  • Custom mark functions: Define a function that receives the cell value and returns true to apply the mark - enabling any condition like thresholds, ranges, or mathematical checks
  • CSS class mapping: Each key in the marks object becomes a CSS class name applied to matching cells, giving you full control over colors, backgrounds, fonts, and borders
  • Multiple marks per cell: A cell can match multiple mark conditions simultaneously, with all corresponding CSS classes applied - allowing layered visual indicators

API reference​

  • Pivot tableShape: Configuration for table appearance including marks, totalRow, and totalColumn settings.
  • Pivot configuration: Properties for defining rows, columns, and value aggregations.
  • Pivot fields: Configuration for defining field types and labels.

Additional resources​