Web Grid Showcase

CS01 CSS Variables

Override colors, headers, and cells with 170+ CSS custom properties

Live Demo

Custom purple theme applied via CSS variables.

Code

CSS Variables

Key Variables

Color Variables

--wg-accent-color - Primary accent

--wg-text-color-1 - Primary text

--wg-surface-1 - Background

Header Variables

--wg-header-bg

--wg-header-color

--wg-header-border

Cell Variables

--wg-cell-padding

--wg-cell-border

--wg-row-bg-hover

CS02 Theme Integration

Integrate with @keenmate/theme-designer via --base-* variable fallbacks

Explanation

Web Grid integrates with the @keenmate/theme-designer system through --base-* CSS variables.

When you set base variables on :root, all KeenMate components (web-grid, web-multiselect, etc.) automatically use them.

Each --wg-* variable falls back to a corresponding --base-* variable, then to a hardcoded default.

Code

Theme Integration

Base Variables

Supported Base Variables

Colors:

--base-accent-color

--base-text-color-1

--base-surface-1

--base-border-color

Typography:

--base-font-family

--base-font-size-base

CS03 CSS Variables Manifest

Machine-readable JSON manifest of all 214 CSS variables with categories

What's Included

The package includes a machine-readable manifest documenting all 214 CSS variables:

36 base variables - --base-* consumed from theme layer
178 component variables - --wg-* with category and usage

Each variable includes its category and a description of what it controls in the UI.

Code

Manifest Import

Use Cases

Theme Designer

Build UI for customizing all variables

Documentation

Generate variable reference docs

Validation

Verify theme completeness

Tooling

IDE autocomplete, linting

CS04 Dynamic Cell Styling

Style cells and rows dynamically with cellClassCallback and rowClassCallback

Methods

Styling Options

cellClassCallback - Per-cell CSS classes
rowClassCallback - Per-row CSS classes
customStylesCallback - Inject CSS into shadow DOM

Use these for conditional formatting like heatmaps, status indicators, or highlighting.

Code

Dynamic Styling

Callbacks

cellClassCallback

Return CSS class name based on cell value and row.

rowClassCallback

Return CSS class for entire row.

customStylesCallback

Return CSS string to inject. Useful for defining the classes used by callbacks.

CS05 Global Scaling

Scale entire grid proportionally with --wg-rem base unit

How It Works

All sizes in web-grid are based on --wg-rem (default: 10px). This enables proportional scaling of the entire grid.

Font sizes, spacing, button sizes, and icons all scale together when you change this single variable.

The 10px base was chosen for clean math: 10 × 1.4 = 14px (no rounding errors).

Code

Global Scaling

Benefits

Proportional Scaling

All sizes use calc(N × var(--wg-rem))

Clean Pixel Values

10px base avoids fractional pixels

Theme Designer

Pure Admin sets html { font-size: 10px } so 1rem = 10px

CS06 Labels / i18n

Translate pagination and UI labels with i18n placeholder syntax

Live Demo

Grid with Czech translations. Navigate pagination to see translated labels.

Code

Labels Configuration

Available Labels

UI Labels

rowActions - Toolbar trigger tooltip

inlineActionsHeader - Inline actions column header

keyboardShortcuts - Shortcuts help title

Pagination Labels

paginationFirst

paginationPrevious

paginationNext

paginationLast

paginationPageInfo

paginationItemCount

paginationPerPage

Context Menu Labels

contextMenu.sortAsc

contextMenu.sortDesc

contextMenu.clearSort

contextMenu.hideColumn

contextMenu.freezeColumn

contextMenu.unfreezeColumn

contextMenu.columnVisibility

contextMenu.showAll

Dropdown Labels

dropdownNoOptions

dropdownSearching

CSS Variables Reference

Colors

`--wg-accent-color`	Primary accent
`--wg-text-color-1`	Primary text
`--wg-text-color-2`	Secondary text
`--wg-surface-1`	Background
`--wg-surface-2`	Alternate background
`--wg-border-color`	Borders
`--wg-danger-color`	Error/danger
`--wg-overlay-bg`	Overlay background

Selection & Focus

`--wg-focus-*`	Focus ring/outline styles
`--wg-selection-border-width`	Selection border width
`--wg-selection-border-color`	Selection border color
`--wg-row-focus-bg`	Focused row background
`--wg-row-focus-row-number-bg`	Focused row number background

Row Locking

`--wg-row-locked-bg`	Locked row background
`--wg-row-locked-opacity`	Locked row content opacity

Sizing

`--wg-rem`	Base unit (default: 10px)
`--wg-spacing-*`	Spacing (xs, sm, md, lg, xl)
`--wg-font-size-*`	Font sizes
`--wg-border-radius-*`	Border radii
`--wg-row-number-width`	Row number column width
`--wg-actions-column-width`	Inline actions column width

Components

`--wg-header-*`	Header styling
`--wg-cell-*`	Cell styling
`--wg-row-*`	Row styling
`--wg-pagination-*`	Pagination
`--wg-toolbar-*`	Row toolbar
`--wg-editor-*`	Editor/input styling
`--wg-checkbox-scale`	Checkbox size scaling
`--wg-dropdown-*`	Dropdown styling
`--wg-tooltip-*`	Tooltip styling
`--wg-frozen-column-*`	Frozen column shadow

Additional Variables

`--wg-dialog-shadow`	Dialog box shadow
`--wg-tooltip-max-width`	Tooltip max width
`--wg-tooltip-arrow-size`	Tooltip arrow size
`--wg-editor-hitbox-height`	Editor clickable area height
`--wg-toolbar-divider-height`	Toolbar group divider height
`--wg-toolbar-icon-size`	Toolbar button icon size
`--wg-dropdown-max-height`	Dropdown max height