Skip to main content

DHTMLX Pivot. Clean rows example

Demo of the clean rows feature in DHTMLX Pivot. Hide duplicate values in row columns using tableShape.cleanRows to create a cleaner, more readable pivot table with grouped visual hierarchy.

Live example​

new pivot.Pivot("#pivot", {
    fields,
    data: dataset,
    tableShape: {
        cleanRows: true, // (optional) if set to true, the duplicate values in columns are hidden in the table view. The default value is false
    },
    config: {
        rows: [
            "market",
            "state",
            "product"
        ],
        columns: [
            "product_line",
            "product_type"
        ],
        values: [
            {
                field: "profit",
                method: "var"
            },
            {
                field: "sales",
                method: "sum"
            },
            {
                field: "date",
                method: "min"
            }
        ]
    }
});

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

<!-- dataset -->

<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 multiple row dimensions often display repetitive values. When grouping by Market, State, and Product, the "Central" market label repeats for every state and product combination in that region. This visual noise makes it harder to scan the table and identify group boundaries.

DHTMLX Pivot provides the tableShape.cleanRows property to hide duplicate values in row columns. When enabled, only the first occurrence of each value is displayed - subsequent rows in the same group show empty cells. This creates a visual grouping effect similar to merged cells without actually merging them.

This example demonstrates clean rows applied to a sales dataset grouped by market, state, and product. The cleanRows: true setting hides repeated market and state values, making it immediately clear where each group starts and ends. Use this approach when you have deeply nested row hierarchies and want to reduce visual clutter.

Solution overview​

To enable clean rows, set the cleanRows property to true inside the tableShape configuration object. This affects all row dimension columns - duplicate values are hidden automatically based on the natural grouping order defined in config.rows.

Key points​

  • Single property activation: Set tableShape.cleanRows: true to enable - no additional configuration needed for the deduplication logic
  • Applies to all row dimensions: The clean rows feature affects every column defined in config.rows, hiding duplicates at each grouping level (market, state, product)
  • Visual grouping without merging: Duplicate cells are hidden rather than merged, preserving the underlying data structure while improving visual hierarchy
  • Default is false: Clean rows is disabled by default, so existing pivot tables are unaffected until you explicitly opt in

API reference​

Additional resources​