Recipe — Product drill-down from data table

Open ProductSlideOut when a user clicks a product cell in DataTable.

When to use

Inventory or product list pages where users drill into style-color detail without navigating away.

Pattern

SlideOutProvider is app-level — mount it once near the root, not around individual tables. Pass productSlideOut config on the DataTable prop, not on individual column definitions.

import { DataTable, InventoryProvider } from '@nike/whisker-component-library';

function ProductList({ products, storeId, accessToken, loggedIn, bffUrl, isProd }) {
  const columns = [
    { accessor: 'product', label: 'Product', columnType: 'PRODUCT' },
    { accessor: 'price', label: 'Price', columnType: 'PRICE' },
  ];

  return (
    <InventoryProvider
      storeId={storeId}
      accessToken={accessToken}
      loggedIn={loggedIn}
      isProd={isProd}
      bffUrl={bffUrl}
    >
      <DataTable
        columns={columns}
        data={products}
        ariaLabel="Products"
        productSlideOut={{ accessToken, storeId, isProd }}
      />
    </InventoryProvider>
  );
}

Manual slide-out (without column config)

import { useSlideOut, ProductSlideOut } from '@nike/whisker-component-library';

const { openSlideOut } = useSlideOut();

openSlideOut({
  label: 'Product inquiry',
  content: (
    <ProductSlideOut
      styleColor="DX1234-100"
      storeId={storeId}
      accessToken={accessToken}
      isProd={isProd}
    />
  ),
});

Required providers

SlideOutProvider — app-level singleton; adding multiple instances breaks single-panel enforcement
InventoryProvider — required for live inventory in slide-out

Pitfalls

Product column uses Podium Text and ClickToCopy internally.
Without InventoryProvider, slide-out shows loading/error states indefinitely.