Helper Attributes

NioSlatTable allows several helper attributes which enhance the behavior and/or styling of the table:

single-select

Allows the selection of one item at a time. Displays radio buttons to the left of each item. Configure default selection using the defaultSelection prop.

multi-select

Allows the selection of multiple options. Displays checkboxes to the left of each item. Configure default selections using the defaultSelection prop.

dense-rows

Items are displayed as shorter than the default (80px instead of 96px)

search-sort-header

Exposes a search bar and sort opptions selection in the table header. Use in conjunction with the searchableProps and sortOptions props.

selected-search-header

For use with the multiSelect helper attribute. Shows the number of selected items and a search bar in the table header. Configure the search bar with the searchableAttributes prop.

selected-header

For use with the multiSelect helper attribute. Shows only the number of selected items in the table header.

count-header

Shows only the total number of items in the table header.

footer-actions

Exposes a secondary table footer which is populated using the footer-actions slot.

<NioSlatTable
	:items="items"
	:columns="columns"
	footer-actions
>
	<template v-slot:footer-actions>
		<NioButton @click="back">Back</NioButton>
		<NioButton @click="next">Next</NioButton>
	</template>

pagination

Displays pagination controls in the table footer. Configure using the itemsPerPageOptions and initialItemsPerPage props

listing-plain

Hides all interaction controls. Used for the simple display of data.