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

# ProductsTable component

## Overview

The `ProductsTable` component renders a table that displays the list of existing products of the authenticated entity. The component supports searching, filtering, and pagination between these products.

## Permissions

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

## Preview

![ProductsTable component preview](/_fern-img/163fee122a91de6db78f42fd27be0ef5f1aaf045134c1c83f0378fe70ee9be56.webp)

## Usage

Use in the `ProductsTable` component in your application as shown:

**`React.js`**

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

...

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

## Props

The following table shows all `ProductsTable` component properties, their types, and descriptions:

| Prop              | Type       | Description                                                                                                                    |
| :---------------- | :--------- | :----------------------------------------------------------------------------------------------------------------------------- |
| `onEdit`          | `function` | This callback can be triggered when a product is edited.                                                                       |
| `onDeleted`       | `function` | This callback can be triggered when a product is deleted.                                                                      |
| `onFilterChanged` | `function` | This callback is triggered when the filtering options are changed. You can filter products by `type` or `measure_unit_id`.     |
| `onSortChanged`   | `function` | This callback is called when the current sorting order for any column is changed. It returns the newly sorted field and order. |
| `onRowClick`      | `function` | This callback takes the identifier of the clicked row as a parameter and is triggered when a product table row is clicked.     |

The `onChangeSort` takes one argument whose value is an object with the following fields:

* **`sort`** - the field name of column whose sort order was changed. For example, `name`.
* **`order`** - the new sort order, either `asc` or `desc`.

```javascript
(
  "sort": "name",
  "order": "asc" | "desc" | null
) => void
```