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

# fc.list.customAction

List component with custom action support, enabling row selection and custom action callbacks instead of workflow-driven user actions.

## When to Use
- Display a data list where a custom action button operates on selected rows
- Build bulk-action UIs where users select rows and trigger a callback function
- Replace `fc.list` when you need programmatic action handling instead of workflow user actions

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `defaultPageSize` | number | Yes | Number of rows per page |
| `attributes` | ListColumn[] | Yes | Column definitions (same as `fc.list`) |
| `density` | DensityToggle | No | `{ toggle?: boolean, initial?: "compressed" \| "standard" }` -- row density controls |
| `rowsPerPageOptions` | number[] | No | Available page size options (e.g. `[10, 25, 50]`) |
| `actions` | boolean | No | Enable/disable the custom action feature |
| `action` | CustomActionProp | No | `{ fn: (selectedRows) => void, label: string }` -- the custom action callback and button label |
| `filter` | ListFilterConfig | No | Filter configuration including `memoryFilter` for client-side filtering |
| `title` | string | No | Card title |
| `width` | CardWidth | No | Card width on 12-column grid |
| `highlight` | string | No | Top border highlight color |

### CustomActionProp Structure
| Field | Type | Description |
|-------|------|-------------|
| `fn` | `(selectedRows: RowSelection[]) => void` | Callback invoked with selected rows when the action button is clicked |
| `label` | string | Button label for the custom action |

## Data Binding
Same as `fc.list` -- uses `dataSource` to bind to a GraphQL connection. Data is passed via the `data` prop from the parent data context.

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

## Composition Patterns
- `fc.page` > `fc.list.customAction` for bulk-operation list pages
- `fc.card.multi` > `fc.list.customAction` for embedded action lists

## Gotchas
- The `action` prop is only shown when `actions` is truthy. If `actions` is falsy, the action button is hidden.
- Unlike `fc.list`, this component uses `CustomActionProp` (a callback function) rather than workflow `UserAction` lookups.
- Row selection state can be externally controlled via `selectedRows` and `setSelectedRows` props for parent-managed selection.
- Shares the same underlying `ListView` rendering as `fc.list` -- visual output is identical.

## Manifest Example
```json
{
  "component": "fc.list.customAction",
  "dataSource": "fulfilments",
  "props": {
    "defaultPageSize": 10,
    "actions": true,
    "action": {
      "label": "Process Selected",
      "fn": "handleProcessSelected"
    },
    "attributes": [
      { "label": "Ref", "value": "{{node.ref}}" },
      { "label": "Status", "value": "{{node.status}}" },
      { "label": "Type", "value": "{{node.type}}" }
    ]
  }
}
```

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