Docs

Column Resizing

Enable column resizing for all non-control grid columns. You can resize 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

To enable resizing for all non-control columns, add the column-resizable attribute to <zing-grid>, like so:

<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.

Column Resizable Grid

Here is a complete grid with the option to resize columns as necessary:

Force Visibility

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

<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>
Top

Min and Max Limits

Set the minimum and maximum limits that 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.

Min/Max Width Column Resizable Grids

Here is a complete grid with a limit for the minimum width you can resize a column to:

https://app.zingsoft.com/demos/embed/QL1FNFJA
https://app.zingsoft.com/demos/embed/QL1FNFJA

Here is a complete grid with a limit for the maximum width you can resize a column to:

Top

Resize Handle Styling

You can 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. To customize it, set/replace <symbol id="resize" ...> in your custom theme's .svg file with your new svg-icon code.

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

CSS Variables

You can also use any of these 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 Light Dom, so you can 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

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: column resizing]