Skip to content

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.