Skip to main content

Interface: ProductGridProps

Defined in: components/ProductGrid.tsx:35

Properties​

addToCartComponent?​

optional addToCartComponent?: ComponentType<AddToCartComponentProps>

Defined in: components/ProductGrid.tsx:285

addToCartLabels?​

optional addToCartLabels?: Record<string, string>

Defined in: components/ProductGrid.tsx:225

  • 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:210

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:310

Parameters​

item​

Product | Cluster

index​

number

Returns​

ReactNode

allowAddToCart?​

optional allowAddToCart?: boolean

Defined in: components/ProductGrid.tsx:143

  • 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:215

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

applyOrderlists?​

optional applyOrderlists?: boolean

Defined in: components/ProductGrid.tsx:88

Apply the orderlist filter. Defaults to true when orderlistIds is non-empty, false otherwise — so an authenticated user without a contract still sees the full catalogue.

availability?​

optional availability?: Availability

Defined in: components/ProductGrid.tsx:154

Active stock selection from the filters sidebar. Triggers a re-fetch when changed. 'all' or undefined means no stock filter.

badgesComponent?​

optional badgesComponent?: ComponentType<BadgesComponentProps>

Defined in: components/ProductGrid.tsx:287

beforeItem?​

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

Defined in: components/ProductGrid.tsx:309

Parameters​

item​

Product | Cluster

index​

number

Returns​

ReactNode

belowName?​

optional belowName?: (product) => ReactNode

Defined in: components/ProductGrid.tsx:304

Render arbitrary content directly below each card's product name (and above the short description / price). Receives the product; return null to render nothing. Cascades to every ProductCard via ProductGridConfig — lets hosts surface extra per-product info (e.g. package descriptions) without swapping the whole card.

Parameters​

product​

Product

Returns​

ReactNode

brand?​

optional brand?: string

Defined in: components/ProductGrid.tsx:78

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

cartId?​

optional cartId?: string

Defined in: components/ProductGrid.tsx:207

ID of an existing cart to add items into.

categoryId?​

optional categoryId?: number

Defined in: components/ProductGrid.tsx:66

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:274

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:260

Extra CSS class applied to the root element.

clusterCardComponent?​

optional clusterCardComponent?: ComponentType&lt;ClusterCardProps>

Defined in: components/ProductGrid.tsx:295

clusterCardLabels?​

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

Defined in: components/ProductGrid.tsx:247

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

columns?​

optional columns?: number

Defined in: components/ProductGrid.tsx:101

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:140

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:195

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

anonymousUserId?​

optional anonymousUserId?: number

The channel's anonymous user, seeded by the host. Scopes logged-out listings exactly like the SSR seed does.

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:208

  • 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:249

Show a heart-icon favourite toggle on each card.

favoriteComponent?​

optional favoriteComponent?: ComponentType&lt;FavoriteComponentProps>

Defined in: components/ProductGrid.tsx:288

graphqlClient?​

optional graphqlClient?: GraphQLClient

Defined in: components/ProductGrid.tsx:42

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:286

includeTax?​

optional includeTax?: boolean

Defined in: components/ProductGrid.tsx:141

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

isLoading?​

optional isLoading?: boolean

Defined in: components/ProductGrid.tsx:111

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:278

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:55

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

minStock?​

optional minStock?: number

Defined in: components/ProductGrid.tsx:157

Minimum stock quantity for the 'in-stock' selection. Defaults to the minimum threshold.

onCartCreated?​

optional onCartCreated?: (cart) => void

Defined in: components/ProductGrid.tsx:209

Called after AddToCart creates a new cart internally.

Parameters​

cart​

Cart

Returns​

void

onCategoryChange?​

optional onCategoryChange?: (category) => void

Defined in: components/ProductGrid.tsx:178

  • 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:254

  • 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:144

  • 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:166

  • 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:181

  • 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

onLoginClick?​

optional onLoginClick?: () => void

Defined in: components/ProductGrid.tsx:221

Called when an anonymous visitor clicks the log-in action that replaces add-to-cart in a semi-closed portal. The host owns navigation.

Returns​

void

onPageChange?​

optional onPageChange?: (page) => void

Defined in: components/ProductGrid.tsx:172

  • 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:169

  • 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:162

  • 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:216

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

Returns​

void

onProductClick?​

optional onProductClick?: (product) => void

Defined in: components/ProductGrid.tsx:257

  • 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:175

  • 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:222

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:158

  • 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:250

  • 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

orderlistIds?​

optional orderlistIds?: number[]

Defined in: components/ProductGrid.tsx:81

Scope the product fetch to specific orderlist IDs (e.g. a chosen B2B contract).

page?​

optional page?: number

Defined in: components/ProductGrid.tsx:184

  • 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:185

  • 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:135

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:283

priceFilterMax?​

optional priceFilterMax?: number

Defined in: components/ProductGrid.tsx:149

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

priceFilterMin?​

optional priceFilterMin?: number

Defined in: components/ProductGrid.tsx:148

  • 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:239

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:294

productCardLabels?​

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

Defined in: components/ProductGrid.tsx:243

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

products?​

optional products?: (Product | Cluster)[]

Defined in: components/ProductGrid.tsx:50

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.

productTrackAttributes?​

optional productTrackAttributes?: string[]

Defined in: components/ProductGrid.tsx:96

Attribute names to request per product, e.g. ['MPN'] — makes product.attributes usable in card slots like belowName. Unset returns the first page of ALL attributes (12 per product), so products with more than 12 silently lose the rest.

renderClusterCard?​

optional renderClusterCard?: (cluster) => any

Defined in: components/ProductGrid.tsx:125

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:119

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:230

  • 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:214

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

showPrice?​

optional showPrice?: boolean

Defined in: components/ProductGrid.tsx:231

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

showStock?​

optional showStock?: boolean

Defined in: components/ProductGrid.tsx:229

  • 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:186

  • 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:187

  • 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:284

stockLabels?​

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

Defined in: components/ProductGrid.tsx:232

  • 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:142

  • 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:58

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

term?​

optional term?: string

Defined in: components/ProductGrid.tsx:72

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:147

  • 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:138

Authenticated user passed through to ProductCard / AddToCart.