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 in Vue, 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

Vue

<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>

React

<Table
    resource={users}
    filters={({ table, actions }) => {
        return (
            <>
                <p>{table.hasFilters ? 'Filters applied!' : 'No filters applied.'}</p>
                <p>{actions.allItemsAreSelected ? 'All items are selected!' : ''}</p>
            </>
        );
    }}
/>

Column Slots

Instead of replacing a complete section of the table, you can also replace individual column headers and cells. In Vue, 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). In React, you can use the header and cell props and pass an object with the column key as the key.

Besides the table and actions props, header also receives a column prop that contains the column definition. In addition, cell receives column, item, and value props.

Example

Vue

<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>

React

<Table
    resource={users}
    header={{
        name: ({ column }) => <b>Full name</b>
    }}
    cell={{
        name: ({ column, item, value }) => <span title={value}>{item.first_name} {item.last_name}</span>
    }}
/>

Metadata

You can add metadata to Actions and Links, Columns, Exports, and Filters. This metadata is not used in the default Table component but can be useful when extending the Table component using slots.