![\"image\"](\"https:\/\/pi3g.com\/wp-content\/uploads\/2020\/08\/image-5.png\" "\\"image\\"")
<\/a><\/p>\nclicking either the chevron or the configure button will lead to the detail row opening:<\/p>\n
Here is the corresponding Vue template:<\/p>\n <v-data-table <\/p>\n<\/blockquote>\n As you can see I wrap another component for the expanded-item slot. This component is irrelevant for our current discussion, therefore I do not provide code for it.<\/p>\n I have highlighted the important bits above.<\/p>\n These are:<\/p>\n then:<\/p>\n finally:<\/p>\n <\/p>\n Here is how my data() looks like (excerpt):<\/p>\n data () { } And here are the two utility functions:<\/p>\n<\/a><\/p>\n\n
:headers=”gpioInputTableHeaders”
:items=”gpioInputTableData”<\/strong>
:loading=”loading”
item-key=”bcm_id”<\/strong>
loading-text=”waiting for data … “
fixed-header
show-expand
:expanded.sync=”gpioInputTableExpanded”<\/strong>
class=”elevation-1″
\n>
<template v-slot:item.value=”{ item }”>
<span v-if=”!onlineStateBinary”><i class=”fa fa-warning”><\/i> <\/span>
<span v-if=”item.state == 1″><v-icon x-small>mdi-arrow-up-bold<\/v-icon>{{item.high}}<\/span>
<span v-else-if=”item.state == 0″><v-icon x-small>mdi-arrow-down-bold<\/v-icon>{{item.low}}<\/span>
<span v-else-if=”item.state == 2″>N\/A<\/span>
<span v-else-if=”item.state == 4″>N\/A<\/span>
<span v-else>ERROR<\/span>
<\/template>
<template v-slot:item.action=”{ item }”<\/strong>>
<v-btn
class=”mr-2″
color=”primary”
small
@click.ctrl.exact=”configGpioAll(‘input’, item)”
@click.exact=”configGpio(‘input’, item)”<\/strong>
>
<v-icon left small class=”mr-2″>mdi-hammer-wrench<\/v-icon>
Configure
<\/v-btn>
<v-btn
class=”mr-2″
color=”error”
small
@click=”remove_gpio(‘input’, item.bcm_id)”
>
<v-icon left small class=”mr-2″>mdi-trash-can-outline<\/v-icon>
Remove
<\/v-btn>
<\/template>
<template v-slot:expanded-item=”{ headers, item }”><\/strong>
<!– v-on:pull-change=”pullChange” –>
<td :colspan=”headers.length”><\/strong>
<gpioInputDetailRow
:rowData=”item”
v-on:pull-change=”pullChange”
v-on:debounce-change=”debounceChange”
><\/gpioInputDetailRow>
<\/td>
<\/template>
\n<\/v-data-table> <\/p>\n\n
\n
<\/a><\/li>\n\n
\n
\n
return {
loading: true,
gpioInputTableData: [],
gpioInputTableHeaders: [
{ text: ‘Name’, value: ‘name’},
{ text: ‘Value’, value: ‘value’},
{ text: ‘Action’, value: ‘action’}
],
gpioInputTableExpanded: []\n<\/p>\n
\n},\n<\/p>\n<\/blockquote>\n