> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/v-2024-05-25/sdks/react/components/userrolestable/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# UserRolesTable component

## Overview

The `UserRolesTable` component is a comprehensive React component that displays all [user roles](../../../get-started/server-side#create-role) and their permission sets created by an entity.

## Permissions

To access this component, the entity user must have `read` permissions for the `role` object. For more information, see [List of permissions](/api/concepts/authentication#permissions).

## Preview

![UserRolesTable component preview](/_fern-img/5e2651bffdf239feb3eaae8edb5d4615124999e6ab0a653c9de64ab5b4e52457.webp)

> **Tip**
>
> You can move and organize the columns of the table the way you prefer.

## Usage

Use the `UserRolesTable` component in your application as shown:

**`React.js`**

```jsx React.js
import { UserRolesTable } from "@monite/sdk-react";

// This component must be rendered within the MoniteProvider wrapper
const UserRoleTablePage = () => {
  return <UserRolesTable />;
};
```

## Props

The following table shows all `UserRolesTable` component properties, their types, and descriptions:

| Prop              | Type       | Description                                                                                                                    |
| :---------------- | :--------- | :----------------------------------------------------------------------------------------------------------------------------- |
| `onFilterChanged` | `function` | This callback is triggered when the filtering options are changed.                                                             |
| `onRowClick`      | `function` | This callback takes the identifier of the clicked row as a parameter and is triggered when a user role table row is clicked.   |
| `onSortChanged`   | `function` | This callback is called when the current sorting order for any column is changed. It returns the newly sorted field and order. |

The `onSortChanged` takes one argument whose value is an object with the following fields:

* **`sort`** - the field name of the column whose sort order was changed. For example, `created_at`.
* **`order`** - the new sort order, either `asc` or `desc`

```javascript
(
  "sort": "created_at",
  "order": "asc" | "desc" | null
) => void
```