I have this in my table. So looping thorough display columns, then the Actions column.
Code: Select all
<Column v-for="c in displayColumns" :field="c.field"
:key="c.field"
:header.sync="c.label"
:filterMatchMode="c.filterType"
:sortable="c.sortable"
/>
<Column field="actions" key="actions" header=""
bodyStyle="text-align: center; overflow: visible"
headerStyle="width: 8em; text-align: center"
:reorderable-column="false"
:frozen="true">
<template #body="slotProps">
<Button type="button" icon="pi pi-cog" class="p-button-secondary"
@click="edit(slotProps.data)" />
<Button type="button" icon="pi pi-cog" class="p-button-secondary" />
</template>
</Column>
Code: Select all
this.fullColumns = [
{
field: 'id',
label: 'ID',
sortable: true,
filterType: "in",
display: true,
},
{
field: 'name',
label: 'Name',
sortable: true,
filterType: "contains",
optional: true,
display: true,
},
{
field: 'reference_slug',
label: 'Reference Slug',
optional: true,
display: false,
}
]
Code: Select all
displayColumns() {
return this.fullColumns.filter(item => Boolean(item.display));
},
On Load:
https://www.dropbox.com/s/08yqbi5tzfo8 ... M.png?dl=0
After enabling reference_slug:
https://www.dropbox.com/s/t9rd2l3ipnfnr ... M.png?dl=0