Workflow Dashboard
A compound DataGrid with a contextual slide-over edit form demonstrating strict local-vs-global state isolation, mock API delays, and error handling.
Click a row, edit the form, and observe that changes only propagate to the grid on a successful save. Use the error checkbox to test failure paths.
How to test this demo
The data grid shows a mock commercial banking task list. Try this sequence:
- Click any row to open the contextual edit form in a modal.
- Modify the Client Name, Amount, or Status fields.Notice the data grid behind does not update — the form state is fully isolated.
- Click "Save Changes" to trigger the mock API call. Watch the loading spinner and disabled button state during the 1.5s artificial delay.
- After the mock response succeeds, the modal closes and the grid updates with your new values.
- Error test:Open a row, tick the "Simulate API Error" checkbox, then save. The error is caught and displayed inside the modal without affecting the parent grid.
- Cancel test:Edit a row, make changes, then click "Cancel". All draft changes are discarded and the grid remains unmodified.
Commercial Tasks
Total: 4
| ID | Client Name | Amount (USD) | Status | Last Updated | Actions |
|---|---|---|---|---|---|
| TXN-001 | Acme Corp | $1,500,000 | Pending | 2026-02-21 | |
| TXN-002 | Globex Inc | $850,000 | In Progress | 2026-02-20 | |
| TXN-003 | Initech | $3,200,000 | Under Review | 2026-02-19 | |
| TXN-004 | Soylent Corp | $45,000 | Completed | 2026-02-18 |