Grid overview.
Combine the features you need in one Grid and connect data and user actions to your app.
Quick overview
Open the Grid workspace → · Follow the steps below in the workspace.
Use Grid to build views for finding and editing large data sets such as order lists. Combine search, sorting, editing, and other features as needed.
Try it yourself
- Find the orders you need
Enter Platform in the search box above the table to find orders assigned to that team. Clear the term to show all orders again.
- Change a value
Double-click a quantity cell, enter a number, and press Enter. The total in the same row updates too.
- Compare features
Enable column filters or range selection in the options below the table and inspect the changes. Selecting a feature from the menu switches to its initial configuration.
The result area below the table shows selection and editing results as JSON. The code view reflects current options.
Edited data is retained while navigating menus if the sample row count stays the same. Reset restores the current example's initial data and settings.
Useful terms
- Grid
- A table for displaying and manipulating data in rows and columns.
- JSON
- A format representing results as name/value pairs.
One workspace
#Combine sorting, search, selection, editing, and analysis in one table. Change options below the Grid and inspect operation results alongside code for the current settings.
Create your first Grid with the npm package.
Properties and dataConfigure rows, columns, identifiers, and dimensions.
Logos and positioningInspect default branding and Pro customization.
Themes and stylingConfigure light/dark views and design tokens.
Save and restore stateSave and reapply view configuration.
Data and eventsConnect user action results to your service.
Data and connections
#- Columns Define field, headerName, and column behavior in columnDefs.
- Rows Pass an object array to rowData and provide stable unique IDs through getRowId.
- Changes Read editing/selection results from CustomEvent.detail and await method returns.
Packages and runtime environments
#- Community Provides basic Grid features and the Syidax logo.
- Pro Adds Pro features to Community. Register a license for the features you use.
- Explore features PRO tags identify paid features. PRO options in the API mean basic use is Free while some settings require entitlement.