---
alias: "fc.list"
aliases:
  - fc.list
  - shared.components.material.DynamicList
category: content
module: Core
---
# fc.list

Paginated data table with sorting, filtering, row links, bulk actions, and optional row expansion.

## When to Use
- Any entity list page (orders, fulfilments, locations, inventory)
- Entity detail tabs showing child items (order items, fulfilment items)
- Any tabular data display

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `attributes` | ListColumn[] | **Yes** | Column definitions: `[{ label, value, align, hideBelow }]` |
| `defaultPageSize` | number | Recommended | Rows per page (default: 10) |
| `title` | string | No | Card title above table |
| `rowLink` | string | No | **DEPRECATED** -- prefer `row: { link: "..." }`. Template for row click navigation: `"/orders/{{id}}"` |
| `filter` | ListFilterConfig | No | Enable inline filtering: `{ enabled: boolean, exclude?: string[], source?, entityType?, memoryFilter?, overrides? }` |
| `actions` | boolean | No | Enable bulk action row selection (header checkbox) |
| `density` | DensityToggle | No | Row density: `{ toggle?: boolean, initial?: "compressed" \| "standard" }` |
| `responsiveness` | string | No | `"table"`, `"card"`, `"forcecard"` -- mobile adaptation |
| `rowsPerPageOptions` | number[] | No | Pagination options: `[10, 25, 50, 100]` |
| `row` | ListRowConfig | No | Row configuration (see ListRowConfig below) |

### ListRowConfig

| Prop | Type | What it controls |
|------|------|------------------|
| `link` | string | Template for row click navigation: `"/orders/{{node.id}}"` (preferred over top-level `rowLink`) |
| `expansion` | Descendants or `{ descendants, toggle }` | Component(s) to render below each row when expanded. `toggle: true` shows expand/collapse icon |
| `actions` | CardActions | Action buttons at end of each row (see CardActions below) |

### CardActions (applies to `row.actions` and `cardActions`)

| Prop | Type | What it controls |
|------|------|------------------|
| `primary` | CardAction[] | Visible action buttons |
| `secondary` | CardAction[] | Actions grouped under "More" dropdown |
| `showAtLeast` | number | Primary actions to keep visible on mobile (default 0 — all collapse) |

CardAction types: `{ "type": "userAction", "name": "<rulesetName>", "label": "i18n:key", "condition": "{{template}}" }`. Workflow-defined user actions are auto-appended — only add when reordering or conditionally hiding.
| `vAlign` | string | No | Vertical alignment of row content: `"top"`, `"centre"`, `"center"`, `"middle"`, `"bottom"` |
| `hidePagination` | boolean | No | Hide the pagination controls entirely |
| `loading` | string | No | Template string evaluated to `"true"`/`"false"` to show loading skeleton |
| `noRecordKey` | string | No | i18n key for the empty-state message (default: `"fc.mystique.table.noRecords"`) |
| `rowId` | string | No | JSONPath to a unique row identifier field for DOM `id` attributes |
| `collapseExpansionPadding` | boolean | No | Remove padding around row expansion content |
| `collapseAppendPadding` | boolean | No | Remove padding for appended column content |
| `barcode` | ListBarcodeConfig | No | Barcode scanner integration: `{ enabled: boolean, match: string, action?: Action }` |
| `highlight` | string | No | Card border highlight color (theme color key or CSS color) |
| `width` | CardWidth | No | Card width (quarter/third/half/full or 1-12) |
| `cardActions` | PageActionsProps | No | Action buttons in the card header |

### Column Props (ListColumn)
| Prop | Type | What it controls |
|------|------|------------------|
| `label` | string | Column header text |
| `value` | string | Template string for cell content |
| `align` | string | Text alignment: `"left"`, `"centre"`, `"center"`, `"right"` |
| `hideBelow` | breakpoint | Hide column below breakpoint: `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"` |
| `hideAbove` | breakpoint | Hide column above breakpoint: `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"` |
| `enableCopyIcon` | string | Show copy-to-clipboard icon: `"displayAlways"` or `"displayOnHover"` |
| `append` | boolean | Append this column's content to the previous column in card view |
| `cardAction` | boolean | Render this column as a card action in responsive card mode |

## Data Binding
**Requires `dataSource`** — JSONPath to a connection or array. E.g., `"orders"`, `"orderById.items.edges"`. Column values use `{{node.fieldName}}` for row data access.

## Descendants
Optional — used for row expansion content.

## Composition Patterns
- `fc.page` > `fc.filterPanel` + `fc.list` for filtered list page
- `fc.tabs.card` > `fc.list` per tab for detail page
- `fc.list` with `rowLink` for master-detail navigation

## Gotchas
- **Must have `dataSource`** -- without it, table renders empty
- Column `value` uses `{{node.field}}` not `{{field}}` when in a connection
- Don't nest `fc.provider.graphql` inside `fc.list` -- pagination conflict
- `hideBelow: "md"` hides column on mobile
- **`rowLink` is deprecated** -- use `row: { link: "/orders/{{node.id}}" }` instead. `rowLink` still works but will be removed in a future version
- `loading` is a template string (e.g., `"{{isLoading}}"`) that must evaluate to the string `"true"` to activate, not a boolean

## Validation Rules
P01 (CRITICAL — attributes required), P02 (defaultPageSize), P03 (attribute labels), P04 (CRITICAL — dataSource required), T04 (rowLink template valid)

## Manifest Example
```json
{
  "component": "fc.list",
  "props": {
    "dataSource": "orders",
    "defaultPageSize": 25,
    "rowLink": "/orders/{{node.id}}",
    "attributes": [
      { "label": "Ref", "value": "{{node.ref}}" },
      { "label": "Status", "value": "{{node.status}}" },
      { "label": "Created", "value": "{{dateFormat node.createdOn 'MMM DD, YYYY'}}" }
    ]
  }
}
```

## 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.
