# Column sizing and pinning

Width, order, pinning, and visibility are independent column states. Combine them to pin order IDs, hide supporting information, and widen long product names.

Canonical: https://grid.syidax.com/docs/features/column-operations/

<a id="understand"></a>

## How it works and when to use it

Declare defaults in initial column definitions and use column methods for runtime changes. To preserve user choices, save getColumnState results rather than the original columnDefs.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Pin important columns

Pin IDs on the left so orders remain identifiable while scrolling horizontally.

```javascript
await grid.setColumnPinned('id', 'left');
await grid.setColumnWidth('product', 280);
```

Verify the result: The ID column stays on the left and the product column becomes 280px wide. Too many pinned columns reduce space for the center area.

<a id="example-2"></a>

## Example 2. Compact and detailed views

Hide price when users do not need unit prices. This does not remove the data field.

```javascript
await grid.hideColumn('price');
console.log(await grid.getHiddenColumns());
// Return to the detailed view
await grid.showColumn('price');
```

Verify the result: Only column visibility changes. When values must be hidden for security, also enforce permissions and server data restrictions.

<a id="example-3"></a>

## Example 3. Size columns to their content

Autosize only the needed columns, then save the current configuration.

```javascript
await grid.autoSizeColumn('product');
const savedColumns = await grid.getColumnState();
console.log(savedColumns);
// Restore later after preparing the same column IDs
await grid.applyColumnState(savedColumns);
```

Verify the result: Read content-based widths and column state. Some settings cannot be applied if column IDs have changed.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Combining width with minWidth and maxWidth can also constrain autosizing. Distinguish fixed-width columns from flex columns that share remaining space.

Reassigning the old columnDefs array after users reorder columns may overwrite their configuration. Decide whether initial settings or user state takes priority.

<a id="related-api"></a>

## APIs used by this feature

- [resizableColumns](https://grid.syidax.com/docs/options/resizableColumns.md) — Allows users to resize columns by dragging their boundaries.
- [reorderableColumns](https://grid.syidax.com/docs/options/reorderableColumns.md) — Allows users to reorder columns by dragging headers.
- [columnHiding](https://grid.syidax.com/docs/options/columnHiding.md) — Enables column hiding. Also provide a menu or panel for restoring hidden columns.
- [hideableColumns](https://grid.syidax.com/docs/options/hideableColumns.md) — Compatibility setting for column hiding. Keep it consistent with columnHiding.
- [autoSizeOnDoubleClick](https://grid.syidax.com/docs/options/autoSizeOnDoubleClick.md) — Autosizes a column to its content when its boundary is double-clicked.
- [width](https://grid.syidax.com/docs/columns/width.md) — Initial column width in pixels.
- [minWidth](https://grid.syidax.com/docs/columns/minWidth.md) — Minimum width allowed during user resizing and autosizing.
- [maxWidth](https://grid.syidax.com/docs/columns/maxWidth.md) — Maximum column width.
- [flex](https://grid.syidax.com/docs/columns/flex.md) — Relative share of remaining space. Review alongside fixed, minimum, and maximum widths.
- [resizable](https://grid.syidax.com/docs/columns/resizable.md) — Whether users can resize this column.
- [reorderable](https://grid.syidax.com/docs/columns/reorderable.md) — Whether users can move this column.
- [pinned](https://grid.syidax.com/docs/columns/pinned.md) — Pins the column left/right, or unpins it with null.
- [hidden](https://grid.syidax.com/docs/columns/hidden.md) — Whether the column starts hidden. Does not revoke read permission.
- [hide](https://grid.syidax.com/docs/columns/hide.md) — Compatibility alias for column hiding. Do not assign conflicting values to hidden.
- [setColumnWidth](https://grid.syidax.com/docs/methods/setColumnWidth.md) — Sets the current column width. Review minimum and maximum constraints too.
- [resetColumnWidth](https://grid.syidax.com/docs/methods/resetColumnWidth.md) — Resets the specified column's user-adjusted width to its initial setting.
- [getColumnWidth](https://grid.syidax.com/docs/methods/getColumnWidth.md) — Reads the current column width, or null if the column is absent.
- [setColumnPinned](https://grid.syidax.com/docs/methods/setColumnPinned.md) — Pins a column left/right or unpins it.
- [getColumnPinned](https://grid.syidax.com/docs/methods/getColumnPinned.md) — Reads the column's current pinning direction.
- [setColumnOrder](https://grid.syidax.com/docs/methods/setColumnOrder.md) — Sets display order using column IDs.
- [getColumnOrder](https://grid.syidax.com/docs/methods/getColumnOrder.md) — Reads column IDs in current display order.
- [hideColumn](https://grid.syidax.com/docs/methods/hideColumn.md) — Hides a column without deleting source data or revoking read permission.
- [showColumn](https://grid.syidax.com/docs/methods/showColumn.md) — Shows a hidden column.
- [toggleColumnVisibility](https://grid.syidax.com/docs/methods/toggleColumnVisibility.md) — Toggles column visibility and returns the resulting state.
- [setHiddenColumns](https://grid.syidax.com/docs/methods/setHiddenColumns.md) — Sets the list of hidden columns at once.
- [resetColumnVisibility](https://grid.syidax.com/docs/methods/resetColumnVisibility.md) — Resets column visibility to initial settings.
- [getHiddenColumns](https://grid.syidax.com/docs/methods/getHiddenColumns.md) — Reads IDs of currently hidden columns.
- [autoSizeColumn](https://grid.syidax.com/docs/methods/autoSizeColumn.md) — Measures currently available content and applies an appropriate width to one column.
- [autoSizeAllColumns](https://grid.syidax.com/docs/methods/autoSizeAllColumns.md) — Autosizes all columns. Do not assume unloaded server values can be measured.
- [getColumnState](https://grid.syidax.com/docs/methods/getColumnState.md) — Reads serializable column width, order, visibility, sorting, and pinning state.
- [applyColumnState](https://grid.syidax.com/docs/methods/applyColumnState.md) — Restores saved column state. Verify that IDs match current columns.
- [columnResized](https://grid.syidax.com/docs/events/columnResized.md) — Emitted when column width changes. Include the current width in saved view state.
- [columnReordered](https://grid.syidax.com/docs/events/columnReordered.md) — Emitted when column order changes.
- [columnVisibilityChanged](https://grid.syidax.com/docs/events/columnVisibilityChanged.md) — Emitted when column visibility changes.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/column-operations) — The guide describes which interactions are available to try.