syidaxgrid
Home Pricing Settings
SYIDAX / DATA GRID

Column sizing and pinning

Drag column boundaries to resize and pin important columns on either side.

Get started
Column sizing and pinningSample order data
120 rows
Loading Grid…

Options

Changes below update the Grid and code immediately.

Latest result

Order IDs start pinned on the left. When the table is wider than the screen, horizontal scrolling moves other columns while order IDs remain visible.

View code
Current preview

Usage guide

#

Useful for inspecting amounts on the right while keeping order IDs visible in a wide table. Widen columns to read long product names.

Try it yourself

  1. Inspect default pinning

    Order IDs start pinned on the left. When the table is wider than the screen, horizontal scrolling moves other columns while order IDs remain visible.

  2. Change the pinning position

    Below the table, change Product column pinning to Pin left or Pin right. Choose Unpinned to return it to the regular area.

  3. Adjust column width

    Enter 280 for Product column width or drag the product header's right boundary. Double-click the boundary to size it to the content.

Expected results

The column is pinned on the selected side and its width changes immediately. Check the input values and code below too.

Pinning several columns on narrow screens leaves less space for the rest. Pin only essential identifying columns first.

Useful terms

pinned
Pins a column to the left or right.
width
Column width, measured in pixels.

Key API examples

Application code that references the registered Grid element as grid.

await grid.setColumnPinned('id', 'left');
await grid.setColumnWidth('product', 220);

API reference

#

Key properties

Attribute / PropertyType / DefaultDescription
resizableColumns		booleanDefault: falseEnable draggable column resize handles.
reorderableColumns		booleanDefault: falseEnable header drag column reordering.
columnHiding		booleanDefault: falseEnable the runtime column visibility method surface.
Other properties2
Attribute / PropertyType / DefaultDescription
hideableColumns		booleanDefault: falseSelect a name to inspect its type contract.
autoSizeOnDoubleClick		booleanDefault: trueEnable header double-click auto-size when column resizing is enabled.
Events3
EventsDetail typeDescription
GridColumnResizedDetailFires after a committed column resize.
GridColumnReorderedDetailFires after a committed column reorder.
GridColumnVisibilityChangedDetailFires after an effective column visibility change.
Methods17
Method / ArgumentsReturn typeDescription
colId: string, width: number		Promise<void>Set a column width, respecting min/max bounds.
colId: string		Promise<void>Clear a live column-width override.
colId: string		Promise<number | null>Read the effective width for a column id.
field: string, side: ColumnPinSide | null		Promise<void>pin/unpin a column at runtime (`null` = unpin). Unknown fields are rejected with a warning. `'right'` becomes fully functional on ; the model accepts it already so column state snapshots round-trip.
field: string		Promise<ColumnPinSide | null>effective pin side of a column (override-aware).
orderedColIds: string[]		Promise<void>Set the effective column order.
Promise<string[]>Read the effective column order.
colId: string		Promise<void>Hide a single column.
colId: string		Promise<void>Show a single column.
colId: string		Promise<boolean>Toggle a column's hidden state and return the new state.
colIds: string[]		Promise<void>Replace hidden-column state from a field list.
Promise<void>Clear all hidden-column state.
Promise<string[]>Read the current hidden-column ids.
colId: string		Promise<number | null>Auto-size a single column from visible content.
Promise<void>Auto-size every visible, resizable column.
Promise<ColumnStateEntry[]>Snapshot column width, order, visibility, (multi-)sort and pin state.
state: ColumnStateEntry[], opts?: ApplyColumnStateOptions		Promise<void>Restore column state from a snapshot.
ColumnDef9
ColumnDefType / RequiredDescription
numberOptionalFixed column width in pixels.
numberOptionalLower bound for column width in pixels.
numberOptionalUpper bound for column width in pixels.
numberOptionalFlex factor — distributes leftover horizontal space (CSS-flex semantics).
booleanOptionalPer-column override for wrapper-level column resizing.
booleanOptionalPer-column override for wrapper-level column reordering.
'left' | 'right' | nullOptionalpin this column to an edge: pinned columns render before (left) / after (right) the scrolling middle block and stick while it scrolls horizontally. Pinned columns need a concrete pixel width (`width` or a live resize); flex-sized pinned columns fall back to a 150px default. Runtime `setColumnPinned` overrides this declaration.
booleanOptionalInitial hidden state; runtime visibility state owns later changes.
booleanOptionalAG Grid compatibility alias for ; `hidden` wins when both are set.
GridTab Navigate Enter Open