Table Card

The Table Card is used to display multiple items in table view.

Properties

The Table Card contains an array of rows.

Table row properties

Property Type Required Description Schema Version Since
columns array No Defines the columns attributes. 1.15.0 1.65
actions Actions[] No Defines actions that can be applied on the row. 1.15.0 1.65

Table column properties

Property Type Required Description Schema Version Since
title string No Defines language-dependent title of the column. 1.15.0 1.65
width string No Defines the width of the column. 1.15.0 1.65
hAlign string No Defines the horizontal alignment of the column content. For a list of possible values see sap.ui.core.TextAlign. 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 string No Defines the state of the column. 1.15.0 1.65
identifier boolean No Defines whether the column is an identifier. 1.15.0 1.65
progressIndicator string 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 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. 1.26.0 1.82
size string No One of "XS", "S" or "M". By default it is set to "XS".
Note: This property is experimental and may change!
1.26.0 1.82
backgroundColor sap.m.AvatarColor No By default it is set to "Transparent".
Note: This property is experimental and may change!
1.27.0 1.83

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}"
				}]
			}
		}
	}
}

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