CounterpartsTable — Monite Documentation

Overview

The CounterpartsTable component displays a table with a list of counterparts 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 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.

Preview

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

1 import { CounterpartsTable } from "@monite/sdk-react";
2 
3 ...
4 
5 // TODO: This component must be rendered within the MoniteProvider wrapper
6 const CounterpartsTablePage = () => {
7   return <CounterpartsTable />
8 };

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.
`onDelete`	`function`	This callback is triggered when an existing counterpart is deleted via the menu icon on the `CounterpartsTable` component.
`onEdit`	`function`	This callback is triggered when an existing counterpart’s details are edited via the menu icon on the `CounterpartsTable` component.
`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

1 (
2   "sort": "policy_name",
3   "order": "asc" | "desc" | null
4 ) => 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.

1 {
2   "next_pagination_token": "string" | null | undefined,
3   "prev_pagination_token": "string" | null | undefined
4 }

. It is used to determine the availability of the “next” and “previous” buttons at the bottom of the table.

1 {
2   "next_pagination_token": "string" | null | undefined,
3   "prev_pagination_token": "string" | null | undefined
4 }

1	import { CounterpartsTable } from "@monite/sdk-react";
2
3	...
4
5	// TODO: This component must be rendered within the MoniteProvider wrapper
6	const CounterpartsTablePage = () => {
7	return <CounterpartsTable />
8	};

1	(
2	"sort": "policy_name",
3	"order": "asc" \| "desc" \| null
4	) => void

1	{
2	"next_pagination_token": "string" \| null \| undefined,
3	"prev_pagination_token": "string" \| null \| undefined
4	}