Skip to main content

DHTMLX Pivot. Data limits example

Demo of data limits in DHTMLX Pivot. Restrict the number of displayed rows and columns using the limits property for focused analysis and improved rendering performance.

Live example​

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

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

<!-- dataset -->

<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>

Datasets with many unique values in row or column fields can generate pivot tables with hundreds of rows and dozens of column groups. Rendering all this data at once can overwhelm the browser and make the table difficult to navigate. Users often need to see only the top entries or a manageable subset of the full pivot output.

DHTMLX Pivot provides the limits property to cap the number of displayed rows and columns. Setting limits: { rows: 10, columns: 3 } tells the pivot to keep the result constrained around those row and column thresholds, regardless of how many groups exist in the underlying data. The aggregation still processes the full dataset, but only a limited subset of groups appears in the table.

This example demonstrates data limits applied to an anime dataset. Studios are grouped as rows and genres as columns, with Title Count and Score Max as aggregated values. The limits property keeps the output constrained to a small subset of studios and genres, keeping the table compact and readable despite the large number of unique values in the dataset.

Solution overview​

To set data limits, add the limits property to the Pivot configuration object. Specify rows for the maximum number of row groups and columns for column groups. Both properties are optional - you can limit just rows, just columns, or both.

Key points​

  • Simple configuration: Add limits: { rows: N, columns: M } to cap the number of displayed groups - no additional logic or event handlers required
  • Full aggregation preserved: The pivot still processes the entire dataset for calculations; limits only affect which groups are rendered in the table
  • Independent row and column limits: You can set rows and columns independently, limiting only one dimension if needed
  • Performance improvement: Reducing the number of visible groups improves rendering speed for large datasets with many unique values in row or column fields

API reference​

  • Pivot limits: Configuration for restricting the number of displayed rows and columns.
  • Pivot configuration: Properties for defining rows, columns, and value aggregations.

Additional resources​