DataTable ColToggle

UI Components for Vue
Post Reply
chuckbeats
Posts: 5
Joined: 03 Apr 2020, 07:03

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.

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>
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:
https://www.dropbox.com/s/08yqbi5tzfo8 ... M.png?dl=0

After enabling reference_slug:
https://www.dropbox.com/s/t9rd2l3ipnfnr ... M.png?dl=0

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

12 Nov 2020, 10:56

Hi,

Could you please try the following changes?

Code: Select all

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

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests