syidaxgrid
Home Pricing Settings

SYIDAX GRID

Rows, columns, and state

rowData contains actual order values; columnDefs describes the columns that display them. field is the data key, and headerName is the display heading. Changing a heading does not rename the source field.

Markdown source Features

How it works and when to use it

Distinguish display positions from business IDs. Sorting, filtering, and grouping change positions. The unique ID returned by getRowId identifies the same order during updates, selection, and restoration.

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. Localize only column headings

Keep the product key in server data and change only the displayed heading.

javascript
grid.columnDefs = [{ field: 'product', headerName: 'Product name', width: 220 }];

Verify the result: Only the heading changes, with no data conversion. Changing field to Product name would produce empty values if rows lack that key.

Example 2. Find update targets by ID

Even if sorting moves ORD-0002 to the top, update only the order identified by its ID.

javascript
grid.getRowId = row => row.id;
const target = grid.rowData.find(row => row.id === 'ORD-0002');
if (target) await grid.applyTransaction({ update: [{ ...target, quantity: 25 }] });

Verify the result: The same order is updated despite display-order changes because the code does not assume it is the second row in the source array.

Example 3. Pass arrays and simple values

height accepts a number or CSS length; column definitions and data are JavaScript objects.

javascript
grid.height = '60vh';
grid.pagination = false;
grid.rowData = [...grid.rowData, { id: 'ORD-0004', product: 'Delta', quantity: 5 }];

Verify the result: Passing a new array adds the order. This differs from placing serialized JSON strings in HTML attributes.

Combining features and troubleshooting

IDs must be unique and stable across edits. Avoid switching ID types, such as between numeric 1 and string "1".

When defaultColDef and individual column settings coexist, inspect the individual settings. Even with editing enabled globally, editable: false can protect the order ID column.

Related reading