Recipe

Data table with filter bar

You need a sortable table of users with a filter bar, status Badges, and row actions.

Recommended:

Prompt

Use @gunjo/ui. Reference https://gunjo.dev/api/specs/display/data-table.

Build a user-management table:
- Top bar: Input (search) + FilterButton + Button "Add user" (bg-primary, with Plus icon)
- DataTable columns: Avatar+Name, Email, Status (Badge: success/warning/destructive variants), Last seen, Actions (DropdownMenu: Edit / Delete)
- Toggle the active/inactive status with a Switch in a separate column
- Pagination at bottom

Mock 8 rows of user data. Map status to Badge variants: Suspended → destructive, Pending → outline, Active → default, Inactive → secondary. Do not introduce custom color classes — Badge ships only default/destructive/outline/secondary, and the design system rule is semantic tokens only.

Expected output

A complete user table page using DataTable, Badge, Switch, DropdownMenu, FilterButton, Pagination.

Components used

DataTable

Badge

Switch

DropdownMenu

FilterButton

Pagination