syidaxgrid
Home Pricing Settings

GRID FEATURE

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.

Markdown source Features

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.

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.

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.

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.

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.

Related reading