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

# CounterpartsTable component

## Overview

The `CounterpartsTable` component displays a table with a list of [counterparts](../../../common/counterparts/index) available to the authenticated entity user. The table displays the counterpart name, type (customer or vendor), country and city, and the default contact (if any). This component calls the [`GET /counterparts`](/api/counterparts/get-counterparts) endpoint to fetch the data.

The table supports the following functionality out-of-the-box:

* Pagination: the user can navigate to the next or previous page only. The default page size is 10 items per page.
* Sorting by the counterpart name.
* Searching counterparts by name.
* Filtering by the counterpart type: customer or vendor, organization or individual.

Search, sorting, filtering, and pagination are done at the server side rather than the client side. That is, any change to the table display options triggers a new request to the Monite API to return the adjusted data set.

## Permissions

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

## Preview

![CounterpartsTable component preview](/_fern-img/6e59164bd2833d8a83209d6d9a86375ea8f4664919f728b031b92570902ff7a0.webp)

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

## Usage

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

**`React.js`**

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

...

// TODO: This component must be rendered within the MoniteProvider wrapper
const CounterpartsTablePage = () => {
  return <CounterpartsTable />
};
```

## Props

The following table shows all `CounterpartsTable` component properties, their types, and description:

| Prop             | Type       | Description                                                                                                                      |
| :--------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------- |
| `onChangeFilter` | `function` | This callback is triggered when the filtering options are changed.                                                               |
| `onChangeSort`   | `function` | This callback is called when the current sorting order for any column is changed. It returns the newly sorted field and order.   |
| `onRowClick`     | `function` | This callback takes the identifier of the clicked row as a parameter and is triggered when a counterpart table row is clicked.   |
| `showCategories` | `boolean`  | This prop determines whether or not the "**Type**" column will be shown on the `CounterpartsTable` component. Defaults to `true` |

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
```

The `paginationTokens` is used to determine the availability of the "**Next**" and "**Previous**" buttons at the bottom of the table. For more information, see [Pagination, sorting, and filtering](/api/concepts/pagination-sorting-filtering).

```javascript
{
  "next_pagination_token": "string" | null | undefined,
  "prev_pagination_token": "string" | null | undefined
}
```