List Component (fc.list)
UI Component
Changed on:
12 Dec 2025
Overview
Standard table card that takes array-like content and renders it as a table. While the Material UI table is available directly, the Mystique Table component adds several enhancements, including:- mapping, transforming, and translating values from the GraphQL API
- pagination automatically hooked up to the page-level query
- per-row and bulk user action support driven by the workflow
| Plugin Name | Core |
|---|
Alias
fc.list, shared.components.material.DynamicList (for backward compatibility with v1 manifests)
Detailed technical description
Page Size
The list's page size can be controlled by updating the page query to either set the`first` or `last` parameter if required. As part of the filter feature, the GraphQL variables are automatically generated by the OMX framework for any connection-type node, so you don't need to define them yourself. But be aware that they will be prefixed with the name (or alias if provided) of the statement that contains the connection object.In the following example that would be `orders`, so any variables passed in to control the orders connection would begin with `orders_`.Note: Using `first` or `last` will not affect the order of items. The order of items will stay the same, the only difference is whether you start the first page or the last page of items.1{
2 "type": "page",
3 "path": "orders",
4 "component": "fc.page",
5 "data": {
6 "query": "query ($retailerId: [Int!], $orders_first: Int) {\n orders(retailerId: $retailerId, first: $orders_first) {\n edges {\n node {\n id\n ref\n retailer {\n id\n ref\n tradingName\n }\n type\n status\n retailer {\n id\n }\n workflowRef\n workflowVersion\n totalPrice\n totalTaxPrice\n createdOn\n attributes {name value type} customer {\n id\n firstName\n lastName\n }\n }\n }\n }\n}",
7 "variables": {
8 "orders_first": 100,
9 "retailerId": "{{activeRetailer.id}}"
10 }
11 },
12 "descendants": [{
13 "component": "fc.list",
14 "dataSource": "orders",
15 "defaultPageSize": 100,
16 "props": {/* config options here */}
17 }]
18}
19 ListColumn
`ListColumn` extends `DynamicValue` and inherits all fields. In addition:| Name | Type | Required | Default | Description |
| align | `left` / `center` / `center` / `right` | No | `left` | Align column contents |
| hideBelow | `xs` / `sm` / `md` / `lg` / `xl` | No | none | Hide column at media breakpoints smaller than this |
| hideAbove | `xs` / `sm` / `md` / `lg` / `xl` | No | none | Hide column at media breakpoints larger than this |
| enableCopyIcon | `displayAlways` / `displayOnHover` | No | none | Controls the visibility of the copy icon next to the column or field value. Use `'displayOnHover'` to show the icon only when hovering, or `'displayAlways'` to keep it visible at all times. Note: The copy icon is only functional for plain text values. It will not copy content rendered by non-text components such as colored indicators or expandable text (e.g., "more/less"). On mobile and tablet devices, the icon is always visible regardless of the configuration to ensure accessibility. |
ListFilterConfig
| Name | Type | Required | Default | Description |
| enabled | `true` | Yes | `false` | Flag to enable filters on this list |
| exclude | `string[]` | No | none | List of filter options to hide. |
| overrides | `ExtendedFormField` | No | none | Allows field-level customization, including changing labels, default values, or field components. Overrides are optional; default values are used where no override is provided. |
ListAction
| Name | Type | Required | Default | Description |
| type | `UserAction` | Yes | none | Currently, it is the only supported value, but it is likely to be expanded in the future. |
| name | `string` | Yes | none | Name of the user action to enable on this list (as defined by the workflow User Action). |
Density Config
| Name | Type | Required | Default | Description |
| toggle | `boolean` | No | `false` | Flag to enable toggle buttons on this list. |
| initial | `compressed / standard` | No | `standard` | Show list in compressed or standard mode. |
RowConfig
| Name | Type | Required | Default | Description |
| expansion | `MystiqueComponentInstance` | No | none | Configure a component to display after each row in a list. This component will receive the row data as its `data` attribute.When the expansion row should be optional, the component should simply return `null` for rows that don't meet the criteria to display an expansion object. |
| actions | `CardActions` | No | none | Defines the configuration for action buttons displayed at the end of a list row. |
MystiqueComponentInstance
| Name | Type | Required | Default | Description |
| component | `string` | Yes | none | Component alias. |
| roles | `string[]` | No | none | Roles assigned to the user. |
| descendants | `MystiqueComponentInstance[]` | No | none | List of components that can be nested inside. |
| props | `Record <string, any>` | No | none | Key-value set unique to the nested component. |
| toggle | `boolean` | No | none | Flag to enable expansion toggle on this list |
RowComponentDetailed
| Name | Type | Required | Default | Description |
| mobile | `MystiqueComponentInstance` | No | none | Component that overrides the list mobile view only. |
| desktop | `MystiqueComponentInstance` | No | none | Component that overrides the list desktop view only. |
CardActions
`CardAction` follows the same structure and behavior as `PageAction`. These actions define interactive buttons that allow users to perform relevant operations.A `CardAction` can be one of the following types:- User Action – Triggers a user-defined operation
- Mutate Action – Executes a backend mutation (e.g., create, update)
- Navigate Action – Redirects the user to a different page
- Custom Action – Embeds a custom component (e.g., a button or menu)
- If the
`type`is set to`navigate`, the`link`field becomes mandatory and specifies the destination path. - If the
`type`is`mutation`, a`name`field must be provided to identify the mutation to execute.
| Name | Type | Required | Default | Description |
| primary | `CardAction[]` | No | none | Specifies the primary-level actions to display as buttons. |
| secondary | `CardAction[]` | No | none | Specifies secondary-level actions, which will be grouped under a "More" button. |
| showAtLeast | `number` | No | `0` | All primary buttons are normally moved into the "More" menu on mobile devices.This property allows for keeping a specified number of primary actions visible as buttons even in mobile view. |
Properties
| Name | Type | Required | Default | Description |
| title | `string` | No | none | The Title text of the card. |
| highlight | `MystiqueThemeColor` / `string` (hex value) | No | none | Show a coloured highlight above the card to denote status in cases like dashboard cards. |
| attributes | `ListColumn[]` (extension of `DynamicValue[]`) | Yes | none | List of columns to show in the table. The label will be used as the column header and the value re-evaluated for every row within the table. Columns may be selectively shown above or below certain media breakpoints, mapping to device widths (in pixels). By default, these breakpoints are:
`hideBelow:'xs'` would not show on devices smaller than 600px.Hide Above can be useful when aggregating several columns for small screen resolutions. I.e. on mobile devices, 3 columns are marked `hideBelow:'xs'` but one column marked `hideAbove:'xs'` contains all three values with line breaks between. |
| rowLink | `string` | No | none | Link the entire row to the location in this template string. RowLink is evaluated per line, so can use values from the row object. e.g. `"rowLink":"/orders/{{node.id}}"` on a list of orders would resolve to a link to the order page for that column.Note: 1) If no rowLink is provided and the attributes object contains exactly one linked column, that link will be used by default as the rowLink template. 2) If only one rowLink is provided, clicking anywhere on the list/card will navigate to the linked page. If more than one rowLink is provided on the list/card, then clicking anywhere on the list/card will not navigate to the linked page, as there will be more than one linked page available on the list/card. |
| defaultPageSize | `number` | Yes | 10 | Sets the default number of rows per page value. |
| rowsPerPageOptions | `number[]` | No | [10, 25, 100] | Changes the number of rows displayed according to the selected value. |
| filter | `ListFilterConfig` | No | none | Enables and configures the filter bar at the top of the list. Filter options will be derived from the dataSource of the list, so if the dataSource is pointing to a connection, any parameters of that connection will be presented as options, although parameters with types that don't have a matching field implementation are excluded, along with any listed in the explicit "exclude" config option. The filter configuration modal takes its components from the FieldRegistry, so the available filter controls can be extended by SDK users. See FieldRegistry for more details. |
| actions | `ListAction[]` | No | none | Enables bulk user actions on this list. Each row will show a checkbox, and when any rows are selected a button will appear at the top of the list to open that user action. If the user action requires additional attributes, a single form will be presented and the same values will be passed in to each selected item (e.g. on a "Mark as arrived" user action that takes a storage area, all articles will be added to the same storage area). The actions functionality assumes that all rows in the list are eligible for the same user action (e.g. by subtype, status etc) so keep that in mind when configuring. The entity in the first row is used to look up the available user actions, so check that first if no checkboxes are appearing. |
| density | `DensityConfig` | No | false | Adds controls to configure row height. The following options are available: Compressed view with row height 28 px; Standard view with row height 52 pxThe row height will not be changed if the expansion is used. |
| row | `RowConfig` | No | none | Per-row configuration options. |
| responsiveness | `table` / `card` / `forcecard` | No | `table` | Mobile-responsive option for the list. When set to "card", table rows will turn into cards on mobile devices. When set to `forcecard` responsiveness to be ignored and card view to be set for both mobile and desktop devices. |
| vAlign | `top` / `centre` / `center` / `middle` / `bottom` | No | `middle` | Vertical alignment of the content within the list. Content can be aligned to the following:
|
| rowComponent | `MystiqueComponentInstance | RowComponentDetailed` | No | none | Component or set of components to override the default list views. |
| loading | `string` | No | none | The property is useful when data processing is delayed, as it helps visualize the loading state.The loading property acts as a template and, based on the provided parameters, returns a boolean value. If the value is true, a skeleton will appear in the cell to indicate loading, replacing the data until it's ready.Template example:`'{{ eq order.status "BOOKED" }}'` |
| hideLabels | `boolean` | No | none | When set to `true`, this property hides attribute labels across the entire list in mobile view, enabling a more compact and dense UI layout. |
| cardActions | `CardActions` | No | none | Defines the configuration for action buttons displayed in the header section of a list. |
Configuration example
1{
2 "component": "fc.list",
3 "dataSource": "orders",
4 "props": {
5 "title": "i18n:fc.om.orders.index.list.title",
6 "filter": {
7 "enabled": true,
8 "exclude": [
9 "workflowRef",
10 "workflowVersion"
11 ]
12 },
13 "cardActions": {
14 "showAtLeast": 1,
15 "primary": [
16 {
17 "type": "mutation",
18 "label": "Create Order",
19 "name": "createOrder"
20 }
21 ],
22 "secondary": [
23 {
24 "type": "component",
25 "component": "fc.button.print.download",
26 "props": {
27 "label": "Print",
28 "href": "string",
29 "filename": "string"
30 }
31 }
32 ]
33 },
34 "row": {
35 "actions": {
36 "primary": [
37 {
38 "type": "navigate",
39 "label": "Order",
40 "link": "order/{{node.id}}"
41 }
42 ],
43 "secondary": [
44 {
45 "type": "mutation",
46 "label": "Mutation",
47 "name": "createUser"
48 },
49 {
50 "type": "component",
51 "component": "fc.button.print.download",
52 "props": {
53 "label": "Print",
54 "href": "string",
55 "filename": "string"
56 }
57 }
58 ]
59 },
60 "expansion": {
61 "toggle": true,
62 "component": "fc.button.bar",
63 "descendants": [
64 {
65 "component": "fc.button.print.download",
66 "props": {
67 "label": "Print",
68 "href": "string",
69 "filename": "string"
70 }
71 }
72 ],
73 "props": {
74 "title": "Title"
75 }
76 }
77 },
78 "density": {
79 "toggle": true,
80 "initial": "compressed"
81 },
82 "loading": "{{ eq order.status \"BOOKED\" }}",
83 "actions": [
84 {
85 "type": "UserAction",
86 "name": "FLAG_AS_URGENT"
87 }
88 ],
89 "attributes": [
90 {
91 "label": "i18n:fc.om.orders.index.list.column.orderRef.heading",
92 "value": "{{node.ref}}",
93 "link": "#/orders/{{node.id}}"
94 },
95 {
96 "label": "i18n:fc.om.orders.index.list.column.image.heading",
97 "type": "image",
98 "value": "https://fluentcommerce.com/wp-content/uploads/2019/07/fluent-commerce-logo.svg"
99 },
100 {
101 "label": "i18n:fc.om.orders.index.list.column.customer.heading",
102 "value": "{{node.customer.firstName}} {{node.customer.lastName}}",
103 "enableCopyIcon": "displayAlways"
104 },
105 {
106 "label": "i18n:fc.om.orders.index.list.column.status.heading",
107 "value": "{{node.status}}",
108 "enableCopyIcon": "displayOnHover"
109 },
110 {
111 "label": "i18n:fc.om.orders.index.list.column.orderType.heading",
112 "value": "{{node.type}}"
113 },
114 {
115 "label": "i18n:fc.om.orders.index.list.column.orderValue.heading",
116 "value": "${{node.totalPrice}}"
117 },
118 {
119 "label": "i18n:fc.om.orders.index.list.column.retailerName.heading",
120 "value": "{{node.retailer.tradingName}}"
121 }
122 ]
123 }
124}Version History
See previous versions
2025-10-06
25.10.6
The component extension with the properties:`cardActions`, `actions` (`rowConfig` type), and `hideLabels`.2025-06-16
25.06.16
The component extension with the`enableCopyIcon`.2024-10-08
24.10.8
The component extension with the`loading`.2024-07-22
24.7.22
The component extension with the`rowComponentDetails`.2023-07-31
23.7.31
N/ARecommended Placement
None
