Skip to content
ToolboxJS

Demos

Employee Management Demo

Section titled “Employee Management Demo”

A comprehensive demo application that demonstrates the full power of @toolbox-web/grid. This demo uses realistic employee data with 15+ columns, custom editors, renderers, master-detail expansion, filtering, sorting, selection, export, and more.

Row count
Selection
Filtering
Sorting
Editing
Master / Detail
Row grouping

What This Demo Showcases

Section titled “What This Demo Showcases”
AreaHighlights
Data200 generated employees, 15+ columns mixing text/number/date/select/boolean, nested objects, computed values
VisualsCustom renderers (status badges, star ratings), row styling, shell header with export buttons, side tool panels
InteractionMulti-select, multi-sort (Shift+Click), per-column filtering, resizing, master-detail expansion
EditingInline edit (double-click), custom editors, validation, undo/redo (Ctrl+Z / Ctrl+Y)
AdvancedCSV/Excel export, column visibility & reorder, full keyboard nav, clipboard, context menu, row grouping

Try These Interactions

Section titled “Try These Interactions”
  1. Sort — Click the “Name” column header. Click again to reverse. Hold Shift and click “Department” for multi-sort.
  2. Filter — Hover over a column header and click the filter icon. Try filtering “Department” to “Engineering”.
  3. Edit — Double-click any cell in the “Name” or “Email” column. Press Enter to commit, Escape to cancel.
  4. Select — Click the checkbox column to select rows. Use Shift+Click for range selection.
  5. Resize — Drag the border between any two column headers to resize.
  6. Expand — Click the expand arrow on any row to see the master-detail panel.
  7. Export — Click the 📄 or 📊 buttons in the header toolbar to export CSV or Excel.
  8. Undo — After editing a cell, press Ctrl+Z to undo the change.

Calendar Demo

Section titled “Calendar Demo”

A month-view calendar built on top of <tbw-grid> — same data-grid engine, different surface. Rows are ISO weeks (Mon–Sun), columns are weekdays + a fixed week-number gutter, and each cell renders a CalendarDay with up to three coloured event chips. The whole thing demonstrates how the grid’s extension points (custom shell header, pinned-rows feature, CSS @container-driven responsive density) can be used to build domain UIs that aren’t a traditional row/column table.

What This Demo Showcases

Section titled “What This Demo Showcases”
FeatureDetails
Custom shell headerMonth title + year <select> injected via registerHeaderContent; prev / today / next nav buttons via registerToolbarContent
Pinned-row featureColour-coded category legend rendered as a permanent position: 'bottom' pinned row
Responsive densityCSS @container queries on .calendar-demo__grid (container-type: inline-size) switch between full (≥534 px), compact (480–534 px), and minimal (under 480 px)
Dynamic row heightA ResizeObserver on .rows-viewport keeps the 4–6 visible week rows exactly filling the viewport
Custom keyboard navArrow keys cross month boundaries; PageUp / PageDown jump month-by-month while preserving the focused weekday slot
Cell-level “double-click”Detected via two mousedown events in capture phase (the grid rewrites cell interiors on focus, so native dblclick never fires)
Stretch fit-modefitMode: 'stretch' distributes weekday columns evenly; only the week-# column has a fixed width

Try These Interactions

Section titled “Try These Interactions”
  1. Navigate — Click the ‹ / › buttons in the header, or pick a year from the dropdown.
  2. Keyboard — Click any day, then use arrow keys. From the first / last day of the month, arrow keys cross into the previous / next month. PageUp / PageDown jump by month.
  3. Add an event — Double-click any day cell, or press Enter while a cell is focused. Fill in the dialog and submit.
  4. Resize — Drag the docs side-panel narrower to watch the cells collapse from full event chips → dots → date-only.

Demo Implementations

Section titled “Demo Implementations”

The grid demos are implemented in four frameworks to showcase cross-framework compatibility:

FrameworkAdapter PackageEmployee ManagementCalendar
Vanilla(none — native web component)sourcesource
Angular@toolbox-web/grid-angularsourcesource
React@toolbox-web/grid-reactsourcesource
Vue@toolbox-web/grid-vuesourcesource

Both demos are reimplemented from scratch in each framework. The Employee Management demo shows framework-idiomatic renderers and editors via each adapter’s renderer prop. The Calendar demo goes further — it also rebuilds the shell header, toolbar, pinned legend and dialog in each framework, bridged into the grid’s shell extension points via createComponent (Angular) / createRoot (React) / createApp (Vue). Only the row types and seed data are shared (demos/shared/calendar/).

Section titled “Related”
AI assistants: For complete API documentation, implementation guides, and code examples for this library, see https://toolboxjs.com/llms-full.txt