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

# QuotesTable component

## Overview

`QuotesTable` is a React component that displays all [quotes](../../../accounts-receivable/quotes/index) created by an entity. The component shows each quote's amount, status, issue date, validity 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](/api/concepts/authentication#permissions).

## Preview

![QuotesTable component preview](/_fern-img/433a736e686c90debb9a19fb9f6de9a2c238f8b9dc016caf51500d13fc5ad4a5.webp)

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

## Usage

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

**`React.js`**

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

...

// TODO: This component must be rendered within the MoniteProvider wrapper
const QuotesTablePage = () => {
  return <QuotesTable />
};
```

## 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: quote number (partial match), quote status, and counterpart.

Example:

```jsx
<QuotesTable filters={[
  "document_id__contains",
  "status",
  "counterpart_id"
]} />
```

---

**`onChangeSort`** `function`

This callback is called when the current sorting order for any column is changed.

---

**`onRowClick`** `function`

This callback takes the identifier of the clicked row as a parameter and is triggered when a quotes 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`](/api/receivables/get-receivables) endpoint.
The `type` field is required, others are optional.

Example: display only draft quotes, newest first:

```jsx
<QuotesTable query={{
  type: "quote",
  status: "draft",
  sort: "created_at",
  order: "desc"
}} />
```

---