Column always added to end when using dynamic columns

UI Components for Vue
Post Reply
Posts: 9
Joined: 19 Sep 2019, 13:32

24 Aug 2020, 23:55

I have a table the display several columns and one of the columns is only displayed under certain conditions. I want that column to be in the middle of the table, but when the table re-renders, it always displays at the end. I have a jsfiddle example below to show what I mean. How do I prevent this from happening?

Posts: 9
Joined: 19 Sep 2019, 13:32

25 Aug 2020, 22:52

I was able to solve on my own. Per Vue Documentation at :
Mutation methods, as the name suggests, mutate the original array they are called on. In comparison, there are also non-mutating methods, e.g. filter(), concat() and slice(), which do not mutate the original array but always return a new array. When working with non-mutating methods, you can replace the old array with the new one:

Code: Select all

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
You might think this will cause Vue to throw away the existing DOM and re-render the entire list - luckily, that is not the case. Vue implements some smart heuristics to maximize DOM element reuse, so replacing an array with another array containing overlapping objects is a very efficient operation.
So the solution was to force the table to re-render. I was able to do so using the key-changing method described here to force the table to re-render when replacing the array that contains the list of columns for the table

Posts: 18430
Joined: 05 Jan 2009, 00:21
Location: Cybertron

10 Oct 2020, 18:17

This is more like related to Vue Reactivity, please see;

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests