---
alias: "fc.quantity.list"
aliases:
  - fc.quantity.list
category: content
module: Core
---

# fc.quantity.list

Specialized list component that combines a standard data list with an integrated quantity selector column and optional barcode scanner/filter.

## When to Use
- Pick/pack workflows where items need quantity input per row
- Any list where each row requires a quantity adjustment control
- Store module wave picking, fulfilment packing, or inventory count UIs

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `attributes` | TranslatableAttribute[] | Yes | Column definitions (same as `fc.list` but with translatable labels) |
| `defaultPageSize` | number | Yes | Number of rows per page (inherited from StandardListProps) |
| `quantitySelectorProps` | Partial\<QuantitySelectorComponentProps\> | No | Configuration for the quantity selector rendered in each row |
| `quantitySelectorAttribute` | Partial\<TranslatableAttribute\> | No | Override the label, alignment, or other column props for the quantity selector column |
| `scannerProps` | ScannerContract | No | Props passed to the `fc.scanner.barcodeFilter` component rendered above the list |
| `rowsPerPageOptions` | number[] | No | Available page size options |
| `title` | string | No | Card title |
| `width` | CardWidth | No | Card width on 12-column grid |
| `highlight` | string | No | Top border highlight color |
| `filter` | ListFilterConfig | No | List filter configuration |

## Data Binding
Same as `fc.list` -- uses `dataSource` to bind to a GraphQL connection. The quantity selector column is automatically appended to the `attributes` array.

## Descendants
No -- self-contained list component. Column content is configured via `attributes`.

## Composition Patterns
- `fc.page` > `fc.quantity.list` for pick/pack item lists
- `fc.page.wizard` step > `fc.quantity.list` for wizard-driven quantity input
- Often used with `scannerProps` to enable barcode filtering above the list

## Gotchas
- The quantity selector column is automatically appended as the last column with `type: "component"` pointing to `fc.util.quantitySelector`. You do not need to include it in `attributes`.
- The quantity selector column defaults to label `"Quantity"` (i18n key `fc.mystique.list.column.quantity.label`) and `align: "center"`. Override via `quantitySelectorAttribute`.
- When `scannerProps` is provided, the `fc.scanner.barcodeFilter` component is rendered above the list. If not provided, no scanner appears.
- When the scanner is active, the "no records" message uses i18n key `fc.barcodeFilter.list.noRecords` instead of the default.
- All attribute labels are passed through `prefixedTranslate` for i18n resolution, and string values in attributes are recursively translated.
- Registered with category `content` in the component registry.

## Manifest Example
```json
{
  "component": "fc.quantity.list",
  "dataSource": "waveItems",
  "props": {
    "defaultPageSize": 50,
    "attributes": [
      {
        "label": "i18n:fc.mystique.product.name",
        "value": "{{node.product.name}}"
      },
      {
        "label": "i18n:fc.mystique.product.ref",
        "value": "{{node.product.ref}}"
      },
      {
        "label": "i18n:fc.mystique.product.barcode",
        "value": "{{node.product.gtin}}"
      }
    ],
    "quantitySelectorProps": {
      "max": "{{node.quantity}}",
      "min": 0
    },
    "scannerProps": {
      "placeholderText": ["fc.barcodeFilter.placeholder", "Scan barcode..."]
    }
  }
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
