DataTable Column array of objects.

UI Components for Vue
Post Reply
davelindley
Posts: 1
Joined: 14 Apr 2020, 23:27

14 Apr 2020, 23:53

Hi all,

I have the following data structure:

Code: Select all

data(){
	return{
		teams:[
				{
				attr0:'hello',
				attr1:'world',
				attr2:[
				{name:'Barry', id:1},
				{name:'Larry', id:2},
				{name:'Bob', id:3}
					]
				},
				{
				attr0:'goodbye',
				attr1:'pluto',
				attr2:[
				{name:'Jake', id:4},
				{name:'Tim', id:5},
				{name:'Dave', id:6}
					]
				}
			]
		}
	}
I have a dataset up as:

Code: Select all

<DataTable :value="teams">
	<Column field="attr0">
	<Column field="attr1">
	<Column field="attr2"> <-- THIS IS THE ONE I AM TALKING ABOUT -->
</DataTable>
Which gives me the full array of objects as the cell values for attr2.

Ideally I am looking for the output: "Barry, Larry, Bob" but would also be fine with ['Barry', 'Larry', 'Bob'].

Is it possible to modify the column values for display?

This will be updated via a modal which contains a MultiSelect element in another part of the application, so the array of objects structure needs to stay.

cagatay.civici
Prime
Posts: 18264
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

17 Apr 2020, 15:03

Please try;

Code: Select all

<DataTable :value="teams">
	<Column field="attr0">
	<Column field="attr1">
	<Column v-for="col of attr2" :field="col.name" :key="col.name">
</DataTable>
attr2 is an array so you need a v-for to generate Columns from attr2. Here is an example with dynamic columns;

https://primefaces.org/primevue/showcas ... miccolumns

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest