CRUD Table
The CRUD table pattern is the most common page type in Syhrezz. Used for user management, customer lists, prospect directories, and transaction logs.
Composition
1. Page Header — h1 + subtitle + primary "Add [Item]" button (top-right)
2. Filter Bar — flex row of .input fields: search + selects (role, region, status)
3. Table Wrap — .table-wrap with:
a. Toolbar — title + count + optional bulk actions + Export + Add button
b. Table — checkbox col + data cols + badge col + mono date col + actions col
c. Pagination — count summary left + page buttons right
4. Empty State — renders when data.length === 0 (no filter results vs no data at all)
5. Add/Edit Modal — .modal-overlay triggered by Add/Edit buttons
6. Delete Modal — .modal modal-sm confirm dialog (.btn-danger confirm button)Column Patterns
| Column Type | Pattern | Width |
|---|---|---|
| Checkbox | <input type="checkbox"> 16px accent-color:#6366F1 | 36px fixed |
| User cell | 30px circle avatar + stacked name (fw-600) + email/sub (10px muted) | auto |
| Badge column | .badge .badge-{variant} — always pill shaped | auto |
| Date/ID column | JetBrains Mono 11px color:#64748B | auto |
| Currency | JetBrains Mono 12px fw-700 color:#0F172A | auto |
| Actions | .btn-ghost-sm buttons — always last column | auto |
Filter Bar
Filter bars use display:flex; gap:12px; flex-wrap:wrap. Each item uses flex:1; min-width:180px. Always starts with a search input (icon left), followed by select filters. The filter bar triggers data re-fetch on change — never requires a submit button.
AI Implementation Notes
For AI coding assistants: The table is ALWAYS inside
.table-wrap (never bare). User cells combine 30px avatar + stacked name/email. Dates always use font-family:var(--font-mono). Action buttons in last column are always .btn-ghost-sm. Delete triggers a confirm modal (.btn-danger). The empty state renders when data array is empty — use a different message for "no results from filter" vs "no data exists yet".