---
alias: "fc.attribute.column"
aliases:
  - fc.attribute.column
category: content
module: Core
---

# fc.attribute.column

Vertical content column that displays data values stacked in a list with optional colored status dots, expand/collapse for long lists, and sorting.

## When to Use
- Display multiple field values stacked vertically in a list column cell
- Show a status indicator with a colored dot based on a setting
- Render nested array data (e.g. `items[].ref`) as a vertical list within a table cell
- Combine multiple named fields into a single column (e.g. name + ref + type)

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `value` | string \| Record<string, any>[] | Yes | Template string for array data mode (`"{{ref}}"`) or array of field descriptors for multi-field mode (see below) |
| `minListSize` | number | No | Number of rows to show before "More" toggle. Default: `5`. Set to `0` or negative to disable truncation. |
| `contentColumnSetting` | string | No | Setting key for colored dot configuration. When set, renders a colored status dot before the text based on matching value. |
| `type` | DynamicAttributeType | No | Dynamic attribute type for value resolution |
| `sortOrder` | `"asc"` / `"desc"` | No | Sort order for array data items |

### Multi-field value format (when `value` is an array)
| Field | Type | Description |
|-------|------|-------------|
| `name` | string | Field path: `"fieldName"` for top-level or `"array.fieldName"` for nested array access |
| `label` | string | Optional label prefix rendered before the values (e.g. `"Items:"`) |
| `style` | CSSProperties | Optional inline styles for this row (e.g. `{ color: "grey" }`) |

## Data Binding
- **Array data mode** (`data` is array, `value` is template string): Iterates over the data array and renders each item using the template string.
- **Multi-field mode** (`data` is object, `value` is descriptor array): Reads named fields from the data object. Single-segment names (e.g. `"name"`) read directly; two-segment names (e.g. `"items.ref"`) iterate over the nested array.

## Descendants
No -- self-contained display component.

## Composition Patterns
- `fc.list` column `type: "component"` > `fc.attribute.column` for stacked multi-line cells
- Commonly used to combine product name + SKU ref in one list column
- Use `contentColumnSetting` with a setting defining `{ name, color, label }` entries for status dots

## Gotchas
- The `minListSize` default is 5 -- lists longer than 5 items show a "More" / "Less" toggle. Set to `0` to disable.
- The colored dot feature (`contentColumnSetting`) only activates when `value` is a string and the setting is provided. The setting must return a record of `{ name, color?, label? }` objects.
- For multi-field `value` arrays, only 1-segment and 2-segment paths are supported. 3+ segment paths render nothing.
- Sort order applies to array data mode -- it re-orders the data array by the template value.
- The "More" / "Less" text is translated via `fc.attribute.column.more` and `fc.attribute.column.less` i18n keys.
- Registered with category `content` in the component registry.

## Manifest Example
### Multi-field mode (stacked name + ref)
```json
{
  "label": "Product",
  "type": "component",
  "options": {
    "component": "fc.attribute.column",
    "props": {
      "value": [
        { "name": "name" },
        { "name": "ref", "style": { "color": "grey" } }
      ]
    },
    "dataSource": "node"
  }
}
```

### Array data mode (list of refs)
```json
{
  "label": "Items",
  "type": "component",
  "options": {
    "component": "fc.attribute.column",
    "props": {
      "value": "{{ref}}",
      "minListSize": 3,
      "sortOrder": "asc"
    },
    "dataSource": "node.items.edges.node"
  }
}
```

### Status dot mode
```json
{
  "label": "Status",
  "type": "component",
  "options": {
    "component": "fc.attribute.column",
    "props": {
      "value": "{{status}}",
      "contentColumnSetting": "fc.mystique.status.colours"
    },
    "dataSource": "node"
  }
}
```

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