Skip to main content

DHTMLX Pivot. Set row, header, footer height and all columns width example

Demo of controlling table dimensions in DHTMLX Pivot. Use the tableShape.sizes property to set custom row height, header height, footer height, and a default column width for a compact, information-dense layout.

Live example​

new pivot.Pivot("#pivot", {
    fields,
    data: dataset,
    tableShape: {
        sizes: {
            rowHeight: 24,
            headerHeight: 24,
            footerHeight: 24,
            columnWidth: 220,
        },
        totalRow: true
    },
    config: {
        rows: [
            "studio"
        ],
        columns: [
            "type"
        ],
        values: [
            {
                field: "score",
                method: "max"
            },
            {
                field: "episodes",
                method: "count"
            },
            {
                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>

Default row and header heights in pivot tables are designed for comfortable reading at standard screen sizes. However, when displaying large datasets with many rows, the default spacing can mean excessive scrolling. Similarly, dashboard layouts may require tighter table dimensions to fit multiple components on a single screen.

DHTMLX Pivot provides a tableShape.sizes property that controls four key dimensions at once: rowHeight, headerHeight, footerHeight, and columnWidth. By reducing these values you can create a compact, data-dense view that shows more rows and columns without scrolling, while a uniform columnWidth ensures consistent alignment across all data columns.

This example sets all heights to 24 px and a default column width of 220 px. Combined with totalRow: true, the result is a compact pivot with a visible total row at the bottom, showing studio-by-type breakdowns with score, episode count, rank, and member sum aggregations.

Solution overview​

Set tableShape.sizes with numeric values for rowHeight, headerHeight, footerHeight, and columnWidth. All dimensions are in pixels. Enable totalRow to display a summary row that follows the same compact height.

Key points​

  • Compact row height: Set rowHeight: 24 to reduce vertical spacing and display significantly more data rows within the visible area
  • Consistent header and footer: Match headerHeight and footerHeight to the row height for a visually uniform table with no disproportionate sections
  • Default column width: Use columnWidth to set a uniform base width for all columns, ensuring consistent alignment without per-field configuration
  • Total row integration: Enable totalRow: true alongside the sizes configuration so the summary row follows the same compact dimensions

API reference​

  • Pivot tableShape: Configuration for table appearance including sizes, totalRow, and totalColumn settings.
  • Pivot configuration: Properties for defining rows, columns, and value aggregations.
  • Pivot fields: Configuration for field definitions and their display names.

Additional resources​