Slots

Introduction

The Table component has slots that allow you to customize the rendering of the component without having to create a new component or modify the existing one. If you're not familiar with slots, you can read about them in the Vue documentation.

Global Slots

The Table component has the following high-level slots:

Slot	Description
loading	The overlay that is displayed when the table is loading data.
topbar	The container for the content above the table (e.g., search, actions).
filters	The container for the active filters.
table	The container for the actual table.
thead	The actual <thead> element.
tbody	The actual <tbody> element.
footer	The container for the content below the table (e.g., pagination).

To each of these slots, a table and actions prop is passed to the slot scope. These correspond to the composables useTable() and useActions() functions that you can read about in the Custom Table Component section.

Example

<Table :resource="users">
    <template #filters="{ table, actions }">
        <p v-if="!table.hasFilters">No filters applied.</p>
        <p v-if="actions.allItemsAreSelected">All items are selected!</p>
    </template>
</Table>

Column Slots

Instead of replacing a complete section of the table, you can also replace individual column headers and cells. This is done by using dynamic slot names that correspond to the column key. For headers, the slot name is header(key), and for cells, it's cell(key).

Besides the table and actions props, the header(key) slot also receives a column prop that contains the column definition. The cell(key) slot receives column, item, and value props.

Example

<Table :resource="users">
    <template #header(name)="{ column }">
        <b>Full name</b>
    </template>

    <template #cell(name)="{ column, item, value }">
        <span :title="value">{{ item.first_name }} {{ item.last_name }}</span>
    </template>
</Table>