RolesMatrix
A grid of what each role is allowed to do.
SourcePackage @weft-js/warp
Preview
tsx
import { RolesMatrix } from '@weft-js/warp'import type { Role } from '@weft-js/warp'export function ReadOnly() { return ( <RolesMatrix roles={TEAM_ROLES} permissions={TEAM_PERMISSIONS} /> )}const TEAM_ROLES: Role[] = [{ value: 'owner', label: 'Owner', manages: true }, { value: 'admin', label: 'Admin', manages: true }, { value: 'member', label: 'Member' }, { value: 'viewer', label: 'Viewer' }]const TEAM_PERMISSIONS = [ { id: 'view', label: 'See projects and deploys', roles: ['owner', 'admin', 'member', 'viewer'] }, { id: 'deploy', label: 'Deploy to production', roles: ['owner', 'admin', 'member'] }, { id: 'env', label: 'Change environment variables', roles: ['owner', 'admin', 'member'] }, { id: 'invite', label: 'Invite and remove members', roles: ['owner', 'admin'] }, { id: 'keys', label: 'Create API keys', roles: ['owner', 'admin'] }, { id: 'billing', label: 'Change billing and plan', roles: ['owner'] },]Installation
npm install @weft-js/warpUsage
tsx
import { RolesMatrix } from '@weft-js/warp'<RolesMatrix roles={TEAM_ROLES} permissions={TEAM_PERMISSIONS} />Editable
Pass onToggle and each cell becomes a checkbox.
tsx
import { state } from '@weft-js/core'import { RolesMatrix } from '@weft-js/warp'import type { Permission } from '@weft-js/warp'import type { Role } from '@weft-js/warp'export function Edit() { const rows = state<Permission[]>(TEAM_PERMISSIONS) const flip = (p: Permission, role: string, on: boolean) => { rows.value = rows.value.map(x => (x.id === p.id ? { ...x, roles: on ? [...x.roles, role] : x.roles.filter(r => r !== role) } : x)) } return <RolesMatrix roles={TEAM_ROLES} permissions={rows.value} onToggle={flip} />}const TEAM_ROLES: Role[] = [{ value: 'owner', label: 'Owner', manages: true }, { value: 'admin', label: 'Admin', manages: true }, { value: 'member', label: 'Member' }, { value: 'viewer', label: 'Viewer' }]const TEAM_PERMISSIONS = [ { id: 'view', label: 'See projects and deploys', roles: ['owner', 'admin', 'member', 'viewer'] }, { id: 'deploy', label: 'Deploy to production', roles: ['owner', 'admin', 'member'] }, { id: 'env', label: 'Change environment variables', roles: ['owner', 'admin', 'member'] }, { id: 'invite', label: 'Invite and remove members', roles: ['owner', 'admin'] }, { id: 'keys', label: 'Create API keys', roles: ['owner', 'admin'] }, { id: 'billing', label: 'Change billing and plan', roles: ['owner'] },]Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
roles | Role[] | — | The columns. |
permissions | Permission[] | — | The rows: a label and the roles that have it. |
| Event | Type | Default | Description |
|---|---|---|---|
onToggle | ((permission: Permission, role: string, on: boolean) => void) | — | Called when a cell changes. Without it the grid is read only. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="roles-matrix"] [data-part="yes"]
yessr-onlyno
RelatedMembers table