@keenmate/web-grid

A powerful, framework-agnostic data grid web component with Excel-like editing, multi-column sorting, virtual scrolling, and extensive customization through 100+ CSS variables.

🎯
Framework Agnostic

Pure Web Component that works with vanilla JS, React, Vue, Angular, Svelte, and more

✏️
7+ Editor Types

Text, number, checkbox, select, combobox, date picker, autocomplete, plus custom editor support

🗂️
Multi-Column Sorting

Click to sort, Ctrl+Click for cascading multi-column sort with visual priority indicators

⌨️
Excel-Like Navigation

Arrow keys, Tab, Home/End, Page Up/Down with Ctrl shortcuts. Type-to-edit, clipboard support

🛠️
Row Toolbar & Context Menu

Floating toolbar with smart positioning. Right-click context menu with dynamic items

Virtual Scrolling

Handle 10,000+ rows with smooth scrolling. Infinite scroll support for progressive loading

Quick Installation

Get started in seconds

Package Manager
npm
 
pnpm
 
yarn
 
Import
Import component
 
Features

Simple to Use

Install the package, import it once, and use the <web-grid> element anywhere in your application.

Zero Dependencies

No framework lock-in. Works everywhere modern web components are supported. Built with TypeScript for excellent IDE support.

Highly Customizable

100+ CSS variables for complete theming control. Integrates with @keenmate/theme-designer for enterprise theming.

Example Usage

Basic Usage
 
Editable Grid
 

7+

Editor Types

100+

CSS Variables

10K+

Virtual Scroll Rows

0

Dependencies