Columns

TIP

It is recommended that the columns prop be generated in a Vue component in the mounted() lifecycle hook

Each array element takes an object with the following properties:

key	type	required
name	String	Yes
label	String	No
props	String	When name = "slat"
computed	Function	No
addItemAsClass	Boolean	No

:name

The name of the column as represented in code. Can be any string, but if the special case "slat" is used, the resulting column will be displayed as a nio-slat component, with one or more of an image, title and/or subtitle, if specified.

Default name usage

	{
		name: "expiration",
		label: "Expires",
		computed: this.computeExpiration,
		addItemAsClass: true
	}

TIP

When using the special case slat, the element requires a props object to be passed which describes to the component how to populate the image, title and/or subtitle slots of the rendered nio-slat component. Similar to the computed property, these field may contain either a key from the current item or a function to return a computed value from the current item

Special case slat usage

	{
		name: "slat",
		props: {
			image: this.computeImgSrc,
			title: this.computeTitle,
			subtitle: "name"
		}
	}

:label

The label to be displayed above the value of each column value. Only used if the name="slat key is not used

:computed

The data to be displayed in the column. In order to compute the value, the provided function will be passed the current item. If the computed property is omitted, the data output will not be computed from a function, but rather from the name property of the item itself

	computeExpiration(item) {
		return `Expires on ${item.expiration}`
	}

TIP

If the computed property is not provided, the column will be populated with the data contained in item[name].