Appearance
Table Slots
Description of available table slots.
Slot: head
Props | Type | Description |
---|---|---|
columns | Array | Collection of column definitions. |
sortHandler | Function | Function to handle sorting columns |
Code example
template
<Table>
<template #head="{columns, sortHandler}">
<tr>
<HeaderCell
v-for="column in columns"
:cell="column"
:sort="tableData.sort"
@sort="sortHandler"
class="dark:bg-gray-800">
{{ column.name }}
</HeaderCell>
<th>Actions</th>
</tr>
</template>
</Table>
Slot: body
Props | Type | Description |
---|---|---|
records | Array | Collection of table records |
columns | Array | Collection of column definitions. |
Code example
template
<Table>
<template #body="{records, columns}">
<tr v-for="record in records">
<td v-for="field in tableData.columns" v-show="field.visible">
{{ record[field.attribute] }}
</td>
<td><button>Edit</button></td>
</tr>
</template>
</Table>
Slot: action
Props | Type | Description |
---|---|---|
record | Object | The current rows data |
Code example
template
<Table>
<template #action="{record}">
<td>
<button @edit="editRow(record.id)">Edit</button>
</td>
</template>
</Table>
Slot: globalSearch
Props | Type | Description |
---|---|---|
search | Object | Table search object. table.search.global.value |
changeGlobalSearchValue | Function | This function allows you to update the global search value on the table. |
Slot: filters
Props | Type | Description |
---|---|---|
hasFilters | Function | Helper to check if we have any filters |
filters | Array | Collection of filter definitions |
changeFilterValue | Function | This function allows you to update the filter value on the table. |
Slot: addSearch
Props | Type | Description |
---|---|---|
hasSearchRows | Function | Helper to check if we have any enabled search fields |
search | Array | Collection of search fields |
onAdd | Function | This function allows enable a fields search field. |
Slot: toggleColumns
Props | Type | Description |
---|---|---|
hasColumns | Function | Helper to check if we have any enabled search fields |
columns | Array | Collection of column definitions |
change | Function | This function allows enable a fields search field. |
Slot: searchRows
Props | Type | Description |
---|---|---|
hasSearches | Function | Helper to check if we have any enabled search fields |
search | Array | Collection of search fields |
removeSearch | Function | This function allows reamove a search field. |
updateValue | Function | This function allows update a serahc fields value. |