experiment_id: web-retrieval-v1
fixture_id: /docs/features/dragging
mode: provenance
representation: html
origin_response_id: 01d5142da7a7c7cec66ff1e3a5d216f0
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.683Z
version_nonce: 6827fd920885e506eccc48a2db905cd8
generated_at_utc: 2026-10-24T00:48:40.292Z
response_nonce: d780558e12212b356fb5d5fa2e0809f0
Docs Version 1

Dragging

ZingGrid has built-in dragging features to hide and reorder columns. To enable column dragging, simply add column-drag to the <zing-grid> tag.

Column Hide

To hide columns by dragging them off the grid, include [column-drag-action="hide"] in <zing-grid>, like so:

<zing-grid column-drag column-drag-action="hide"></zing-grid>

Drag to Hide Columns Grid

Here is a complete grid with dragging to hide columns enabled:

Top

Column Reorder

To reorder columns by dragging them around the grid, include column-drag-action="reorder" in <zing-grid>, like so:

<zing-grid column-drag column-drag-action="reorder"></zing-grid>

Drag to Reorder Columns Grid

Here is a complete grid with dragging to reorder columns enabled:

Top
## Column Hide and Reorder

To both hide and reorder columns by dragging them off the grid, include [column-drag-action="both"] in <zing-grid>, like so:

<zing-grid column-drag column-drag-action="both"></zing-grid>

Drag to Hide and Reorder Columns Grid

Here is a complete grid with dragging to both hide and reorder columns enabled:

Top

Card Mode

Column hide and reorder also works in card mode. Dragging a card item (header and content) on one card applies the change to the rest of the cards.

Drag to Hide and Reorder in Card Mode

Here is a complete grid demonstrating column hide and reorder in card mode:

Top

Force Visibility

By default, the drag handles only appear when you hover over the column's header cell. To override this and make the handles always appear, add column-drag-persistent to <zing-grid>, like so:

<zing-grid ... column-drag column-drag-persistent>

For individual columns, add drag-persistent:

<zing-grid column-drag>
  <zg-colgroup>
    <!-- Handle appears on hover -->
    <zg-column ...>
    <!-- Handle always shows -->
    <zg-column ... drag-persistent>
  </zg-colgroup>
</zing-grid>

Or to disable, set it to "disabled":

<zing-grid column-drag column-drag-persistent>
  <zg-colgroup>
    <!-- Handle appears on hover -->
    <zg-column ... drag-persistent="disabled">
    <!-- Handle always shows -->
    <zg-column ...>
  </zg-colgroup>
</zing-grid>

Column Drag Handle Persistent

Here is a complete grid demonstrating setting the persistence of drag handles:

Top

[features: dragging]