# Organization Membership Table

PropelAuth's Organization Membership Table Component allow you to customize the UI around displaying members of an org, removing members from the org, and updating the roles of members in the org. [Check out the documentation here](https://docs.propelauth.com/getting-started/basics/organizations) for more information about organizations.

## Organization Members

| Email                 | Status   | Role                   | Remove User |
|-----------------------|----------|------------------------|--------------|
| user1@acmeinc.com    | Active   | OwnerAdminMember       | Remove       |
| user2@acmeinc.com    | Active   | OwnerAdminMember       | Remove       |
| user3@acmeinc.com    | Inactive | OwnerAdminMember       | Remove       |

## [Shadcn Installation](https://ui.propelauth.com/org-membership-components/org-membership-table#shadcn-installation)

Install this component from our [shadcn registry](https://ui.propelauth.com/getting-started/component-registry).

```bash
npx shadcn@latest add https://components.propelauth.com/r/org-membership-table.json
```

# Reference APIs

These are the APIs that are used by the above component. You can use these APIs directly in your own code.

## [fetchOrgMembers](https://ui.propelauth.com/org-membership-components/org-membership-table#fetch-org-members)

Fetches a paginated list of an org's members.

## Arguments

- Name`orgId` *TypestringDescriptionThe ID of the org.
- Name`page_number`TypenumberDescriptionThe page number to return. Starts at 0.
- Name`page_size`TypenumberDescriptionThe amount of results per page.
- Name`email_search`TypestringDescriptionFilter by member email.

## Success Response

- Name`users`TypeOrgMember[]Description

An array of API Keys belonging to the provided org.

- `user_id` _string_
  - `email` _string_
  - `role` _string_
  - `additional_roles` _string[]_
  - `possible_roles` _string[]_
  - `can_be_deleted` _boolean_
  - `is_enabled` _boolean_
  - `is_2fa_enabled` _boolean_

- Name`total_count`TypenumberDescriptionThe total amount of org members.
- Name`page_number`TypenumberDescriptionThe current page.
- Name`page_size`TypenumberDescriptionThe maximum amount of results of the page.
- Name`has_more_results`TypebooleanDescriptionReturns true of there are more results beyond the current page.

## Response Functions

The response object has a **handle** function that you can use to handle the response. These functions can be async, and you can return values from them.

- Name`success`DescriptionSuccessful request.
- Name`orgNotFound`DescriptionThe provided Org ID was not found.
- Name`orgsNotEnabled`DescriptionOrganizations are not enabled for the project.
- Name`unauthorized`DescriptionThe user is not logged in.
- Name`unexpectedOrUnhandled`DescriptionAn unexpected error occurred.

### Request

```javascript
const { fetchOrgMembers } = useAuthFrontendApis()

const response = await fetchOrgMembers('1189c444-8a2d-4c41-8b4b-ae43ce79a492', {
    page_number: 0,
    page_size: 10,
    email_search: "test@example.com",
});
await response.handle({
    success: (data) => {
        console.log(data)
    },
    orgNotFound(error) {
        console.error('Org not found', error);
    },
    orgsNotEnabled(error) {
        console.error('Org not enabled', error);
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error);
    },
});
```

### Successful Response

```json
{
    "users": [\
        {\
            "user_id": "1d31f06...",\
            "email": "test@example.com",\
            "role": "Owner",\
            "additional_roles": [],\
            "possible_roles": [\
                "Owner",\
                "Admin",\
                "Member"\
            ],\
            "can_be_deleted": true,\
            "is_enabled": true,\
            "is_2fa_enabled": true\
        },\
        {\
            "user_id": "d20605...",\
            "email": "test2@example.com",\
            "role": "Admin",\
            "additional_roles": [],\
            "possible_roles": [\
                "Owner",\
                "Admin",\
                "Member"\
            ],\
            "can_be_deleted": true,\
            "is_enabled": true,\
            "is_2fa_enabled": false\
        }\
    ],
    "total_count": 2,
    "page_number": 0,
    "page_size": 10,
    "has_more_results": false
}
```

## [removeUserFromOrg](https://ui.propelauth.com/org-membership-components/org-membership-table#remove-user-from-org)

Removes the provided user from the provided organization.

## Arguments

- Name`org_id` *TypestringDescriptionThe ID of the org.
- Name`user_id` *TypestringDescriptionThe ID of the user to remove from the org.

## Response Functions

The response object has a **handle** function that you can use to handle the response. These functions can be async, and you can return values from them.

- Name`success`DescriptionSuccessful request.
- Name`orgNotFound`DescriptionThe org ID cannot be found.
- Name`userNotFoundInOrg`DescriptionUser ID not found.
- Name`noRemovePermission`DescriptionThe user doing the action does not have permission to remove the provided user from the org.
- Name`orgsNotEnabled`DescriptionOrganizations not enabled for this project.
- Name`mustBeAtLeastOneOwner`DescriptionThe user you're trying to remove is the only Owner of the org.
- Name`badRequest`DescriptionIncorrect arguments given.
- Name`unauthorized`DescriptionThe user is not logged in.
- Name`unexpectedOrUnhandled`DescriptionAn unexpected error occurred.

### Request

```javascript
const { removeUserFromOrg } = useAuthFrontendApis()

const response = await removeUserFromOrg({
    org_id: "1189c444-8a2d-4c41-8b4b-ae43ce79a492",
    user_id: "31c41c16-c281-44ae-9602-8a047e3bf33d",
});
await response.handle({
    success: async () => {
        console.log('success')
    },
    badRequest(error) {
        for (const [field, fieldErrorMessage] of Object.entries(error.user_facing_errors)) {
            console.log('Error: "' + fieldErrorMessage + '" for field: "' + field + '"')
        }
    },
    orgNotFound(error) {
        console.error('Org not found', error);
    },
    userNotFoundInOrg(error) {
        console.error('User not found', error);
    },
    noRemovePermission(error) {
        console.error('No remove permission', error);
    },
    orgsNotEnabled(error) {
        console.error('Org not enabled', error);
    },
    mustBeAtLeastOneOwner(error) {
        console.error('There must be at least one user with the Owner role in this org', error);
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error);
    },
})
```

### Successful Response

```json
{}
```

## [updateUserRoleInOrg](https://ui.propelauth.com/org-membership-components/org-membership-table#update-user-role-in-org)

Updates the provided user's role within the provided organization.

## Arguments

- Name`org_id` *TypestringDescriptionThe ID of the org.
- Name`user_id` *TypestringDescriptionThe ID of the user.
- Name`role` *TypestringDescriptionThe role the user will be updated to.
- Name`additional_roles`Typestring[]Description

If using [multiple roles per user](https://docs.propelauth.com/overview/authorization/managing-roles-permissions#multiple-roles-per-user), an array of additional roles for the user.

## Response Functions

The response object has a **handle** function that you can use to handle the response. These functions can be async, and you can return values from them.

- Name`success`DescriptionSuccessful request.
- Name`noUpdateRolePermission`DescriptionUser does not have permission to update this user's role.
- Name`userNotFoundInOrg`DescriptionUser ID not found.
- Name`orgsNotEnabled`DescriptionOrganizations not enabled for this project.
- Name`badRequest`DescriptionIncorrect arguments given.
- Name`unauthorized`DescriptionThe user is not logged in.
- Name`unexpectedOrUnhandled`DescriptionAn unexpected error occurred.

### Request

```javascript
const { updateUserRoleInOrg } = useAuthFrontendApis()

const response = await updateUserRoleInOrg({
    org_id: "1189c444-8a2d-4c41-8b4b-ae43ce79a492",
    user_id: "31c41c16-c281-44ae-9602-8a047e3bf33d",
    role: "Admin",
    // if using multi-role support
    additional_roles: [\
        "Member"\
    ]
});
await response.handle({
    success: async () => {
        console.log('success')
    },
    badRequest(error) {
        for (const [field, fieldErrorMessage] of Object.entries(error.user_facing_errors)) {
            console.log('Error: "' + fieldErrorMessage + '" for field: "' + field + '"')
        }
    },
    userNotFoundInOrg(error) {
        console.error('User not found', error);
    },
    noUpdateRolePermission(error) {
        console.error('No update role permission', error);
    },
    orgsNotEnabled(error) {
        console.error('Org not enabled', error);
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled error', error);
    },
});
```

### Successful Response

```json
{}
```