Skip to main content

DHTMLX Pivot. Set different widths for columns example

Demo of setting individual column widths in DHTMLX Pivot. Use the columnShape.width property to assign specific pixel widths to particular fields, giving each column the space it needs.

Live example​

new pivot.Pivot("#pivot", {
    fields,
    data: dataset,
    columnShape: {
        width: {
            studio: 300,
            score: 100,
            rank: 90
        }
    },
    config: {
        rows: [
            "studio"
        ],
        columns: [
            "type"
        ],
        values: [
            {
                field: "score",
                method: "max"
            },
            {
                field: "rank",
                method: "min"
            },
            {
                field: "members",
                method: "sum"
            },
        ]
    }
});

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

Pivot tables often contain fields with very different content lengths. A studio name like "Bandai Entertainment, Manga Entertainment" needs far more horizontal space than a numeric rank or score value. When all columns share the same default width, wide text gets truncated and narrow numbers waste space, producing a cluttered and hard-to-read layout.

DHTMLX Pivot provides the columnShape.width property that accepts a map of field names to pixel values. Each field listed in this object receives the specified width, while all other columns keep the default size. This makes it straightforward to allocate generous space for text-heavy columns and compact widths for numeric ones.

This example configures the "studio" row field to 300 px, the "score" value column to 100 px, and the "rank" column to 90 px. The result is a clean layout where studio names display without truncation and numeric columns stay compact.

Solution overview​

Pass a columnShape.width object where each key is a field name and each value is the desired width in pixels. Only listed fields are affected; all others use the default width.

Key points​

  • Per-field width map: The columnShape.width object maps field names to pixel values, allowing precise control over individual column sizes
  • Text-friendly sizing: Assign wider values to text columns like studio names to prevent truncation and improve readability
  • Compact numeric columns: Use narrower widths for numeric fields such as score and rank to avoid wasted whitespace
  • Selective override: Only the fields listed in the width object are affected; all other columns retain their default size automatically

API reference​

  • Pivot columnShape: Configuration for column behavior including per-field width settings.
  • Pivot configuration: Properties for defining rows, columns, and value aggregations.
  • Pivot fields: Configuration for field definitions and their display names.

Additional resources​