InvoicesTable component

Overview

InvoicesTable is a React component that displays all accounts receivable invoices created by an entity. The component shows each invoice’s amount, status, issuance date, due date, and the counterpart to which they were sent.

Permissions

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

Preview

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

Usage

Use the InvoicesTable component in your application as follows:

React.js

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

Props

filters

array of string

A list of search filters to display above the data table. Each filter is defined by the name of the underlying data field. UI labels of the filter inputs are populated automatically.

The default filters are: invoice number (partial match), invoice status, counterpart, and due date (before or on the selected date).

Example:

1 <InvoicesTable filters={[
2   "document_id__contains",
3   "status",
4   "counterpart_id",
5   "due_date__lte"
6 ]} />

onRowClick

function

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

query

object

The data query used to populate the table. The object’s fields correspond to the query parameters of the GET /receivables endpoint. The type field is required, others are optional.

Example: display only draft invoices, newest first:

1 <InvoicesTable query={{
2   type: "invoice",
3   status: "draft",
4   sort: "created_at",
5   order: "desc"
6 }} />