Table - Custom Slot Templates

Insert custom content at different positions of the table through slots, such as toolbar above the table, left/right action areas, etc.

Custom Left Template

Place action buttons and search boxes in the left area above the table through the #toolbar-left slot. This is the most commonly used toolbar slot.

Custom Left Template

Custom Left Prefix Template

Insert content before the left action buttons through the #toolbar-left-prefix slot, such as titles, icons, etc.

Custom Left Prefix Template

Custom Left Suffix Template

Append content after the left action buttons through the #toolbar-left-suffix slot, such as data statistics.

Custom Left Suffix Template

Custom Right Template

Place action buttons on the right side above the table through the #toolbar-right slot, such as refresh, export, print, settings, etc.

Custom Right Template

Custom Right Prefix Template

Insert content before the right action buttons through the #toolbar-right-prefix slot, such as status hints.

Custom Right Prefix Template

Custom Right Suffix Template

Append content after the right action buttons through the #toolbar-right-suffix slot, such as sync status.

Custom Right Suffix Template

Full Toolbar Example

Combine all 6 toolbar slots to build a complete table toolbar layout.

Full Toolbar

Slot Layout Description

The toolbar area is divided into left and right sections, each with 3 slot positions:

┌──────────────────────────────────────────────────────────────────┐
│ [left-prefix] [left] [left-suffix]   [right-prefix] [right] [right-suffix] │
├──────────────────────────────────────────────────────────────────┤
│                        Table Content Area                             │
└──────────────────────────────────────────────────────────────────┘

API

Toolbar Slots

Slot	Description	Position
toolbar-left	Left toolbar main content	Left
toolbar-left-prefix	Left toolbar prefix (e.g., title)	Left start
toolbar-left-suffix	Left toolbar suffix (e.g., statistics)	Left end
toolbar-right	Right toolbar main content	Right
toolbar-right-prefix	Right toolbar prefix (e.g., hints)	Right start
toolbar-right-suffix	Right toolbar suffix (e.g., status)	Right end
empty	Custom empty data state content	Inside table

Usage Tips

1. Left side typically holds action buttons: add, batch delete, search, etc.
2. Right side typically holds tool buttons: refresh, export, print, column settings, etc.
3. Prefix is suitable for static content like titles and icons
4. Suffix is suitable for auxiliary info like statistics and status indicators
5. All slots can be freely combined; unused slots won't render extra space