Recipe — Data table with picklist cart

Row selection in DataTable feeding a PicklistCart for bulk pick/pack workflows.

When to use

Users select products from a table and build a named picklist cart for submission.

Pattern

import { DataTable, PicklistCart } from '@nike/whisker-component-library';
import type { PicklistCartItem } from '@nike/whisker-component-library';

function PicklistPage({ products }) {
  const columns = [
    { accessor: 'product', label: 'Product', columnType: 'PRODUCT' },
    { accessor: 'soh', label: 'SOH', columnType: 'RFID' },
  ];

  return (
    <>
      <PicklistCart onSubmit={(cart) => submitToBff(cart)} data-testid="picklist-cart" />
      <DataTable
        columns={columns}
        data={products}
        ariaLabel="Picklist products"
        picklistCart={{
          getItem: (row): PicklistCartItem => ({
            styleColor: row.styleColor,
            imageUrl: row.imageUrl,
            description: row.description,
            gtins: row.gtins,
          }),
        }}
      />
    </>
  );
}

Store hooks

import { usePicklistCartCount, usePicklistCartActions } from '@nike/whisker-component-library';

const count = usePicklistCartCount();
const { clearCart } = usePicklistCartActions();

Pitfalls

picklistCart.getItem is required — maps raw row data to PicklistCartItem shape.
One global cart per module — namespace via cart name if multiple lists needed.