EnTableBasic
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 | |
| enableBulkAction | Enables checkboxes for bulk actions. NOTE: must have a v-model binding to an array to work properly. boolean | false | |
| 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 | |
| perPage | number | 0 | |
| currentPage | number | 1 | |
| 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 |
Slots
header
render table rows
default
No description
${heading.slot}-heading
Dynamically generated slot based on the key or slot property in the heading object; used to modify the header
Variables
| Name | Type | Description |
|---|---|---|
heading | object | the defined heading object |
body
render table rows
${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
No description
Methods
No methods defined.
Types
BaseTableHeading -
Object| Name | Type | Description |
|---|---|---|
label | string | Display text for the column header. |
key | string | Identifier for the location of the data for this column. |
slot | string | The name of the slot created for the data in the cell and the header; defaults to the key unless a value is provided. |
class | string | Applies a CSS class to both the header and the table cell. |
headerClass | string | Applies a CSS class to just the header. |
renderInTable | boolean | Filters the heading out of the table so it will not display. |
Examples
Using dynamically created column slots
A slot is created for each column for better control of the display values. The name of the slot is generated from the key in the headings object or a defined slot key. The component will automatically convert PascalCase to kebab-case when creating the slot names. Inspect the Vue devtools to see the exact name of the resolved slot name in the mappedHeadings computed property.