Installation and integration.

Install from npm, import CSS, register Grid, and connect a Pro license.

Quick overview

Start with a small Product and Quantity table, then add features. Install the edition you need from npm.

Integration steps

Choose an npm edition
Install @syidax/advanced or @syidax/advanced-pro from npm in your app project, then import CSS and components.
Connect the Grid and data
Register sy-grid, place the element on the page, and assign columns to columnDefs and rows to rowData. The basic example below includes three products.
Verify the first edit
Run on a local web server and verify products and quantities appear. Double-click Quantity to edit; add license registration when you need Pro features.

Expected results

Your first Grid shows two columns and three rows, with editable quantities.

Register only one edition, Community or Pro, on a page. Run these examples in an app project that resolves npm packages and CSS imports.

Useful terms

Registration: Teaching the browser how the sy-grid custom element behaves.
columnDefs / rowData: The table's column configuration / actual values in each row.

Prerequisites

Use Node.js, npm, and an app build tool that resolves package imports and CSS imports. Install in the folder containing your project’s package.json. Add JavaScript examples to your app entry file and run your development server.

Install with npm

Community

npm install @syidax/advanced@1.0.1

@syidax/advanced · npm ↗

Pro

npm install @syidax/advanced-pro@1.0.1

@syidax/advanced-pro · npm ↗

Choose one edition. Both editions install from public npm; Pro features require a valid product license. When switching to Pro, use the same Pro package for CSS, components, and license imports.

Using Core Pro with Chart/Grid

npm install @syidax/core@npm:@syidax/core-pro@6.0.1 @syidax/advanced-pro@1.0.1

This combination installs Core Pro under the @syidax/core alias, so use @syidax/core/… for its CSS, component, and license imports. Use @syidax/advanced-pro/… for Chart/Grid. For Chart/Grid Community, replace @syidax/advanced-pro@1.0.1 in the command with @syidax/advanced@1.0.1. Chart and Grid share one package.

Register Grid and connect data

In your app entry file, register sy-grid. Assign arrays, objects, and functions as JavaScript properties. This basic example displays products and editable quantities.

<sy-grid id="orders"></sy-grid>
<script type="module">
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: 280,
  theme: "alpine",
  locale: "en",
  brandLogo: "",
  getRowId: row=>row.id,
  defaultColDef: { "sortable": true, "resizable": true },
  columnDefs: [{ "field": "product", "headerName": "Products", "width": 200 }, { "field": "quantity", "headerName": "Quantity", "width": 120, "editable": true, "editor": "number" }],
  rowData: [{ "id": "A-001", "product": "Atlas Sensor", "quantity": 24 }, { "id": "A-002", "product": "Beacon Lite", "quantity": 36 }, { "id": "A-003", "product": "Cipher Pro", "quantity": 18 }]
});
</script>

Configuration code in the workspace provides JavaScript, React, Vue, and Angular examples. In server-rendered apps, register components only in the browser.

Register a Pro license PRO

Grouping, pivoting, range selection, and custom branding require the Pro package and valid feature entitlements. Register the issued signed certificate over HTTPS or localhost before connecting the Grid.

import '@syidax/advanced-pro/css/grid';
import { registerLicense } from '@syidax/advanced-pro/license';
const response = await fetch('/licenses/syidax.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('License registration failed.');

import { defineCustomElement } from '@syidax/advanced-pro/components/sy-grid.js';
defineCustomElement();

Change the certificate path to match your app. Never include signing private keys in the app. Logo settings and PRO markers in the API show the required entitlements.