React SDKComponents and wrappers

ReceivablesTable component

Overview

ReceivablesTable is a React component that displays all accounts receivable 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.

Preview

ReceivablesTable component preview
ReceivablesTable component preview

Usage

Use the ReceivablesTable component in your application as follows:

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

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

1tabs: [
2  {
3    // Tab caption
4    label: 'Draft invoices',
5
6    // API query used to fetch the documents for this tab
7    query: {
8      // Required. Document type (`invoice`, `quote`, or `credit_note`).
9      type: 'invoice',
10
11      // Other query filters are optional
12      status__in: ['draft', ...],
13      sort: 'created_at',
14      ...
15    },
16
17    // The filters (search boxes) to display in this tab, above the documents table.
18    // The default filters are:
19    filters: [
20      'document_id__contains',
21      'counterpart_id',
22      'due_date__lte',
23    ],
24  },
25
26  // Other tabs
27  ...
28]
React.js
1import { ReceivablesTable } from "@monite/sdk-react";
2
3...
4
5// This component must be rendered within the MoniteProvider wrapper
6const ReceivablesTablePage = () => {
7  const tabs = [
8    {
9      label: 'Invoices',
10      query: {
11        type: 'invoice',
12        sort: 'created_at',
13        order: 'desc',
14      },
15    },
16  ]
17
18  return <ReceivablesTable tabs={tabs} />
19};
React.js
1import { ReceivablesTable } from "@monite/sdk-react";
2
3...
4
5// This component must be rendered within the MoniteProvider wrapper
6const ReceivablesTablePage = () => {
7  // Common query and search filters for all tabs
8  const queryFilters = {
9    type: "invoice",
10    sort: "created_at",
11    order: "desc",
12  }
13
14  const tabs = [
15    {
16      label: "Draft invoices",
17      query: {
18        status: "draft",
19        ...queryFilters,
20      },
21    },
22    {
23      label: "Recurring invoices",
24      query: {
25        status: "recurring",
26        ...queryFilters,
27      },
28    },
29    {
30      label: "Other invoices",
31      query: {
32        status__in: [
33          "issued",
34          "partially_paid",
35          "paid",
36          "overdue",
37          "uncollectible",
38          "canceled",
39        ],
40        ...queryFilters,
41      },
42    },
43  ]
44
45  return <ReceivablesTable tabs={tabs} />
46};