Skip to main content

​
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

CounterpartsTable component preview

​
Usage

Use in the CounterpartsTable component in your application as shown:
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:
PropTypeDescription
onChangeFilterfunctionThis callback is triggered when the filtering options are changed.
onChangeSortfunctionThis callback is called when the current sorting order for any column is changed. It returns the newly sorted field and order.
onRowClickfunctionThis callback takes the identifier of the clicked row as a parameter and is triggered when a counterpart table row is clicked.
showCategoriesbooleanThis 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
(
  "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. 
{
  "next_pagination_token": "string" | null | undefined,
  "prev_pagination_token": "string" | null | undefined
}