DataTable ColToggle
Posted: 30 Oct 2020, 20:25
Hi, I'm having an issue with having to do a lot of trickery to get an "Actions" column (ie edit, delete) to be on the right side when also allowing toggling of columns. Basically, I'm having to load all possible columns on created(), then filtering those to only initially visible on mounted(). If I try to loop through the columns and only display the visible columns based on a computed array, if I toggle to display new columns, they are pushed to the end of the table after the "Actions" column. Is there anyway to make the "Actions" column always be the last/far-right column?
I have this in my table. So looping thorough display columns, then the Actions column.
And if I load this on mounted()
And then toggle on a new column - say reference_slug - it then appears after the "Actions" column. Here's the computed displayColumns:
And here's the result I get when showing the reference_slug as the example. And clearly I'm trying to keep the Action gears on the right.
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
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
