Skip to main content

DHTMLX Pivot. Readonly mode example

Demo of readonly mode in DHTMLX Pivot. Set the readonly property to true to prevent users from modifying the pivot's row, column, and value settings via the UI at runtime.

Live example​

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

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

In many scenarios, pivot tables are used for presentation or reporting rather than interactive exploration. End users viewing embedded dashboards, printed reports, or public-facing analytics pages should see the data without the ability to rearrange fields, change aggregation methods, or modify the table structure.

DHTMLX Pivot provides a simple readonly property that, when set to true, blocks interactive controls for modifying the pivot layout via the UI. The table itself remains fully functional - users can still scroll, sort (if enabled), and view all data - but the field arrangement is locked.

This example shows a pivot table displaying anime data grouped by studio and genre, with title count and max score as values. Users can view and interact with the resulting table layout, but cannot reconfigure rows, columns, or values from the UI.

Solution overview​

To enable readonly mode, add readonly: true to the pivot constructor options. This property locks the pivot layout against UI reconfiguration (Values, Columns, Rows changes).

Key points​

  • Single property activation: Add readonly: true to the constructor options to lock pivot structure changes from the UI
  • Clean presentation behavior: In readonly mode, UI controls for changing Values, Columns, and Rows are blocked, keeping the configured layout stable during viewing
  • Data remains accessible: Users can still scroll through all rows and columns, view aggregated values, and interact with the table grid while structure editing is disabled
  • Programmatic updates still work: Even in readonly mode, you can still call API methods like setConfig() to update the pivot programmatically - only the user-facing controls are disabled

API reference​

Additional resources​