EnTableToolbar

• An EnTableBasic component with a toolbar
• Uses the same core props as EnTableBasic
• Toolbar contains copy to clipboard, download to csv, and simple text filtering
• Slots available to add buttons and replace the buttons or entire toolbar area
• Toaster message will display after copy if the Toaster is defined

Preview

Props

Name	Description	Default	Control
headings	An array containing the labels for the columns of the table and optional key that matches to data in the row object. array	[…]	complex object
rows	An array of table data containing objects or array of strings or numbers, where each object/array is a row of table data. Objects are recommended for full feature use. array	[…]	complex object
rowType	The type of each row of the table. string	"object"
headerClass	CSS class that will be applied to all table headers. string	""
wrapHeader	Whether or not the text in the table headers should be wrapped. boolean	true	truefalse
enableBulkAction	Enables checkboxes for bulk actions. NOTE: must have a v-model binding to an array to work properly. boolean	false	truefalse
bulkActionProperty	Sets a property to pull from each selected item instead of the full object. e.g. set to 'Id' if you want to only include the Id from the selected objects. string	null
qaId	Id that can be set for automation selectors. string	""
modelValue	Use v-model to bind to value of the bulk selected items. unknown[]	unknown
fileName	Filename for csv download. string	null
showClipboardBtn	Shows the copy to clipboard button. boolean	true	truefalse
showCsvBtn	Shows the download CSV button. boolean	true	truefalse
showButtons	Shows download and print buttons. boolean	true	truefalse
showFilter	Shows filter for searching table. boolean	true	truefalse
filterTerm	Shows filter for searching table. string	""
useJsonDownload	Sets download to use the raw JSON instead of data in the table. boolean	false	truefalse
filterOnKeys	Pass an array of strings equal to the key values of the table columns or json data that should be filtered when searching. unknown[]	unknown
filterPlaceholder	Sets the placeholder value for the text filter. string	"Search table"
tableClass	Adds additional CSS classes to the built-in table. string	""
hideToolbar	Hides the full toolbar. Can be used to control filtering by the filter term prop. boolean	false	truefalse
filterWidth	Sets a max-width on the filter input. string | number	"250"
useSorting	Adds table sorting. boolean	false	truefalse
responsive	Uses table wrapper to make it scroll horizontally if needed. boolean	false	truefalse

Slots

toolbar

Replaces the full toolbar; must use slot variables to update filtering

Variables

Name	Type	Description
searchTerm	string	String used to filter the table rows
updateFilter	function	Function that can be used to update the filtering by passing in a string

bulk-action

Replaces the `Apply` button which is viewable when `enableBulkAction` is set to `true`

Variables

Name	Type	Description
selectedItems	array	An array of the selected items for bulk actions.

toolbar-left

Places content on the left side of the toolbar

toolbar-buttons

Replaces all the buttons left of the filter.

additional-buttons

Places additional buttons to the right of the download buttons.

filter

Replaces the filter input; must use slot variables to update filtering

Variables

Name	Type	Description
searchTerm	string	String used to filter the table rows
updateFilter	function	Function that can be used to update the filtering by passing in a string

table

Replaces the full table; must use slot variables to keep flitering and download functionality

Variables

Name	Type	Description
rows	array	Filtered table rows.
headings	array	Mapped headings from the passed in prop.

${slot}

Dynamically generated slot based on the key or slot property in the heading object; used to modify the columns display value

Variables

Name	Type	Description
content	any	Default display value
row	object	Full row object
row-index	number	Row index, does not take any pagination into account
heading-index	number	Column index

Events

update:model-value

Binds the selected rows to v-model

filter

Fires when they filtering changes

Payload

Name	Type	Description
filteredRows	array	The filtered rows

apply-action

Fires on click of the apply button for bulk actions

Payload

Name	Type	Description
selectedItems	array	The list of items that are selected.

Methods

No methods defined.

Examples

Custom filtering

Using bulk actions

Using pagination