Skip to main content

DHTMLX Pivot. Vertical orientation of text in grid headers example

Demo of vertical header text in DHTMLX Pivot. Rotate column headers to a vertical orientation using headerShape.vertical: true to display more data columns in compact horizontal space.

Live example​

const widget = new pivot.Pivot("#pivot", {
    fields,
    data: dataset,
    headerShape: { 
        vertical: true
    },
    tableShape: { 
        sizes: { 
            columnWidth: 70
        } 
    },
    columnShape: {
        width: {
            studio: 200
        }
    },
    config: {
        rows: [
            "studio",
        ],
        columns: [
            "type"
        ],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            },
        ]
    }
});

<!-- auxiliary controls for interacting with the sample -->
<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>

Pivot tables with many column groups and value fields can quickly exceed the available horizontal space. Standard horizontal header text requires wide columns to remain readable, which limits how many data columns fit on screen without scrolling. This is especially problematic when column values create multiple sub-groups, each with their own set of aggregated values.

The headerShape.vertical property rotates all column header text to a vertical orientation. This allows columns to be much narrower - since the text flows top-to-bottom instead of left-to-right - while remaining fully readable. Combined with a reduced columnWidth via tableShape.sizes, this creates a compact layout that fits significantly more data columns into the visible area.

This example groups anime data by studio in the rows and type in the columns, with title count and max score as values. The vertical headers allow narrow 70px columns while the studio column remains at 200px for readability. The result is a dense, information-rich table that shows all type categories (Movie, Music, ONA, etc.) without horizontal scrolling.

Solution overview​

Set headerShape.vertical: true to rotate header text and reduce the default column width via tableShape.sizes.columnWidth. Use columnShape.width to set specific widths for individual columns like the row label.

Key points​

  • Vertical rotation: Set headerShape.vertical: true to rotate all column header text 90 degrees, making long header labels fit in narrow columns
  • Compact column width: Reduce tableShape.sizes.columnWidth to a small value like 70px - vertical text remains readable even in very narrow columns
  • Per-column override: Use columnShape.width to set a wider width for specific columns like the row label field, keeping them readable while value columns stay compact
  • Dense data layout: Combining vertical headers with narrow columns allows significantly more column groups and values to fit on screen without horizontal scrolling

API reference​

  • Pivot headerShape: Configuration for header appearance including vertical text orientation.
  • Pivot tableShape: Configuration for table appearance including default column and row sizes.
  • Pivot columnShape: Configuration for column behavior including per-column width overrides.

Additional resources​