Overview
Freeze columns to keep them visible while scrolling horizontally - just like Excel's freeze panes. Supports sticky row numbers, freezing first N columns, or marking individual columns as frozen.
FP01 Frozen Columns Demo
Scroll horizontally to see frozen columns stay in place. The row numbers and first columns are frozen.
Freeze First N Columns
FP02 Column-Level Frozen Property
Individual columns can be marked as isFrozen: true. Frozen columns automatically move to the left side, regardless of their definition order.
Visual Reorder: In this example, the "Status" column is defined last in the columns array but has
isFrozen: true, so it appears first (after row numbers).Column-Level Frozen
API Reference
Grid Properties
| Property | Type | Default | Description |
|---|---|---|---|
isRowNumbersVisible | boolean | false | Show row number column on the left |
isStickyRowNumbers | boolean | false | Make row number column sticky (frozen) |
freezeColumns | number | 0 | Number of columns to freeze from the left |
Column Properties
| Property | Type | Default | Description |
|---|---|---|---|
isFrozen | boolean | false | Mark column as frozen (moves to left automatically) |
width | string | - | Explicit width recommended for frozen columns |
Best Practices
- Explicit widths: Always set explicit widths on frozen columns for consistent behavior
- Shadow indicator: A subtle shadow appears on the right edge of frozen columns when scrolling
- Accent tint: Frozen column headers have a subtle tint to visually distinguish them
- Frozen columns cannot be reordered: Drag-to-reorder is disabled for frozen columns
- Row numbers: When
isStickyRowNumbersis enabled, row numbers are always frozen regardless offreezeColumns
CSS Variables
| Variable | Default | Description |
|---|---|---|
--wg-frozen-column-shadow-gradient | linear-gradient(to right, ...) | Shadow gradient on the edge of frozen columns |
--wg-frozen-column-shadow-width | 8px | Width of the frozen column shadow |
Frozen columns can also be managed via the header context menu using the 'freezeColumn' and 'unfreezeColumn' predefined items.