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

# TagsTable component

## Overview

`TagsTable` is a React component that displays all [tags](../../../common/tags) created by an entity and allows renaming and deleting these tags.

## Permissions

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

## Preview

![TagsTable component preview](/_fern-img/a8bc24cf18b1e7136f03ef20fbf4e2acf35e026a3c9f6b676fe39cf00e469ad2.webp)

## Usage

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

**`React.js`**

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

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

## Props

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

| Prop           | Type       | Description                                                                                                                    |
| :------------- | :--------- | :----------------------------------------------------------------------------------------------------------------------------- |
| `onChangeSort` | `function` | This callback is called when the current sorting order for any column is changed. It returns the newly sorted field and order. |

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

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

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