@keenmate/web-grid

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

🎯
Framework Agnostic

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

✏️
8 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

📋
3 Grid Modes

Read-only, Excel, and Input-Matrix modes with sensible defaults for common use cases

📄
Copy & Paste

Multi-cell TSV paste from Excel, column selection via header click, and Select All support

🧊
Frozen Columns

Pin columns to the left while scrolling horizontally. Fill handle for Excel-like autofill

🔒
Row Locking

Optimistic locking with WebSocket support. Lock rows externally for collaborative editing

📊
Summary Bar

Customizable summary content with aggregates, totals, and metadata from server-side data

🌐
i18n & Labels

Translatable UI strings for pagination, context menus, and dropdown editors. Full label customization

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.

Lightweight

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

Highly Customizable

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

Example Usage

Basic Usage
 
Editable Grid
 

8

Editor Types

170+

CSS Variables

10K+

Virtual Scroll Rows

3

Grid Modes