Table Component Lab
Custom Table Debug Surface
Use this local page to exercise the shared custom table partials across client-side and query-driven examples before rolling them into production listings.
Client-side pattern
Shared header, filters, and row actions
This table demonstrates the standard card layout with shared search, managed filters, sortable headers, rows-per-page, and per-row action menus.
Try search, status filters, channel filters, sorting, and pagination on one in-memory table.
| Account | Channel | Status | Updated | Actions |
|---|---|---|---|---|
|
Mara Launch Kit
|
Portal | Active | 2026-05-12 |
|
|
Brief Launch approvals are complete and the automation bundle is syncing without conflicts. Health Green Owner Amina Kariuki Next sync 2026-05-19 09:30 Escalation No blockers |
||||
|
Nairobi Retail Restock
|
Retail | Pending | 2026-05-10 |
|
|
Brief Store pack sizes need one last retail confirmation before the replenishment jobs can ship. Health Watch Owner Brian Mwangi Next sync 2026-05-19 11:00 Escalation Awaiting merch sign-off |
||||
|
Kilimani Wholesale Hold
|
Wholesale | Inactive | 2026-05-08 |
|
|
Brief The wholesale lane is paused while the buyer confirms the revised dispatch calendar. Health Blocked Owner Clare Njeri Next sync 2026-05-20 08:15 Escalation Buyer response due today |
||||
|
Westlands Seasonal Push
|
Portal | Active | 2026-05-06 |
|
|
Brief Promotional assets are staged and the storefront banners are ready for the evening swap. Health Green Owner Duncan Otieno Next sync 2026-05-19 16:30 Escalation Creative review at 16:00 |
||||
|
Garden City Merch Drop
|
Retail | Pending | 2026-05-05 |
|
|
Brief The drop is queued behind one inventory recount for the highlighted colourway. Health Watch Owner Esther Wairimu Next sync 2026-05-19 13:45 Escalation Inventory recount in progress |
||||
|
Industrial Park Bulk Run
|
Wholesale | Active | 2026-05-03 |
|
|
Brief Bulk dispatch labels are already printed and the carrier cut-off is locked in. Health Green Owner Farah Noor Next sync 2026-05-19 07:50 Escalation Carrier handoff scheduled |
||||
|
Riverside Client Refresh
|
Portal | Inactive | 2026-05-01 |
|
|
Brief The client requested a content freeze while their finance approver rechecks the spend guardrails. Health Blocked Owner Grace Wanjiku Next sync 2026-05-20 10:10 Escalation Finance follow-up tomorrow |
||||
|
Karen Storefront Trial
|
Retail | Active | 2026-04-29 |
|
|
Brief Trial traffic is healthy and only one coupon edge case remains under QA review. Health Green Owner Hassan Ali Next sync 2026-05-19 15:20 Escalation QA retest after coupon patch |
||||
Query-mode pattern
Server table with columns and view toggle
This example uses the shared server-table stack with managed filter panels, query-string state, column visibility, and responsive grid or table views.
| Report | Workflow | Owner | Amount | Updated | Actions |
|---|---|---|---|---|---|
|
Brand refresh tracker
|
Delivered | Catalog Team | $4,800 | 2026-05-04 |
|
|
Brief Tracker finished and the brand owners already acknowledged the summary. Recipients Brand manager, catalog ops Delivery window 18 May, 09:10 EAT Last checkpoint Owner acknowledgement saved Escalation Closed after acknowledgement |
|||||
|
Coupon performance deck
|
Processing | Growth Lane | $10,900 | 2026-05-03 |
|
|
Brief Processing the final channel comparisons before the growth deck is sent. Recipients Growth lead, campaign strategy Delivery window 19 May, 12:45 EAT Last checkpoint Channel deltas recomputed Escalation Comparison batch still running |
|||||
Grouped pattern
Grouped rows with expandable child reports
This example keeps each workflow lane as the primary row so the shared expansion contract can reveal grouped child reports in either table or grid view.
| Group | Workflow | Owner | Reports | Amount | Updated |
|---|---|---|---|---|---|
|
Queued Ops Lane
|
Queued | Automation Desk | 3 | $21,200 | 2026-05-19 |
|
Brief Queued digests are being held together so dispatch and dispute-sensitive reports can leave on one coordinated batch. Delivery window 19 May, 16:30 EAT Reports 3 Reports Revenue snapshot Mara Team Amount $4,200 Updated 2026-05-14 Delivery partner ageing North Hub Amount $7,800 Updated 2026-05-12 Client invoice variance Westlands Pod Amount $9,200 Updated 2026-05-09 |
|||||
|
Processing Reconciliation Lane
|
Processing | Finance Pod | 5 | $56,700 | 2026-05-19 |
|
Brief In-flight finance and growth packs stay grouped while recalculations and channel comparisons are still changing the final totals. Delivery window 19 May, 17:00 EAT Reports 5 Reports Merchant payout rollup Coast Desk Amount $11,800 Updated 2026-05-13 Campaign billing watch Finance Pod Amount $5,300 Updated 2026-05-10 Storefront conversion pulse Retail Ops Amount $13,600 Updated 2026-05-07 Shipping exception digest Mombasa Desk Amount $15,100 Updated 2026-05-05 Coupon performance deck Growth Lane Amount $10,900 Updated 2026-05-03 |
|||||
|
Delivered Archive Lane
|
Delivered | Support Desk | 3 | $23,700 | 2026-05-18 |
|
Brief Completed packs are grouped for fast archive review, confirmation traces, and follow-up handoff checks. Delivery window 18 May, 18:20 EAT Reports 3 Reports Refund exposure summary Ops Central Amount $16,400 Updated 2026-05-11 Payment review backlog Support Desk Amount $2,500 Updated 2026-05-08 Brand refresh tracker Catalog Team Amount $4,800 Updated 2026-05-04 |
|||||
AJAX row expansion
Lazy row details from a debug endpoint
This example loads row detail content only when a report is expanded, using the shared expansion contract for both table and grid views.
| Report | Workflow | Owner | Amount | Updated |
|---|---|---|---|---|
|
Revenue snapshot
|
Queued | Mara Team | $4,200 | 2026-05-14 |
|
|
||||
|
Merchant payout rollup
|
Processing | Coast Desk | $11,800 | 2026-05-13 |
|
|
||||
|
Delivery partner ageing
|
Queued | North Hub | $7,800 | 2026-05-12 |
|
|
||||
|
Refund exposure summary
|
Delivered | Ops Central | $16,400 | 2026-05-11 |
|
|
||||
|
Campaign billing watch
|
Processing | Finance Pod | $5,300 | 2026-05-10 |
|
|
||||
AJAX child rows
Lazy child rows injected below the parent row
This example loads real table rows from a debug endpoint and inserts them directly below the parent row so every child item renders across the same columns.
| Report | Workflow | Owner | Amount | Updated |
|---|---|---|---|---|
|
Finance watchlist
|
Processing | Finance Ops | $12,400 | 2026-05-26 |
|
|
||||
|
Catalog rollup
|
Queued | Catalog Team | $9,800 | 2026-05-24 |
|
|
||||
|
Ops escalations
|
Processing | Ops Central | $15,100 | 2026-05-21 |
|
|
||||
AJAX group expansion
Lazy grouped content from a debug endpoint
This example loads a grouped child collection only when the group is expanded, reusing the same expansion lifecycle for table rows and grid cards.
| Group | Workflow | Owner | Reports | Amount | Updated |
|---|---|---|---|---|---|
|
Queued Ops Lane
|
Queued | Automation Desk | 3 | $21,200 | 2026-05-19 |
|
|
|||||
|
Processing Reconciliation Lane
|
Processing | Finance Pod | 5 | $56,700 | 2026-05-19 |
|
|
|||||
|
Delivered Archive Lane
|
Delivered | Support Desk | 3 | $23,700 | 2026-05-18 |
|
|
|||||