PayablesTable

Overview

A table that displays the list of payable invoices that are available to the entity user with the access token. The component supports filtering and pagination between these payables. The UI for each table row depends on the payable status on that row. For example, payables in the waiting_to_be_paid status have a customizable “Pay” button to pay the payable. To pay a payable via the “Pay” button, use the onPay prop on the PayablesTable component. For more information, see Props.

Permissions

To access this component, the entity user must have read permissions for the payable object. For more information, see List of permissions.

Preview

PayablesTable component preview
PayablesTable component preview

Usage

Use in the PayablesTable component in your application as shown:

1import { PayablesTable } from "@monite/sdk-react";
2
3// This component must be rendered within the MoniteProvider wrapper
4const PayablesTablePage = () => {
5  return <PayablesTable />;
6};

Props

PropTypeDescription
onChangeFilterfunctionThis callback is triggered when the filtering options are changed.
onRowClickfunctionThis callback takes the identifier of the clicked row as a parameter and is triggered when a payable table row is clicked.
onPayfunctionThis callback is the event handler for the “Pay” action. It accepts the UUID of the payable table row to perform the action on.
onChangeSortfunctionThis 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 the column whose sort order was changed. For example, created_at.
  • order - the new sort order, either asc or desc
1(
2  "sort": "created_at",
3  "order": "asc" | "desc" | null
4) => void