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

# PayablesTable component

## 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](#props).

## Permissions

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

## Preview

![PayablesTable component preview](/_fern-img/f072e6728188dc9042522df2fefb1e69f16f1e82033d8189f90fd573fb75f0f7.webp)

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

## Usage

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

```jsx
import { PayablesTable } from "@monite/sdk-react";

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

## Props

| Prop             | Type       | Description                                                                                                                         |
| :--------------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------- |
| `onChangeFilter` | `function` | This callback is triggered when the filtering options are changed.                                                                  |
| `onRowClick`     | `function` | This callback takes the identifier of the clicked row as a parameter and is triggered when a payable table row is clicked.          |
| `onPay`          | `function` | This callback is the event handler for the "**Pay**" action. It accepts the UUID of the payable table row to perform the action on. |
| `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 the column whose sort order was changed. For example, `created_at`.
* **`order`** - the new sort order, either `asc` or `desc`

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

## Customization

### Set required columns

The `payables.requiredColumns` setting defines a list of columns that must always be visible in the UI. Columns listed here cannot be hidden by users. The example below shows all possible values:

```jsx
const componentSettings = {
  payables: {
    requiredColumns: ["document_id", "counterpart_id", "created_at", "due_date", "status", "amount", "amount_paid", "pay"],
  },
};
```

### Add tabs with filters

You can select additional tabs to be added to the payables table, which will display the results of specific filters. See an example with tabs/filters for unpaid, scheduled, and paid payables:

![Additional tabs with filters](/_fern-img/904a93b986c6ee9180bc4048538bd34fa606c4ae9b1eac58cafca45811db9608.webp)

The required fields must be informed in the `payables.summaryCardFilters` field . Here is an example:

```jsx
const componentSettings = {
  payables: {
    summaryCardFilters: {
      Unpaid: {
        status__in: ['draft', 'new', 'approve_in_progress', 'rejected'],
      },
      Scheduled: {
        status__in: [
          'draft',
          'new',
          'approve_in_progress',
          'waiting_to_be_paid',
          'partially_paid',
        ],
      },
      Paid: {
        status__in: ['paid'],
      },
    },
  },
},
```

Some fields of the code explained:

* `Unpaid`, `Scheduled`, `Paid` - The labels of the tab.
* `status__in` - The filters of the tab.

See the [`GET /payables`](/api/payables/get-payables) endpoint for all possible filters.