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
initials string No Used as fallback if the "src" property is not set or there is an issue with the resource. Up to two Latin letters can be displayed. If there are more than two letters, or if there's a non-Latin character present, a default image placeholder will be created. 1.47.0 1.107
visible boolean No Defines whether the icon should be displayed. 1.48.0 1.108

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