I am currently working on a Bootstrap-Vue b-table that utilizes the @row-clicked event to showcase associated content in a card that expands below the selected row. While this feature works beautifully, the client has now requested that the displayed data appear beside the table, similar to a sidebar b-card.
In an attempt to achieve this layout, I have tried relocating the
<template #row-details="row">...</template> <b-table :items="dataDevices" @row-clicked="onRowClicked">
<!-- the template typically resides here and functions correctly -->
</b-table>
<template #row-details="row">
<b-card>{{ row.item.serno }}</b-card>
</template>
Unfortunately, this approach does not seem to work as expected. I also attempted altering the template syntax to
<template slot="row-details" slot-scope="row">Despite my extensive Google research skills, I have been unable to locate any instances of individuals implementing this technique.
While I acknowledge that @row-clicked provides access to row data and operates seamlessly with templates inside the b-table component, I believe there must be a way to transmit row data to elements outside the b-table structure.
For those who have explored presenting b-table row data in this manner, how did you approach it? Any guidance or references to relevant examples/documentation would be greatly appreciated.
Perhaps I need to develop an event handler function for @row-clicked that effectively transfers the data to a specific b-card identified by an ID. At this stage, I'm simply brainstorming potential solutions.
If anyone can offer insights or direct me towards useful resources, it would be immensely helpful.