> This page is for version v2024-01-31.
> For other versions, use one of these documentation indexes:
> - v2024-05-25 (default): https://docs.monite.com/v-2024-05-25/llms.txt
> - v2024-01-31: https://docs.monite.com/v2024-01-31/llms.txt
> - v2023-09-01: https://docs.monite.com/v2023-09-01/llms.txt

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

# ReceivablesTable component

## Overview

`ReceivablesTable` is a React component that displays all [accounts receivable](../../../accounts-receivable/index) documents - invoices, quotes, and credit notes - created by an entity. The component supports searching, filtering, and pagination between different receivables.

## Permissions

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

## Preview

![ReceivablesTable component preview](/_fern-img/64484657694adf1cc4303f7395e9871f76b8ce53a7cd07c3387d16c8bc80111b.webp)

## Usage

Use the `ReceivablesTable` component in your application as follows:

**`React.js`**

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

...

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

## Props

**`onRowClick`** `function`

This callback takes the identifier of the clicked row as a parameter and is triggered when a receivables table row is clicked.

---

**`onTabChange`** `function`

This callback is triggered any time the component's tab is changed.

---

**`tab`** `number`

Gets or sets the currently active tab in the `ReceivablesTable` component. The value is the tab's 0-based index from left to right.

When using the default tabs, possible values are:

* 0 - **Invoices** tab
* 1 - **Quotes** tab
* 2 - **Credit notes** tab

---

**`tabs`** `array of objects`

The list of displayed tabs. Each tab object defines the data query used to populate the table and the search filters displayed above the table. The default tabs are **Invoices**, **Quotes**, and **Credit notes**. The default filters for each tab are the document number (`document_id`), status, counterpart, plus the due date filter for invoices. See [Customize the tabs](#customize-the-tabs) for more information and examples.

---

## Customize the tabs

You can use the `tabs` prop to fully customize the tabs displayed in the `ReceivablesTable` component. For example, you can:

* hide some of the default tabs,
* display different document statuses in different tabs (for example, display draft and paid invoices separately),
* adjust the API queries used to fetch documents for each tab.

The `tabs` value has the following structure:

```js
tabs: [
  {
    // Tab caption
    label: 'Draft invoices',

    // API query used to fetch the documents for this tab
    query: {
      // Required. Document type (`invoice`, `quote`, or `credit_note`).
      type: 'invoice',

      // Other query filters are optional
      status__in: ['draft', ...],
      sort: 'created_at',
      ...
    },

    // The filters (search boxes) to display in this tab, above the documents table.
    // The default filters are:
    filters: [
      'document_id__contains',
      'counterpart_id',
      'due_date__lte',
    ],
  },

  // Other tabs
  ...
]
```

#### Example: Show "Invoices" tab only (hide "Quotes" and "Credit notes")

**`React.js`**

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

...

// This component must be rendered within the MoniteProvider wrapper
const ReceivablesTablePage = () => {
  const tabs = [
    {
      label: 'Invoices',
      query: {
        type: 'invoice',
        sort: 'created_at',
        order: 'desc',
      },
    },
  ]

  return <ReceivablesTable tabs={tabs} />
};
```

#### Example: Show "Draft invoices", "Recurring invoices", and "Other invoices" tabs

**`React.js`**

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

...

// This component must be rendered within the MoniteProvider wrapper
const ReceivablesTablePage = () => {
  // Common query and search filters for all tabs
  const queryFilters = {
    type: "invoice",
    sort: "created_at",
    order: "desc",
  }

  const tabs = [
    {
      label: "Draft invoices",
      query: {
        status: "draft",
        ...queryFilters,
      },
    },
    {
      label: "Recurring invoices",
      query: {
        status: "recurring",
        ...queryFilters,
      },
    },
    {
      label: "Other invoices",
      query: {
        status__in: [
          "issued",
          "partially_paid",
          "paid",
          "overdue",
          "uncollectible",
          "canceled",
        ],
        ...queryFilters,
      },
    },
  ]

  return <ReceivablesTable tabs={tabs} />
};
```