# Get started with Grid

Install the edition you need from npm, then import CSS and register sy-grid. Register only one edition, Community or Pro, on a page.

Canonical: https://grid.syidax.com/docs/guides/getting-started/

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

## How it works and when to use it

The short examples in this manual assume grid has the basic setup below. Reassigning columnDefs and rowData in an example replaces their previous values.

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

## Example 1. Register Community and create your first table

Run this in the entry file of an app with the Community package installed. First add <sy-grid id="orders"></sy-grid>to your page.

```javascript
import '@syidax/advanced/css/grid';
import { defineCustomElement } from '@syidax/advanced/components/sy-grid.js';
defineCustomElement();
await customElements.whenDefined('sy-grid');
const grid = document.querySelector('#orders');
Object.assign(grid, {
  height: 420, locale: 'en', getRowId: row => row.id,
  defaultColDef: { sortable: true },
  columnDefs: [
    { field: 'id', headerName: 'Order ID', editable: false },
    { field: 'product', headerName: 'Product' },
    { field: 'team', headerName: 'Team' },
    { field: 'region', headerName: 'Region' },
    { field: 'quantity', headerName: 'Quantity', editor: 'number', editable: true },
    { field: 'price', headerName: 'Unit price', editor: 'number' }
  ],
  rowData: [
    { id: 'ORD-0001', product: 'Atlas', team: 'Platform', region: 'APAC', quantity: 10, price: 120 },
    { id: 'ORD-0002', product: 'Beacon', team: 'Design', region: 'EMEA', quantity: 20, price: 80 },
    { id: 'ORD-0003', product: 'Cipher', team: 'Platform', region: 'EMEA', quantity: 30, price: 50 }
  ]
});
```

Verify the result: Six columns and three orders appear, with editable quantities. Run this in an app with a bundler so package imports can be resolved for the browser.

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

## Example 2. An app using Pro features

Use Pro import paths consistently in apps using the Pro package. The /licenses/grid.json path below must be provided by your app to serve its issued certificate.

```javascript
import { registerLicense } from '@syidax/advanced-pro/license';
import { defineCustomElement } from '@syidax/advanced-pro/components/sy-grid.js';
const response = await fetch('/licenses/grid.json');
if (!response.ok) throw new Error('Unable to load the license.');
const result = await registerLicense(await response.json());
if (!result.ok) throw new Error('Check your license.');
defineCustomElement();
```

Verify the result: Connect the component after registration returns ok. Supply only the issued certificate; never include signing private keys in the app.

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

## Example 3. An app that reopens views

When tabs or routes change, clean up existing elements and event subscriptions and reference the new view's element. Avoid calls through a grid variable from another view.

```javascript
const controller = new AbortController();
grid.addEventListener('selectionChanged', event => {
  console.log(event.detail);
}, { signal: controller.signal });
// Call when disposing of this view.
function dispose() {
  controller.abort();
  grid.remove();
}
```

Verify the result: Reentering the view does not duplicate event handling. Clean up app-created sockets and timers at the same time.

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

## Combining features and troubleshooting

Use HTML examples with an app build tool that resolves npm imports. See Installation for the package commands and CSS imports.

If the Grid is invisible, first check registration, element selection, height, and parent width. Investigate Pro permission issues separately from empty data.

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

## APIs used by this feature

Review the shared settings together with the related documentation below.

- [Grid properties](https://grid.syidax.com/docs/options.md)
- [Column settings](https://grid.syidax.com/docs/columns.md)
- [Methods](https://grid.syidax.com/docs/methods.md)

<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/getting-started) — The guide describes which interactions are available to try.