Skip to main content

DHTMLX Pivot. Frozen (fixed) columns example

Demo of freezing columns in DHTMLX Pivot. Pin row label columns on the left side and total columns on the right side using the tableShape.split property so they stay visible during horizontal scrolling.

Live example​

const widget = new pivot.Pivot("#pivot", {
    tableShape: {
        split: {
            left: true, //freezes all fields from rows on the left side 
            right: true //freezes Total column(s) on the right side 
        },
        totalRow: true,
        totalColumn: true,
    },
    fields,
    data: dataset,
    config: {
        rows: [
            "state"
        ],
        columns: [
            "product_line",
            "product_type",
            "product"
        ],
        values: [
            {
                field: "profit",
                method: "sum"
            }
        ]
    },
    columnShape: {
        autoWidth: {
            columns: {
                profit: true,
                state: true
            },
        },
    },
});

<!-- component container -->
<div id="pivot" style="width: 100%; height: 100%;"></div>

<!-- custom styles -->

<style>
.wx-cell.wx-total {
        background: #fafafb;
    }
</style>

<script>
const dataset = [
      {
        "cogs": 51,
        "date": "10/1/2018",
        "inventory_margin": 503,
        "margin": 71,
        "market_size": "Major Market",
        "market": "Central",
        "marketing": 46,
        "product_line": "Leaves",
        "product_type": "Herbal Tea",
        "product": "Lemon",
        "profit": -5,
        "sales": 122,
        "state": "Colorado",
        "expenses": 76,
        "type": "Decaf"
      },
      {
        "cogs": 52,
        "date": "10/1/2018",
        "inventory_margin": 405,
        "margin": 71,
        "market_size": "Major Market",
        "market": "Central",
        "marketing": 17,
        "product_line": "Leaves",
        "product_type": "Herbal Tea",
        "product": "Mint",
        "profit": 26,
        "sales": 123,
        "state": "Colorado",
        "expenses": 45,
        "type": "Decaf"
      },
      // ... 1060 more items (see Live Editor for full data)
    ];
    const fields = [
      {
        "id": "cogs",
        "label": "Cogs",
        "type": "number"
      },
      {
        "id": "date",
        "label": "Date",
        "type": "date"
      },
      {
        "id": "inventory_margin",
        "label": "Inventory Margin",
        "type": "number"
      },
      {
        "id": "margin",
        "label": "Margin",
        "type": "number"
      },
      {
        "id": "market_size",
        "label": "Market Size",
        "type": "text"
      },
      {
        "id": "market",
        "label": "Market",
        "type": "text"
      },
      {
        "id": "marketing",
        "label": "Marketing",
        "type": "number"
      },
      {
        "id": "product_line",
        "label": "Product Line",
        "type": "text"
      },
      {
        "id": "product_type",
        "label": "Product Type",
        "type": "text"
      },
      {
        "id": "product",
        "label": "Product",
        "type": "text"
      },
      {
        "id": "profit",
        "label": "Profit",
        "type": "number"
      },
      {
        "id": "sales",
        "label": "Sales",
        "type": "number"
      },
      {
        "id": "state",
        "label": "State",
        "type": "text"
      },
      {
        "id": "expenses",
        "label": "Expenses",
        "type": "number"
      },
      {
        "id": "type",
        "label": "Type",
        "type": "text"
      }
    ];
</script>

Pivot tables with many column groups can extend far beyond the visible area, requiring horizontal scrolling. When users scroll to see data on the right side, they lose sight of the row labels on the left, making it hard to identify which row they are looking at. Similarly, the total column may scroll out of view.

DHTMLX Pivot provides a tableShape.split property that freezes columns on both sides of the table. Setting left: true pins all row-field columns on the left, and right: true pins the total column on the right. This ensures that key reference and summary columns remain visible regardless of horizontal scroll position.

This example demonstrates a pivot with "State" as the row field and three levels of column grouping (Product Line, Product Type, Product). The split configuration keeps the State column frozen on the left and the Profit (Sum) total column frozen on the right. Auto-width is enabled for both the profit and state columns for optimal sizing.

Solution overview​

To freeze columns, set tableShape.split with left: true to pin row-field columns and right: true to pin total columns. Enable totalColumn: true to display a summary column that stays fixed on the right side.

Key points​

  • Left split for row labels: Set split.left: true to freeze all row-field columns on the left side, keeping them visible while scrolling horizontally through data columns
  • Right split for totals: Set split.right: true to pin the total column on the right edge, providing a constant summary reference regardless of scroll position
  • Combined with totalColumn: Enable totalColumn: true in tableShape to display the summary column that the right split will freeze in place
  • Auto-width support: Use columnShape.autoWidth to automatically size frozen columns to their content, preventing truncated labels in pinned areas

API reference​

  • Pivot tableShape: Configuration for table appearance including split, totalRow, and totalColumn settings.
  • Pivot columnShape: Configuration for column behavior including auto-width settings.
  • Pivot configuration: Properties for defining rows, columns, and value aggregations.

Additional resources​