ApexGrid Demos
Browse all ApexGrid sample demos. Click any thumbnail to see the live demo and source code.
Simple Grid
A clean baseline grid with sortable, filterable, resizable columns.
Column Configuration
Toggle visibility, sorting, filtering, and resizing for any column at runtime.
Cell Template
Custom cell rendering: currency formatting, star ratings, status badges.
Header Template
Customize header markup and rename headers dynamically from outside.
Data Binding
Swap entire data sources at runtime with auto-generated columns.
Sorting
Click headers to sort. Name column uses a custom string-length comparator.
Sorting (Grid Config)
Multi-column sort declared up front via the grid configuration object.
Sorting (Pipeline)
Server-style sorting: the grid emits sortChanging events for your backend.
Filtering
Per-column filter UI for text, numeric, and boolean column types.
Filtering (Pipeline)
Server-side filtering with debounced requests and simulated async response.
Themes
8 pre-built themes: Bootstrap, Fluent, Material, Indigo — each in light and dark.
Custom Styling
Roll your own theme by overriding the grid’s CSS custom properties.
Tree Data (Nested Rows)
Hierarchy derived from a flat array via getDataPath, with chevrons + indent.
Row Expansion
Master-detail panels with arbitrary HTML rendered beneath any row.
Row Selection
Multi-row selection with checkbox column and keyboard range shortcuts.
Inline Editing
Double-click cells to edit; validate or reject changes via cellValueChanging.
Pagination
120 rows sliced locally with a built-in pager and configurable page sizes.
Column Pinning
Pin columns to start or end so they stay visible while horizontally scrolling.
Column Reordering
Drag column headers to reorder; the source columns array stays untouched.
Quick Filter
Debounced toolbar search input that matches across every visible column.
CSV Export
Download the view, selected rows, or all rows as a UTF-8 BOM CSV file.
Built-in Column Types
String, number, boolean, select, rating, date, image — every type in one grid.
Toolbar with Quick Filter + Export
Toolbar quick-filter search alongside one-click CSV export.
Master-Detail (Nested Grid)
Row expansion renders a nested apex-grid showing each order’s line items.
Accessibility & Keyboard Nav
ARIA grid roles, focus rings, and full arrow-key navigation between cells.