Table Card
The Table Card is used to display multiple items in table view.
Properties
| Property | Type | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|
| row | TableRow | Yes | The row template from which all the rows in the table will be created. | 1.15.0 | 1.65 |
| maxItems | int | No | The maximum number of items. | 1.15.0 | 1.65 |
| group | Group | No | Defines whether and how items are grouped. | 1.37.0 | 1.96 |
TableRow properties
| Property | Type | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|
| columns | TableColumn[] | Yes | Defines the columns attributes. | 1.15.0 | 1.65 |
| actions | Actions[] | No | Actions that are triggered when the row is pressed. | 1.15.0 | 1.65 |
TableColumn properties
Every column can display different thing based on the set properties.
| Property | Type | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|
| title | string | No | The title of the column. | 1.15.0 | 1.65 |
| width | sap.ui.core.CSSSize | No | Defines the width of the column. | 1.15.0 | 1.65 |
| hAlign | sap.ui.core.TextAlign | No | Defines the horizontal alignment of the column content. | 1.19.0 | 1.75 |
| value | string | No | Represents the text value of the column. | 1.15.0 | 1.65 |
| icon | Icon | No | Represents column with icon. | 1.15.0 | 1.65 |
| state | sap.ui.core.ValueState | No | Defines the state of the column. Can be used only together with value property. |
1.15.0 | 1.65 |
| identifier | boolean | No | Defines whether the column is an identifier. | 1.15.0 | 1.65 |
| progressIndicator | ProgressIndicator | No | Defines the progress indicator attributes. | 1.15.0 | 1.65 |
| visible | boolean | No | Determines the visibility of the column. | 1.25.0 | 1.81 |
| actions | Actions[] | No | Defines actions that can be applied on the column. Actions can be applied only on columns that are identifiers or text. | 1.31.0 | 1.87 |
Icon properties
| Property | Type | Default Value | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|---|
| src | string | No | Icon name or source URL | 1.15.0 | 1.65 | |
| shape | sap.m.AvatarShape | No | The shape of the icon. | 1.15.0 | 1.65 | |
| alt | string | No | Alternative text for the icon. If not provided, a default value is set, which might be confusing for screen reader users, when there are more than one card in the view. | 1.26.0 | 1.82 | |
| size | string | "XS" | No |
One of "XS", "S" or "M".
Note: This property is experimental and may change! |
1.26.0 | 1.82 |
| backgroundColor | sap.m.AvatarColor | "Transparent" | No |
The background color.
Note: This property is experimental and may change! |
1.27.0 | 1.83 |
ProgressIndicator properties
| Property | Type | Default Value | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|---|
| percent | float | 0 | No | Specifies the numerical value in percent for the length of the progress bar. | 1.15.0 | 1.65 |
| text | string | No | The text to be displayed in the bar. | 1.15.0 | 1.65 | |
| state | sap.ui.core.ValueState | "None" | No | The state of the bar. | 1.15.0 | 1.65 |
Group properties
| Property | Type | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|
| title | string | Yes | Title of the group | 1.37.0 | 1.96 |
| order | Order | Yes | The sorting order of the group. | 1.37.0 | 1.96 |
Group order properties
| Property | Type | Required | Description | Schema Version | Since |
|---|---|---|---|---|---|
| path | string | Yes | The binding path used for sorting | 1.37.0 | 1.96 |
| dir | string | No | The direction of the sorting order - "ASC" (default) or "DESC". | 1.37.0 | 1.96 |
Example
Define the type and data for the card:
To bind row information we need to provide a path to the data. Use the root path to bind the column information, as shown in the example below.
{
"sap.app": {
"id": "card.explorer.table.card",
"type": "card",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.card": {
"type": "Table",
"header": {
"title": "Sales Orders for Key Accounts",
"subTitle": "Today"
},
"content": {
"data": {
"request": {
"url": "./cardcontent/tableitems.json"
},
"path": "/results"
},
"row": {
"columns":[{
"title": "{/columns/0/title}",
"value": "{salesOrder}",
"identifier": "{/columns/0/identifier}",
"visible": "{/columns/0/visibleFlag}"
},
{
"title": "{/columns/1/title}",
"value": "{customerName}",
"visible": "{/columns/1/visibleFlag}"
},
{
"title": "{/columns/2/title}",
"value": "{netAmount}",
"hAlign": "End",
"visible": "{/columns/2/visibleFlag}"
},
{
"title": "{/columns/3/title}",
"value": "{status}",
"state": "{statusState}",
"visible": "{/columns/3/visibleFlag}"
}],
"group": {
"title": "{= ${statusState} === 'Success' ? 'Delivered : 'Not Delivered'}",
"order": {
"path": "statusState",
"dir": "ASC"
}
}
}
}
}
}
The content of the tableitems.json that we are requesting:
{
"results": [
{
"salesOrder": "5000010050",
"customerName": "Robert Brown Entertainment",
"netAmount": "2K USD",
"status": "Delivered",
"statusState": "Success"
},
{
"salesOrder": "5000010051",
"customerName": "Entertainment Argentinia",
"netAmount": "127K USD",
"status": "Canceled",
"statusState": "Error"
},
{
"salesOrder": "5000010052",
"customerName": "Brazil Technologies",
"netAmount": "8K USD",
"status": "In Progress",
"statusState": "Warning"
}
],
"columns": [
{
"title": "Sales Order",
"visibleFlag": true,
"identifier": true
},
{
"title": "Customer",
"visibleFlag": true
},
{
"title": "Net Amount",
"visibleFlag": false
},
{
"title": "Status",
"visibleFlag": true
}
]
}
Create the view to display the card:
<mvc:View xmlns:w="sap.ui.integration.widgets"> <w:Card manifest="./manifest.json" width="400px" height="auto" /> </mvc:View>Try it Out