ApexGrid Demos

A clean baseline grid with sortable, filterable, resizable columns.

Swap entire data sources at runtime with auto-generated columns.

Hierarchy derived from a flat array via getDataPath, with chevrons + indent.

120 rows sliced locally with a built-in pager and configurable page sizes.

Server-side data: the grid lazily fetches fixed-size blocks on scroll and pushes sort, filter and search to your backend.

Toggle visibility, sorting, filtering, and resizing for any column at runtime.

Custom cell rendering: currency formatting, star ratings, status badges.

Customize header markup and rename headers dynamically from outside.

Pin columns to start or end so they stay visible while horizontally scrolling.

Spanning multi-level header groups above a flat columns array, respecting pin regions.

Persistent vertical header dividers that double as the resize grab target; fully themeable.

Drag column headers to reorder; the source columns array stays untouched.

String, number, boolean, select, rating, date, image: every type in one grid.

Click headers to sort. Name column uses a custom string-length comparator.

Multi-column sort declared up front via the grid configuration object.

Server-style sorting: the grid emits sortChanging events for your backend.

Per-column filter UI for text, numeric, and boolean column types.

Server-side filtering with debounced requests and simulated async response.

Master-detail panels with arbitrary HTML rendered beneath any row.

Multi-row selection with checkbox column and keyboard range shortcuts.

Double-click cells to edit; validate or reject changes via cellValueChanging.

Reject invalid edits with per-column validators (required, min/max, pattern); invalid cells show an inline error.

Undo and redo cell edits from a history stack, with Ctrl/Cmd+Z keyboard shortcuts.

Pin rows to sticky top and bottom bands that stay in view while the body scrolls.

Drag rows by a grip handle (or the whole row) into a manual order; keyboard reordering too.

Debounced toolbar search input that matches across every visible column.

Row expansion renders a nested apex-grid showing each order’s line items.

ARIA grid roles, focus rings, and full arrow-key navigation between cells.

Per-column sum / avg / min / max / count via the aggregations property and getAggregations().

Group rows by one or more columns; each group is an expandable header row with leaf count and per-group aggregates.

Reshape rows into columns: pick row and column dimensions plus the measures to aggregate into each cell.

Excel-style checklist of a column’s distinct values; composes with the grid’s other filters via filter().

A side panel to show/hide, pin and reorder columns and drive grouping, aggregation and pivoting by drag-and-drop.

Spreadsheet-style range selection with multi-range, fill handle, TSV copy/paste, and a live-aggregate status bar.

Chart the grid’s grouped or pivoted aggregates with ApexCharts via getChartModel() and renderChart().

An <apex-grid-chart source="view"> that charts the whole current view and live-redraws as you sort, filter, or edit.

Map columns to a category and measures with a ChartDefinition, with per-series secondary-axis toggles.

Collapse rows per category into the chart with sum / avg / count / min / max / median aggregation.

Plot a formula-defined series (=B1/A1*100) over the aggregated columns, with no extra grid column.

Serialize a chart to a JSON-safe ChartConfig with toJSON() and reapply it later with restore().

Spreadsheet-style =formulas with A1 references, mouse point-and-click reference entry, and Excel-style error values.

Drive the grid with natural language: an <apex-grid-ai> panel runs prompts on an offline rule engine, with optional LLM escalation.

Declarative master/detail: each expanded row renders a nested grid the parent creates, caches and populates.

8 pre-built themes: Bootstrap, Fluent, Material, Indigo, each in light and dark.

Roll your own theme by overriding the grid’s CSS custom properties.

Download the view, selected rows, or all rows as a UTF-8 BOM CSV file.

Save and restore the full grid view (columns, sort, filter, selection, paging) with getState / setState.

Excel export from <apex-grid-enterprise>: numbers, booleans, and dates keep native cell types.

Toolbar quick-filter search alongside one-click CSV export.