List Component (fc.list)
Changed on:
30 May 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 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 |
---|
The standard library of components.
v1.0.0
Initial changelog entry.
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 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 of items. The 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 |
| No |
| Align column contents |
hideBelow |
| No | none | Hide column at media breakpoints smaller than this |
hideAbove |
| No | none | Hide column at media breakpoints larger than this |
enableCopyIcon |
| No | none | the visibility of the copy icon next to the column or field value. Use 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 |
| Yes |
| Flag to enable filters on this list |
exclude |
| No | none | List of filter options to hide. |
ListAction
Name | Type | Required | Default | Description |
type |
| Yes | none | Currently, it is the only supported value, but it is likely to be expanded in the future. |
name |
| Yes | none | Name of the to enable on this list (as defined by the ). |
Density Config
Name | Type | Required | Default | Description |
toggle |
| No |
| Flag to enable toggle buttons on this list. |
initial |
| No |
| Show list in compressed or standard mode. |
RowConfig
Name | Type | Required | Default | Description |
expansion |
| No | none | Configure a component to display after each row in a list. This component will receive the row data as its |
MystiqueComponentInstance
Name | Type | Required | Default | Description |
component |
| Yes | none | Component alias. |
roles |
| No | none | Roles assigned to the user. |
descendants |
| No | none | List of components that can be nested inside. |
props |
| No | none | Key-value set unique to the nested component. |
toggle |
| No | none | Flag to enable expansion toggle on this list |
RowComponentDetailed
Name | Type | Required | Default | Description |
mobile |
| No | none | Component that overrides the list mobile view only. |
desktop |
| No | none | Component that overrides the list desktop view only. |
Properties
Name | Type | Required | Default | Description |
title |
| No | none | The Title text of the card. |
highlight |
| No | none | Show a coloured highlight above the card to denote status in cases like dashboard cards. |
attributes |
| 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.
Hide Below prevents the column appearing when the device resolution is lower than breakpoint + 1, so columns marked |
rowLink |
| No | none | Link the entire row to the in this template string. RowLink is evaluated per line, so can use values from the row object. |
defaultPageSize |
| Yes | 10 | Sets the default number of rows per page value. |
rowsPerPageOptions |
| No | [10, 25, 100] | Changes the number of rows displayed according to the selected value. |
filter |
| No | none | Enables and configures the filter bar at the top of the list. |
actions |
| 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 . |
density |
| No | false | Adds to configure row height. The following options are available: Compressed view with row height 28 px; Standard view with row height 52 px The row height will not be changed if the expansion is used. |
row |
| No | none | Per-row configuration options. |
responsiveness |
| No |
| Mobile-responsive option for the list. When set to "card", table rows will turn into cards on mobile devices. |
vAlign |
| No |
| Vertical alignment of of the content within the list. Content can be aligned to the following:
|
rowComponent |
| No | none | Component or set of components to override the default list views. |
loading |
| 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, 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:
|
Configuration example
1{
2 "component": "shared.components.material.DynamicList",
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 "row": {
14 "expansion": {
15 "toggle": true,
16 "component": "fc.button.bar",
17 "descendants": [
18 {
19 "component": "fc.button.print.download",
20 "props": {
21 "label": "Print",
22 "href": "string",
23 "filename": "string"
24 }
25 }
26 ],
27 "props": {
28 "title": "Title"
29 }
30 }
31 },
32 "density": {
33 "toggle": true,
34 "initial": "compressed"
35 },
36 "loading": "{{ eq order.status \"BOOKED\" }}",
37 "actions": [
38 {
39 "type": "UserAction",
40 "name": "FLAG_AS_URGENT"
41 }
42 ],
43 "attributes": [
44 {
45 "label": "i18n:fc.om.orders.index.list.column.orderRef.heading",
46 "value": "{{node.ref}}",
47 "link": "#/orders/{{node.id}}"
48 },
49 {
50 "label": "i18n:fc.om.orders.index.list.column.image.heading",
51 "type": "image",
52 "value": "https://fluentcommerce.com/wp-content/uploads/2019/07/fluent-commerce-logo.svg"
53 },
54 {
55 "label": "i18n:fc.om.orders.index.list.column.customer.heading",
56 "value": "{{node.customer.firstName}} {{node.customer.lastName}}",
57 "enableCopyIcon": "displayAlways"
58 },
59 {
60 "label": "i18n:fc.om.orders.index.list.column.status.heading",
61 "value": "{{node.status}}",
62 "enableCopyIcon": "displayOnHover"
63 },
64 {
65 "label": "i18n:fc.om.orders.index.list.column.orderType.heading",
66 "value": "{{node.type}}"
67 },
68 {
69 "label": "i18n:fc.om.orders.index.list.column.orderValue.heading",
70 "value": "${{node.totalPrice}}"
71 },
72 {
73 "label": "i18n:fc.om.orders.index.list.column.retailerName.heading",
74 "value": "{{node.retailer.tradingName}}"
75 }
76 ]
77 }
78}
Version History
v23.7.31
N/A
24.7.22
The component extension with the `rowComponentDetails`
.
24.10.8
The component extension with the `loading`
.
25.06.16
The component extension with the `enableCopyIcon`
.
Recommended Placement
None