Skip to main content

DHTMLX Pivot. Sorting example

Demo of dynamic row sorting in DHTMLX Pivot. Toggle ascending and descending sort order on row fields using external buttons and the setConfig method to reorder pivot data on the fly.

Live example​

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

function switchSort(id) {
    fields.forEach(f => {
        if (f.id == id) {
            f.sort =  f.sort != "desc" ? "desc" : "asc";
             // update button icon
            document.querySelector(`#${id} .icon`).className = `icon wxi-${f.sort}`;
        }
    });
    // change fields in Pivot config
    widget.setConfig({fields}); 
}
<!-- auxiliary controls for interacting with the sample -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">
<section class="dhx_sample-controls">
    <button class="dhx_sample-btn dhx_sample-btn--flat" id="studio" onclick="switchSort('studio')">
        Studio <i class="icon wxi-asc"></i>
    </button>
    <button class="dhx_sample-btn dhx_sample-btn--flat" id="genre" onclick="switchSort('genre')">
        Genre <i class="icon wxi-asc"></i>
    </button>
</section>

<!-- component container -->
<div id="pivot" style="height: calc(100% - 60px); width: 100%;"></div>

<!-- dataset -->

<style>
.dhx_sample-btn i {
        height: 14px;
        margin-left: 8px;
    }
</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>

Pivot tables group data by row fields, but the default order may not match what users need. Alphabetical ordering might work for some analyses, while reverse order helps others. Without a sorting mechanism, users must scan through unsorted rows to find the data they need, which becomes impractical with large datasets.

DHTMLX Pivot supports sorting through the sort property on field definitions. Each field can have its sort set to "asc" or "desc", and calling setConfig({ fields }) applies the new order immediately. This approach lets you build external sort controls that toggle between ascending and descending order on any row field.

This example provides two buttons - Studio and Genre - that toggle sort direction on their respective row fields. Clicking a button switches the field's sort between ascending and descending, updates the button icon, and reconfigures the pivot to reflect the new order.

Solution overview​

Add a sort property to the target field in the fields array, then call widget.setConfig({ fields }) to apply the change. A helper function toggles between "asc" and "desc" on each click.

Key points​

  • Field-level sort property: Set sort: "asc" or sort: "desc" on any field definition to control the sort order of that row dimension
  • Dynamic reconfiguration: Call widget.setConfig({ fields }) after modifying the sort property to apply the new order with the updated component configuration
  • Toggle pattern: A simple conditional flips between ascending and descending on each invocation, providing a natural toggle interaction for users
  • Multiple row fields: Each row field can be sorted independently, allowing multi-level sorting across studio and genre dimensions simultaneously

API reference​

  • Pivot setConfig: Method to update pivot configuration dynamically including field sort settings.
  • Pivot fields: Configuration for field definitions including the sort property.
  • Pivot configuration: Properties for defining rows, columns, and value aggregations.

Additional resources​