Skip to main content

DHTMLX Pivot. Toggle visibility of configuration panel example

Demo of toggling the configuration panel in DHTMLX Pivot. Initialize the pivot with the settings panel hidden using configPanel: false, then let users reveal it via the "Show settings" link at the top-right corner.

Live example​

const widget = new pivot.Pivot("#pivot", {
    fields, 
    data: dataset,
    configPanel: false, // the configuration panel is hidden on init
    tableShape: {
        templates:{
            age: v => (v ? Math.ceil(v) : "")
        }
    },
    config:  {
		rows: [
			"hobbies"
		],
		columns: [
			"relationship_status"
		],
		values: [
			{
				field: "age",
				method: "min"
			},
			{
				field: "age",
				method: "max"
			}
		]
	}
});

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

<!-- dataset -->

<script>
const dataset = [
      {
        "name": "Alex",
        "age": 30,
        "height": 170,
        "weight": 74,
        "hobbies": "Photography",
        "favorite_color": "Blue",
        "favorite_pet": "Dog",
        "relationship_status": "Married",
        "favorite_book": "Master and Margarita",
        "music": "Rock",
        "favorite_video_game": "The Witcher",
        "education_level": "High school diploma",
        "language": "English",
        "favorite_dish": "Sushi",
        "favorite_drink": "Coffee",
        "favorite_dessert": "Chocolate Cake",
        "activities": "Yoga",
        "activity_level": "High",
        "fashion_style": "Casual",
        "places_to_visit": "Japan",
        "movie_preferences": "Drama",
        "personality_type": "Leader, extrovert",
        "superhero_power": "Teleportation",
        "favorite_season": "Autumn",
        "communication_style": "Direct",
        "chronotype": "Night owl",
        "preferred_weather": "Sunny"
      },
      {
        "name": "Robert",
        "age": 25,
        "height": 181,
        "weight": 65,
        "hobbies": "Traveling",
        "favorite_color": "Green",
        "favorite_pet": "Cat",
        "relationship_status": "In a relationship",
        "favorite_book": 1984,
        "music": "Pop",
        "favorite_video_game": "Animal Crossing",
        "education_level": "Doctorate",
        "language": "Spanish",
        "favorite_dish": "Pizza",
        "favorite_drink": "Tea",
        "favorite_dessert": "Cheesecake",
        "activities": "Running",
        "activity_level": "Moderate",
        "fashion_style": "Classic",
        "places_to_visit": "Norway",
        "movie_preferences": "Romance",
        "personality_type": "Analyst, introvert",
        "superhero_power": "Time manipulation",
        "favorite_season": "Winter",
        "communication_style": "Expressive",
        "chronotype": "Early bird",
        "preferred_weather": "Rainy"
      },
      // ... 203 more items (see Live Editor for full data)
    ]; 

    const fields = [
      {
        "id": "name",
        "label": "Name",
        "type": "text"
      },
      {
        "id": "age",
        "label": "Age",
        "type": "number"
      },
      {
        "id": "height",
        "label": "Height",
        "type": "number"
      },
      {
        "id": "weight",
        "label": "Weight",
        "type": "number"
      },
      {
        "id": "hobbies",
        "label": "Hobbies",
        "type": "text"
      },
      {
        "id": "favorite_color",
        "label": "Favorite color",
        "type": "text"
      },
      {
        "id": "favorite_pet",
        "label": "Favorite pet",
        "type": "text"
      },
      {
        "id": "relationship_status",
        "label": "Relationship status",
        "type": "text"
      },
      {
        "id": "favorite_book",
        "label": "Favorite book",
        "type": "text"
      },
      {
        "id": "music",
        "label": "Music",
        "type": "text"
      },
      {
        "id": "favorite_video_game",
        "label": "Favorite video game",
        "type": "text"
      },
      {
        "id": "education_level",
        "label": "Education level",
        "type": "text"
      },
      {
        "id": "language",
        "label": "Language",
        "type": "text"
      },
      {
        "id": "favorite_dish",
        "label": "Favorite dish",
        "type": "text"
      },
      {
        "id": "favorite_drink",
        "label": "Favorite drink",
        "type": "text"
      },
      {
        "id": "favorite_dessert",
        "label": "Favorite dessert",
        "type": "text"
      },
      {
        "id": "activities",
        "label": "Activities",
        "type": "text"
      },
      {
        "id": "activity_level",
        "label": "Activity level",
        "type": "text"
      },
      {
        "id": "fashion_style",
        "label": "Fashion style",
        "type": "text"
      },
      {
        "id": "places_to_visit",
        "label": "Places to visit",
        "type": "text"
      },
      {
        "id": "movie_preferences",
        "label": "Movie preferences",
        "type": "text"
      },
      {
        "id": "personality_type",
        "label": "Personality type",
        "type": "text"
      },
      {
        "id": "superhero_power",
        "label": "Superhero power",
        "type": "text"
      },
      {
        "id": "favorite_season",
        "label": "Favorite season",
        "type": "text"
      },
      {
        "id": "communication_style",
        "label": "Communication style",
        "type": "text"
      },
      {
        "id": "chronotype",
        "label": "Chronotype",
        "type": "text"
      },
      {
        "id": "preferred_weather",
        "label": "Preferred weather",
        "type": "text"
      }
  	];
</script>

By default, DHTMLX Pivot displays the configuration panel above the table, showing Values, Columns, and Rows sections where users can drag and drop fields. While this is useful during initial setup, many production scenarios require a cleaner view - displaying only the data table and letting users open the settings panel when they need to adjust the pivot layout.

The configPanel property controls the initial visibility of the settings panel. Setting it to false hides the panel on initialization, giving users a full-width table view. A "Show settings" link automatically appears in the top-right corner, allowing users to toggle the panel back when needed. This approach works well for dashboards where screen space is at a premium.

This example creates a pivot with hobbies as row fields and relationship status as column fields, aggregating age values with min and max methods. The configuration panel starts hidden, maximizing the data display area. Users can click "Show settings" to reveal the full configuration interface.

Solution overview​

Set configPanel: false in the Pivot constructor to hide the configuration panel on initialization. The pivot automatically provides a toggle link for users to show and hide the panel as needed.

Key points​

  • Hidden on init: Set configPanel: false to start with the settings panel hidden, giving users a clean data-only view of the pivot table
  • Built-in toggle: The pivot automatically displays a "Show settings" / "Hide settings" link in the top-right corner when the config panel visibility changes
  • Template formatting: Use tableShape.templates to format aggregated values - in this case, Math.ceil(v) rounds age values to whole numbers for cleaner display
  • Multi-aggregation layout: Configure multiple value aggregations (min and max) on the same field to display side-by-side comparison columns grouped by the column field

API reference​

Additional resources​