Grid properties.

Understand row/column contracts, property settings, sizing, and data updates together.

Quick overview

A table combines column descriptions with row values. Columns define how products are labeled, while each order row contains its actual product value.

Integration steps

Connect columns to values
Setting field to product reads each row's product value. headerName defines the user-facing Product heading.
Give rows unique identities
Assign each order an id and return it from getRowId. The same order remains identifiable after sorting changes its position.
Assign values by type
Simple values such as height can be HTML attributes. Pass row arrays, column arrays, and functions directly as JavaScript properties.

Expected results

Predict which values appear in each column and reuse stable IDs for updates, selection, and restoration.

Do not use the first displayed row's number as an order ID. Identify business records independently of their positions.

Useful terms

field / headerName: The key read from a row / the user-facing column heading.
Property: A value assigned to an element through JavaScript, including arrays, objects, and functions.

Attributes and JavaScript properties

Strings and numbers can be attributes. Use JavaScript properties for arrays, objects, and functions. To explicitly disable a boolean, assign false to its property.

<sy-grid id="orders" height="400" theme="alpine" locale="ko"></sy-grid>
<script type="module">
  // Register sy-grid in your app entry file first.
  await customElements.whenDefined('sy-grid');
  const grid = document.querySelector('#orders');
  grid.columnDefs = [{ field: 'product', headerName: 'Product' }];
  grid.rowData = [{ id: 'A-001', product: 'Atlas Sensor' }];
  grid.getRowId = row => row.id;
  grid.pagination = false;
</script>

Row and column identifiers

To identify the same business record even when row order changes, getRowId must return a unique, stable ID. Column identifiers such as field or colId must also be distinct. These identities underpin transactions, selection retention, and state restoration.

grid.getRowId = row => row.id;
grid.defaultColDef = { sortable: true };
grid.columnDefs = [
  { field: 'product', headerName: 'Product', width: 200 },
  { field: 'quantity', headerName: 'Quantity', editable: true, editor: 'number' }
];

Updates and sizing

Assign a new array when replacing all data. For partial changes, use stable IDs with applyTransaction. The Grid follows its container width. height accepts a number in pixels or a CSS length string.

grid.height = '60vh';
grid.rowData = nextRows; // New array from the query result

const row = grid.rowData[0];
if (row) {
  const result = await grid.applyTransaction({ update: [{ ...row, quantity: 25 }] });
  console.log(result);
}

Also pass a new array when changing column definitions. Manage data persistence separately from view state persistence. Save and restore state