ReceivablesTable

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

Usage

Use the ReceivablesTable component in your application as follows:

React.js

1 import { ReceivablesTable } from "@monite/sdk-react";
2 
3 ...
4 
5 // This component must be rendered within the MoniteProvider wrapper
6 const 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:

1 tabs: [
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 ]