Page 1 of 1

DataTable ColToggle

Posted: 30 Oct 2020, 20:25
by chuckbeats
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.

Code: Select all

 <Column v-for="c in displayColumns" :field="c.field"


                        <Column field="actions" key="actions" header=""
                                bodyStyle="text-align: center; overflow: visible"
                                headerStyle="width: 8em; text-align: center"
                            <template #body="slotProps">
                                <Button type="button" icon="pi pi-cog" class="p-button-secondary"
                                        @click="edit(" />
                                <Button type="button" icon="pi pi-cog" class="p-button-secondary" />
And if I load this on mounted()

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,
And then toggle on a new column - say reference_slug - it then appears after the "Actions" column. Here's the computed displayColumns:

Code: Select all

  displayColumns() {
                return this.fullColumns.filter(item => Boolean(item.display));
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: ... M.png?dl=0

After enabling reference_slug: ... M.png?dl=0

Re: DataTable ColToggle

Posted: 12 Nov 2020, 10:56
by mert.sincan

Could you please try the following changes?

Code: Select all

<Column v-for="(c, index) in displayColumns" :key="c.field + '_' + index" ...
Best Regards,