Web Grid Component
Advanced data grid web component from @keenmate/web-grid with sorting,
pagination, inline editing, and keyboard navigation. Built as a framework-agnostic web component.
Key Features: Multi-column sorting, inline editing with 6 editor types (text, number, date, select, combobox, autocomplete), spreadsheet-like keyboard navigation, row selection, row toolbar, context menu, and dark mode support.
Employee Grid
Current Sort:
No sorting applied
Click column header to sort. Ctrl+Click to add columns (cascading sort).
Keyboard Navigation
Navigate mode enables Excel-like keyboard navigation. Use the controls above to toggle it on/off.
Cell Navigation
Arrow Up/Down- Move between rowsArrow Left/Right- Move between columnsTab / Shift+Tab- Next/previous editable cellHome / End- First/last cell in rowPageUp / PageDown- Move up/down by ~10 rows
Jump Navigation
Ctrl+Home- First cell in gridCtrl+End- Last cell in gridCtrl+PageUp- First cell in columnCtrl+PageDown- Last cell in column
Editing Keys:
Enter or F2 - Start editing |
Space - Toggle checkbox or open dropdown |
Escape - Cancel edit |
Type any character to start editing with that character
Sorting & Pagination
Click column headers to sort. Ctrl+Click to add columns for multi-column sort. Sort indicators show direction and priority numbers.
Current Sort:
No sorting applied
Row Selection
Click row numbers to select rows. Ctrl+Click to toggle, Shift+Click for range selection.
Click row numbers to select rows...
Selection Shortcuts:
Ctrl+C - Copy selected rows |
Delete - Delete selected rows |
Escape - Clear selection |
Click # (top-left) - Select all
Row Toolbar
Context Menu
Resources
- npm Package:
@keenmate/web-grid - Repository: github.com/nicoalee/web-grid
- CSS Variables: Uses
--wg-*prefix (component) and--base-*prefix (theme integration) - Theming: Pure Admin provides
--base-*variables viasrc/scss/_base-css-variables.scss