Skip to main content

DHTMLX Pivot. Auto width. Sizing columns to content example

Demo of auto width column sizing in DHTMLX Pivot. Automatically adjust column widths to fit cell content using columnShape.autoWidth configuration with per-field control and full-data analysis.

Live example​

const pivotWidget = new pivot.Pivot("#pivot", {
	fields,
	data: dataset,
	config: {
		rows: [
			"studio",
			"genre"
		],
		values: [
			{
				field: "title",
				method: "count"
			},
			{
				field: "score",
				method: "max"
			},
		],
	},
	columnShape: {
		autoWidth: {
			// calculate column width for these fields
			columns: {
				studio: true,
				genre: true,
				title: true,
				score: true
			},
			// analyze all fields
			firstOnly: false,
		},
	}
});

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

Fixed-width columns in pivot tables often cause content truncation or excessive whitespace. Studio names like "Bandai Namco Pictures" get clipped in narrow columns, while short numeric values like scores waste horizontal space in wide ones. Manually setting widths for every column is impractical when data varies.

DHTMLX Pivot provides the columnShape.autoWidth configuration to automatically calculate optimal column widths based on actual cell content. You can enable auto-sizing for specific fields using columnShape.autoWidth.columns. The firstOnly flag controls whether multiple columns built from the same data field reuse the width from the first occurrence (true, default) or are analyzed independently (false).

This example demonstrates auto width applied to all four visible fields - studio, genre, title, and score. With firstOnly: false, each column based on the same data field is analyzed independently to determine the widest content, producing accurate column sizing. Use this approach when your data contains varying-length strings and you want a clean, readable table without manual width adjustments.

Solution overview​

To enable auto width, define an autoWidth object inside columnShape. The columns property is an object where each key is a field name and the value true enables auto-sizing for that column. Setting firstOnly: false ensures that repeated columns based on the same data field are analyzed independently instead of inheriting width from the first occurrence.

Key points​

  • Per-field auto width control: The columns object lets you enable auto-sizing selectively - set true only for fields that need it, leaving others at default width
  • Full-data analysis: Setting firstOnly: false ensures that repeated columns based on the same data field are analyzed independently instead of inheriting width from the first occurrence
  • No manual width management: Auto width eliminates the need to hardcode pixel widths for each column, adapting automatically as data changes
  • Works with aggregated values: Auto width correctly sizes columns showing aggregated results (count, max, sum) based on the formatted output values

API reference​

Additional resources​