Skip to main content

Interface: ProductGridProps

Defined in: components/ProductGrid.tsx:33

Properties​

addToCartComponent?​

optional addToCartComponent?: ComponentType<AddToCartComponentProps>

Defined in: components/ProductGrid.tsx:249

addToCartLabels?​

optional addToCartLabels?: Record<string, string>

Defined in: components/ProductGrid.tsx:189

  • Label overrides forwarded directly to the embedded AddToCart component. * Keys: add, adding, addedToCart, outOfStock, noCartId, errorAdding, * modalTitle, quantity, continueShopping, proceedToCheckout

afterAddToCart?​

optional afterAddToCart?: (cart, item?) => void

Defined in: components/ProductGrid.tsx:179

Called after every successful add-to-cart operation.

Parameters​

cart​

Cart

item?​

CartMainItem

Returns​

void

afterItem?​

optional afterItem?: (item, index) => ReactNode

Defined in: components/ProductGrid.tsx:265

Parameters​

item​

Product | Cluster

index​

number

Returns​

ReactNode

allowAddToCart?​

optional allowAddToCart?: boolean

Defined in: components/ProductGrid.tsx:123

  • When false, hides the AddToCart control in product cards. * ClusterCards always show their "View cluster" navigation button. * Defaults to true.

allowIncrDecr?​

optional allowIncrDecr?: boolean

Defined in: components/ProductGrid.tsx:184

  • Render − / + stepper buttons in AddToCart. * Defaults to true.

badgesComponent?​

optional badgesComponent?: ComponentType<BadgesComponentProps>

Defined in: components/ProductGrid.tsx:251

beforeItem?​

optional beforeItem?: (item, index) => ReactNode

Defined in: components/ProductGrid.tsx:264

Parameters​

item​

Product | Cluster

index​

number

Returns​

ReactNode

brand?​

optional brand?: string

Defined in: components/ProductGrid.tsx:76

Manufacturer/brand name — passes manufacturers: [brand] into categoryProductSearchInput and uses config.baseCategoryId.

cartId?​

optional cartId?: string

Defined in: components/ProductGrid.tsx:176

ID of an existing cart to add items into.

categoryId?​

optional categoryId?: number

Defined in: components/ProductGrid.tsx:64

Category ID to list products for (category-page mode). When omitted alongside term and brand, config.baseCategoryId is used.

children?​

optional children?: ReactNode

Defined in: components/ProductGrid.tsx:238

Compound API: when provided, the grid renders these children inside a <ProductGridContext> instead of its built-in grid+pagination layout. Subcomponents (<ProductGrid.Items>, <ProductGrid.Pagination>) read the search state via the context; consumers control the layout.

Example​

<ProductGrid categoryId={17}>
  <ProductGrid.Items renderItem={(item) => <ProductCard product={item as Product} />} />
  <ProductGrid.Pagination />
</ProductGrid>

className?​

optional className?: string

Defined in: components/ProductGrid.tsx:224

Extra CSS class applied to the root element.

clusterCardComponent?​

optional clusterCardComponent?: ComponentType&lt;ClusterCardProps>

Defined in: components/ProductGrid.tsx:259

clusterCardLabels?​

optional clusterCardLabels?: Record&lt;string, string>

Defined in: components/ProductGrid.tsx:211

Translated labels forwarded to embedded <ClusterCard> instances. See ClusterCardProps.labels for slugs.

columns?​

optional columns?: number

Defined in: components/ProductGrid.tsx:81

Number of columns in the grid. Accepts 2, 3, 4, 5, or 6. Defaults to 3.

companyId?​

optional companyId?: number

Defined in: components/ProductGrid.tsx:120

Active company ID from the company switcher. Overrides user's default company for price calculation. Triggers a re-fetch when changed.

configuration?​

optional configuration?: object

Defined in: components/ProductGrid.tsx:167

Configuration object providing: imageSearchFiltersGrid, imageVariantFiltersMedium — passed to CategoryService baseCategoryId — used when querying by term or brand urls.getProductUrl / urls.getClusterUrl — for card URL generation

baseCategoryId?​

optional baseCategoryId?: number

imageSearchFiltersGrid?​

optional imageSearchFiltersGrid?: MediaImageProductSearchInput

imageVariantFiltersMedium?​

optional imageVariantFiltersMedium?: TransformationsInput

urls?​

optional urls?: object

urls.getClusterUrl?​

optional getClusterUrl?: (c) => string

Parameters​
c​

Cluster

Returns​

string

urls.getProductUrl?​

optional getProductUrl?: (p) => string

Parameters​
p​

Product

Returns​

string

createCart?​

optional createCart?: boolean

Defined in: components/ProductGrid.tsx:177

  • Auto-create a cart when none is available. * Always pair with onCartCreated to persist the new cart ID.

enableAddFavorite?​

optional enableAddFavorite?: boolean

Defined in: components/ProductGrid.tsx:213

Show a heart-icon favourite toggle on each card.

favoriteComponent?​

optional favoriteComponent?: ComponentType&lt;FavoriteComponentProps>

Defined in: components/ProductGrid.tsx:252

graphqlClient?​

optional graphqlClient?: GraphQLClient

Defined in: components/ProductGrid.tsx:40

Initialised Propeller SDK GraphQL client. Required when products is not provided — used for internal data fetching.

imageComponent?​

optional imageComponent?: ComponentType&lt;ImageComponentProps>

Defined in: components/ProductGrid.tsx:250

includeTax?​

optional includeTax?: boolean

Defined in: components/ProductGrid.tsx:121

  • When true, tax-inclusive (gross) price is the leading price. * Defaults to false.

isLoading?​

optional isLoading?: boolean

Defined in: components/ProductGrid.tsx:91

Show a skeleton loader. Useful when the parent controls loading state and passes products down. The grid automatically shows a skeleton during internal fetches regardless of this prop. Defaults to false.

labels?​

optional labels?: Record&lt;string, string>

Defined in: components/ProductGrid.tsx:242

Translated labels keyed by the slugs used inside the component (see getLabel calls). Missing keys fall back to the English defaults.

language?​

optional language?: string

Defined in: components/ProductGrid.tsx:53

Language code for product data. Defaults to 'NL'.

onCartCreated?​

optional onCartCreated?: (cart) => void

Defined in: components/ProductGrid.tsx:178

Called after AddToCart creates a new cart internally.

Parameters​

cart​

Cart

Returns​

void

onCategoryChange?​

optional onCategoryChange?: (category) => void

Defined in: components/ProductGrid.tsx:150

  • Called after each successful internal data fetch with the full * Category object — use to populate sibling components like GridTitle, * CategoryDescription, and CategoryShortDescription.

Parameters​

category​

Category

Returns​

void

onClusterClick?​

optional onClusterClick?: (cluster) => void

Defined in: components/ProductGrid.tsx:218

  • Called when a cluster card name, image, or "View cluster" button is * clicked — use for SPA-style routing instead of full-page navigation.

Parameters​

cluster​

Cluster

Returns​

void

onFiltersChange?​

optional onFiltersChange?: (filters) => void

Defined in: components/ProductGrid.tsx:124

  • Called after each internal data fetch with the filterable attributes * returned by the API (for driving a sibling FiltersSidebar).

Parameters​

filters​

AttributeFilter[]

Returns​

void

onItemsFoundChange?​

optional onItemsFoundChange?: (count) => void

Defined in: components/ProductGrid.tsx:138

  • Called after each fetch with the total number of products found — * use to display a result count in the parent toolbar.

Parameters​

count​

number

Returns​

void

onLoadingChange?​

optional onLoadingChange?: (isLoading) => void

Defined in: components/ProductGrid.tsx:153

  • Called whenever the internal loading state changes. * Use to disable sibling components (e.g. GridFilters) while a fetch is in flight.

Parameters​

isLoading​

boolean

Returns​

void

onPageChange?​

optional onPageChange?: (page) => void

Defined in: components/ProductGrid.tsx:144

  • Called when the user clicks Previous / Next in the built-in pagination — * use to keep the parent URL / page state in sync.

Parameters​

page​

number

Returns​

void

onPageItemCountChange?​

optional onPageItemCountChange?: (count) => void

Defined in: components/ProductGrid.tsx:141

  • Called after each fetch with the number of items visible on the current page * (after client-side language filtering).

Parameters​

count​

number

Returns​

void

onPriceBoundsChange?​

optional onPriceBoundsChange?: (min, max) => void

Defined in: components/ProductGrid.tsx:134

  • Called after each internal data fetch with the min/max price of the * current product set — use to populate a price range slider in the parent.

Parameters​

min​

number

max​

number

Returns​

void

onProceedToCheckout?​

optional onProceedToCheckout?: () => void

Defined in: components/ProductGrid.tsx:185

Called when "Proceed to checkout" is clicked in the AddToCart modal.

Returns​

void

onProductClick?​

optional onProductClick?: (product) => void

Defined in: components/ProductGrid.tsx:221

  • Called when a product card name or image is clicked — use for SPA * routing instead of full-page navigation.

Parameters​

product​

Product

Returns​

void

onProductsResponse?​

optional onProductsResponse?: (products) => void

Defined in: components/ProductGrid.tsx:147

  • Called after each successful internal data fetch with the full * ProductsResponse object — use to drive an external GridPagination * component by passing the result as its products prop.

Parameters​

products​

ProductsResponse

Returns​

void

onRequestQuoteClick?​

optional onRequestQuoteClick?: (cart) => void

Defined in: components/ProductGrid.tsx:186

Called when "Request a Quote" is clicked in the AddToCart modal.

Parameters​

cart​

Cart

Returns​

void

onSortChange?​

optional onSortChange?: (field, order) => void

Defined in: components/ProductGrid.tsx:130

  • Called when sort state changes internally (for syncing a sibling toolbar).

Parameters​

field​

string

order​

string

Returns​

void

onToggleFavorite?​

optional onToggleFavorite?: (item, isFavorite) => void

Defined in: components/ProductGrid.tsx:214

  • Called when a favourite is toggled on any card. * Receives the full Product or Cluster object and the new favourite state.

Parameters​

item​

Product | Cluster

isFavorite​

boolean

Returns​

void

page?​

optional page?: number

Defined in: components/ProductGrid.tsx:156

  • Externally controlled current page. * When provided, the grid uses this value instead of its internal page * counter. Wire this to the onPageChange callback from a sibling * GridPagination so the two components stay in sync. * When changed the grid automatically re-fetches.

pageSize?​

optional pageSize?: number

Defined in: components/ProductGrid.tsx:157

  • Number of products per page. Defaults to 12. * When changed the grid automatically re-fetches (page resets to 1).

portalMode?​

optional portalMode?: string

Defined in: components/ProductGrid.tsx:115

Controls portal visibility mode. 'open' — full e-commerce; AddToCart is visible in product cards. 'semi-closed' — catalog-only; AddToCart is hidden. Defaults to 'open'.

priceComponent?​

optional priceComponent?: ComponentType&lt;PriceComponentProps>

Defined in: components/ProductGrid.tsx:247

priceFilterMax?​

optional priceFilterMax?: number

Defined in: components/ProductGrid.tsx:129

  • Active price range upper bound from the FiltersSidebar onPriceChange. * Triggers a re-fetch when changed.

priceFilterMin?​

optional priceFilterMin?: number

Defined in: components/ProductGrid.tsx:128

  • Active price range lower bound from the FiltersSidebar onPriceChange. * Triggers a re-fetch when changed.

priceLabels?​

optional priceLabels?: Record&lt;string, string>

Defined in: components/ProductGrid.tsx:203

Translated labels forwarded to the embedded <ProductPrice> display inside each <ProductCard>. See ProductPriceProps.labels for slugs.

productCardComponent?​

optional productCardComponent?: ComponentType&lt;ProductCardProps>

Defined in: components/ProductGrid.tsx:258

productCardLabels?​

optional productCardLabels?: Record&lt;string, string>

Defined in: components/ProductGrid.tsx:207

Translated labels forwarded to embedded <ProductCard> instances. See ProductCardProps.labels for slugs.

products?​

optional products?: (Product | Cluster)[]

Defined in: components/ProductGrid.tsx:48

Pre-fetched products/clusters to display. When provided the component skips internal API calls entirely. Pass an empty array (not undefined) to show the empty state while the parent controls loading.

renderClusterCard?​

optional renderClusterCard?: (cluster) => any

Defined in: components/ProductGrid.tsx:105

Provide a custom cluster card renderer. Falls back to the built-in <ClusterCard> when not set.

Parameters​

cluster​

Cluster

Returns​

any

renderProductCard?​

optional renderProductCard?: (product) => any

Defined in: components/ProductGrid.tsx:99

Provide a custom product card renderer. Falls back to the built-in <ProductCard> when not set.

Parameters​

product​

Product

Returns​

any

showAvailability?​

optional showAvailability?: boolean

Defined in: components/ProductGrid.tsx:194

  • Show only the availability indicator inside the stock widget. * Forwarded to ProductCard.showAvailability. * Defaults to true.

showModal?​

optional showModal?: boolean

Defined in: components/ProductGrid.tsx:183

  • When true, AddToCart shows a success modal instead of a toast. * Defaults to false.

showPrice?​

optional showPrice?: boolean

Defined in: components/ProductGrid.tsx:195

  • Show the price below the product name. * Defaults to true.

showStock?​

optional showStock?: boolean

Defined in: components/ProductGrid.tsx:193

  • Show the stock / availability widget on each product card. * Forwarded directly to ProductCard.showStock. * Defaults to false.

sortField?​

optional sortField?: string

Defined in: components/ProductGrid.tsx:158

  • Sort field to use (e.g. 'NAME', 'PRICE'). * When provided overrides internal sort state. * When changed the grid automatically re-fetches (page resets to 1).

sortOrder?​

optional sortOrder?: string

Defined in: components/ProductGrid.tsx:159

  • Sort direction: 'ASC' or 'DESC'. * Only used when sortField is also provided. * When changed the grid automatically re-fetches (page resets to 1).

stockComponent?​

optional stockComponent?: ComponentType&lt;StockComponentProps>

Defined in: components/ProductGrid.tsx:248

stockLabels?​

optional stockLabels?: Record&lt;string, string>

Defined in: components/ProductGrid.tsx:196

  • Label overrides forwarded to the embedded ItemStock component inside each card. * Keys: inStock, outOfStock, lowStock, available, notAvailable, pieces

stockValidation?​

optional stockValidation?: boolean

Defined in: components/ProductGrid.tsx:122

  • Enables stock validation inside AddToCart. * Blocks add when requested quantity exceeds available stock. * Defaults to false.

taxZone?​

optional taxZone?: string

Defined in: components/ProductGrid.tsx:56

Tax zone used for price calculation. Defaults to 'NL'.

term?​

optional term?: string

Defined in: components/ProductGrid.tsx:70

Search term — passes term into categoryProductSearchInput and uses config.baseCategoryId so the whole catalog is searched.

textFilters?​

optional textFilters?: ProductTextFilterInput[]

Defined in: components/ProductGrid.tsx:127

  • Active text filters to apply — built by the parent from FiltersSidebar * onFilterChange callbacks. Each entry maps to a textFilters input * row in the CategoryService query. * When this prop changes the grid automatically re-fetches (page resets to 1).

user?​

optional user?: Contact | Customer | null

Defined in: components/ProductGrid.tsx:118

Authenticated user passed through to ProductCard / AddToCart.