Installation

Add the package to your project

Package Manager
npm 
 
 
pnpm 
 
 
 
yarn 
 
 
 
CDN
 
CDN Usage 
 
 
 
Build Tools
 
Choose Your Method
 
Install via npm/pnpm/yarn for build tool integration, or use the CDN for quick prototyping and simple projects.
 
Zero Configuration
 
The component registers itself automatically when imported. No additional setup required. Styles are encapsulated in Shadow DOM.
 
Basic Usage
 
Your first data grid
 
HTML
 
HTML Structure 
 
 
 
JavaScript
 
JavaScript API 
 
 
 
Explanation
 
Column Definitions
 
Use the columns property to define your grid structure. Each column specifies a field and title.
 
Data Binding
 
Set items to an array of objects. The grid automatically renders rows based on your column definitions.
 
Grid Modes
 
Use the mode property for quick configuration: 'read-only' for display, 'excel' for spreadsheet editing, or 'input-matrix' for data entry forms.
 
Paste Support
 
In editable modes, Ctrl+V pastes TSV data from Excel/Sheets into the grid with validation.
 
Editable Grid
 
Enable cell editing with validation
 
Configuration
 
Editable Configuration 
 
 
 
Editor Types
 
Editor Types 
 
 
 
Events
 
Change Events 
 
 
 
Framework Integration
 
Svelte 
 
 
 
React 
 
 
 
Vue 
 
 
 
Angular 
 
 
 
TypeScript Support
 
TypeScript Usage 
 
 
 
Next Steps
 
View Examples
 
Explore comprehensive examples showcasing sorting, pagination, editing, and more.
 View Examples
 
API Reference
 
Learn about all available properties, column options, and events.
 API Docs
 
Styling Guide
 
Customize the appearance with 170+ CSS variables and theme integration.
 Custom Styling