KQ-509 · ACCESS/MATRIX
Access Matrix
A permission matrix with roles down, actions across and a switch in every cell. Flipping a row's master runs its cells in order on cascade(), each knob sliding on snap, so a bulk change reads as one act rather than five simultaneous blinks; a column header lights its column by hover or by focus. Arrow keys walk the grid in two dimensions, Home and End jump to the ends of a row, Space and Enter toggle.
KQ-509 · ACCESS/MATRIX
Gaugeworks workspace roles
Role
All
Read
Comment
Edit
Export
Admin
Owner
Editor
Viewer
9 of 15 permissions granted
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/access-matrix
Props
- roles
- AccessRole[]
- default —
- Rows, top to bottom; each needs an id and a label.
- actions
- AccessAction[]
- default —
- Columns, left to right; each needs an id and a label.
- value / defaultValue
- Record<string, string[]>
- default —
- Controlled or initial grants: the granted action ids per role id.
- onValueChange
- (value: Record<string, string[]>) => void
- default —
- Fires with the whole grant map on any toggle, cell or row master.
- label
- React.ReactNode
- default —
- Visible group label. Omit it and pass aria-label to label the grid invisibly.
| Prop | Type | Default | Description |
|---|---|---|---|
| roles | AccessRole[] | — | Rows, top to bottom; each needs an id and a label. |
| actions | AccessAction[] | — | Columns, left to right; each needs an id and a label. |
| value / defaultValue | Record<string, string[]> | — | Controlled or initial grants: the granted action ids per role id. |
| onValueChange | (value: Record<string, string[]>) => void | — | Fires with the whole grant map on any toggle, cell or row master. |
| label | React.ReactNode | — | Visible group label. Omit it and pass aria-label to label the grid invisibly. |