Permission Matrix — cinder playground

Overview

A discrete matrix for scanning scope, role, or policy access across operations.

Use PermissionMatrix when each cell is an enumerated access state. Use MatrixChart when cell values are numeric magnitudes that need heatmap color interpolation.

Usage

<script lang="ts">
  import PermissionMatrix from '@lostgradient/cinder/permission-matrix';

  const rows = [{ id: 'workflows-admin', label: 'workflows:admin' }];
  const columns = [{ id: 'cancel', label: 'cancel' }];
</script>

<PermissionMatrix
  label="Scope matrix"
  {rows}
  {columns}
  getCellState={() => 'granted'}
  onCellClick={(row, column) => console.log(row.id, column.id)}
/>

Live preview

When to use

Use when

Showing whether scopes, roles, or policy categories grant specific operations.
Each cell represents a discrete state such as granted, denied, or not applicable.

Avoid when

Showing numeric density or magnitude across two categorical dimensions — use matrix-chart instead.
Rendering editable permissions — use a purpose-built form or data-grid instead.

Examples

Scope matrix

A permission matrix showing which authorization scopes grant catalog operations.

Props

Props for permission-matrix
Name	Type	Default	Required	Description
`label`	`text`		req	Accessible label for the matrix.
`description`	`text`			Optional description rendered above the matrix.
`rows`	`readonly TRow[]`		req	Row definitions, usually authorization scopes.
`columns`	`readonly TColumn[]`		req	Column definitions, usually operations.
`getCellState`	`(row: TRow, column: TColumn) => PermissionMatrixCellState`		req	Resolves the discrete state for one row and column intersection.
`onCellClick`	`(row: TRow, column: TColumn, state: PermissionMatrixCellState) => void`			Called when a matrix cell is activated.
`stateLabels`	`Partial<Record<PermissionMatrixCellState, string>>`			Accessible and visible labels for the built-in states.
`rowHeaderLabel`	`text`	`'Scope'`		Header label for the row axis. Default `Scope`.
`loading`	`boolean`	`false`		Whether the matrix is in a loading state.
`empty`	`snippet`			Snippet rendered when rows or columns are empty.
`loadingContent`	`snippet`			Snippet rendered while the matrix is loading.
`id`	`unknown`		req