Expanded Rows
The AresDataTable
component supports expandable rows via the expand
slot. This allows you to display additional content below each row, such as details, nested tables, or actions.
💡 How It Works
When the expand
slot is used, each row becomes expandable. Clicking the toggle control (typically a small arrow or button in the first column) will reveal the content provided by the expand
slot.
The slot receives a single prop:
value
: The original row object from the table data.
✅ Example Usage
vue
<DataTable
ref="datatable"
unique-id="orders"
:columns="columns"
:is-server-mode="true"
>
<template #expand="{ value }">
<div class="p-2 bg-light border rounded">
<strong>Name:</strong> <span v-html="value.name"></span><br>
<strong>Email:</strong> <span v-html="value.email"></span><br>
<strong>Details:</strong> {{ value.details }}
</div>
</template>
</DataTable>
📦 Notes
- The component automatically detects whether the
expand
slot is present and adjusts the table accordingly. - To check if the slot is registered, the internal logic uses:ts
slotsStore.hasSlot('expand')
- You can combine this with conditional rendering inside the slot if only certain rows should show additional data.