MembershipList

Display tenant memberships with filtering, sorting, and actions.

Installation

typescript
import { MembershipList } from '@happyvertical/smrt-svelte';

Basic Usage

Acme Corp active
Admin
Joined Jan 1, 2024
Acme Corp active
Editor
Joined Feb 15, 2024
TechStart Inc pending
Viewer
Joined Mar 10, 2024
svelte
<MembershipList {memberships} />

With Actions

Acme Corp active
Admin
Joined Jan 1, 2024
Acme Corp active
Editor
Joined Feb 15, 2024
TechStart Inc pending
Viewer
Joined Mar 10, 2024
svelte
<MembershipList
  {memberships}
  onchangerole={handleChangeRole}
  onremove={handleRemove}
/>

Props

PropTypeDefaultDescription
memberships *MembershipWithContext[]-Array of { membership, tenant, role } objects
onchangerole (membership: Membership) => void-Change role callback
onremove (membership: Membership) => void-Remove callback
emptyMessage string'No memberships found'Message when list is empty
loading booleanfalseShow loading state

TypeScript

typescript
interface MembershipWithContext {
  membership: Membership;
  tenant: Tenant;
  role: Role;
}

interface Props {
  memberships: MembershipWithContext[];
  onchangerole?: (membership: Membership) => void;
  onremove?: (membership: Membership) => void;
  emptyMessage?: string;
  loading?: boolean;
}