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
minItems	int	No	The minimum number of items that are expected. This property is used to calculate the minimum height of the card.	1.50.0	1.109
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
highlight	string	No	The highlight state of the row.	1.53.0	1.113
highlightText	string	No	Defines the semantics of the "highlight" property. It is used for accessibility purposes.	1.53.0	1.113

TableColumn Properties

Every column has the following common 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
visible	boolean	No	Determines the visibility of the column.	1.25.0	1.81

In addition to the common properties, the card developer must also set properties for one of the following: text value, icon, or progress indicator.

Properties for TableColumn with Text Value

Property	Type	Required	Description	Schema Version	Since
value	string	No	Text value of the column.	1.15.0	1.65
identifier	boolean	No	Defines whether the column is an identifier.	1.15.0	1.65
additionalText	string	No	Additional text for the identifier column.	1.53.0	1.113
actions	Actions[]	No	Defines actions that can be applied on the column.	1.31.0	1.87
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
showStateIcon	boolean	No	Defines if a state icon is shown.	1.53.0	1.113
customStateIcon	string	No	The custom state icon. If set, then the `showStateIcon` property should be set to `true`.	1.53.0	1.113

Properties for TableColumn with Icon

Property	Type	Required	Description	Schema Version	Since
icon	Icon	No	Represents column with icon.	1.15.0	1.65

Properties for TableColumn with Progress Indicator

Property	Type	Required	Description	Schema Version	Since
progressIndicator	ProgressIndicator	No	Defines the progress indicator attributes.	1.15.0	1.65

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
fitType	sap.m.AvatarImageFitType	Cover	No	Used to determine how the image will fit in the icon space.	1.65.0	1.126
visible	boolean	true	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