ProductsTable

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.

Preview

Usage

Use in the ProductsTable component in your application as shown:

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.

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