Permission Matrix

Role-based permission configuration matrix

SaaSTenant Admin

Overview

PermissionMatrix renders a tabular grid of checkboxes organized by resource (rows) and action (columns). It supports implied permission logic (e.g., selecting "Edit All" auto-selects "View All" and "View Own"), row-level toggle via an indeterminate checkbox, and a disabled read-only state.

Usage

import { PermissionMatrix } from "@leanicon/web-builder-library/saas";

<PermissionMatrix
  permissions={[
    {
      resource: "users",
      actions: [
        { id: "users.view_own", label: "View Own" },
        { id: "users.edit_own", label: "Edit Own" },
      ],
    },
  ]}
  selectedPermissions={["users.view_own"]}
  onChange={(perms) => setPermissions(perms)}
/>;

Variants

Default

ResourceView OwnView AllCreate
—

Dark

ResourceView OwnView AllCreate
—

All Selected

ResourceView OwnView AllCreate
—

Disabled

ResourceView OwnView All

Props

NameTypeDefaultRequiredDescription
permissionsPermissionGroup[]—Yes
selectedPermissionsstring[]—Yes
onChange(permissions: string[]) => void—Yes
disabledbooleanfalseNo