Column Resizing

Enable column resizing for all non-control grid columns. Set globally for all columns or set/override on individual ones.

Add optional minimum or maximum width constraints and determine if the resize handles are always visible or only on cell hover (default).

Enable Resizing

Add the column-resizable attribute to <zing-grid> to enable resizing for all non-control columns.

<zing-grid ... column-resizable>

To add to individual columns instead, add the resizable attribute to <zg-column>

<zing-grid>
  <zg-colgroup>
    <!-- Not Resizable -->
    <zg-column ...>
    <!-- Is Resizable -->
    <zg-column ... resizable>
  </zg-colgroup>
</zing-grid>

Adding resizable to control columns is the only way to make them resizable.

Force Visibility

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

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

For individual columns, add resize-persistent.

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

add demo

Top

Min and Max Limits

Set minimum and maximum limits the column can be resized to globally on <zing-grid>, which applies to all columns:

  • column-resizable-min-width
  • column-resizable-max-width
<zing-grid
  column-resizable 
  column-resizable-min-width="200"
  column-resizable-max-width="800"
>

Or set/override on individual columns with:

  • resizable-min-width
  • resizable-max-width
<zing-grid column-resizable>
  <zg-colgroup>
    <!-- No limits -->
    <zg-column ...>
    <!-- Cannot reduce lower than 200 pixels wide -->
    <zg-column ... resizable-min-width="200">
  </zg-colgroup>
</zing-grid>

Min and max limits only apply once you resize the column. They do not dictate the starting width of the column.

add demo

Top

Resize Handle Styling

You may customize the resize icon and some of the handler styling.

Icon

The resize icon is set using a <zg-icon> instance with a name of resize. In your custom theme's .svg file, set/replace the matching <symbol id="resize" ...> with your new svg-icon code.

For more info on custom themes and how to replace icons, view the Custom Theme section on the Styling features page.

<zg-icon name="resize">

CSS Variables

Use the internal CSS variables to change the visual aspects of the resize handle:

  • --zg-column-resize-background
  • --zg-column-resize-background_active
  • --zg-column-resize-color
  • --zg-column-resize-height
  • --zg-column-resize-top
  • --zg-column-resize-width

The resize handles are in the lightdom, so you may customize all aspects of it with external CSS. Using the variables will ensure only the presentation and not the functionality of the handles are modified.

Top