I am trying to add different features to my table using the Datatable of Primevue, but am unable to do so.
My code is
Code: Select all
<template>
<div class="tableView">
<DataTable :value="data" showGridlines class="p-datatable-lg" responsiveLayout="scroll" >
<Column v-for="col in columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>
<el-button type="warning" round @click="togtab">Toggle-Table</el-button>
</div>
</template>
<script>
import DataTable from '../../node_modules/primevue/datatable';
import Column from '../../node_modules/primevue/column';
import ColumnGroup from '../../node_modules/primevue/columngroup';
import Row from '../../node_modules/primevue/row';
export default {
name: 'TableComp',
props:['data'],
data() {
return {
columns:[]
};
},
components: {
DataTable,
Column
},
methods: {
togtab(){
for (let i=0; i< Object.keys(this.data).length ;i++ ){
this.columns[i] = {field: Object.keys(this.data[0])[i], header: Object.keys(this.data[0])[i]}
}
console.log(this.columns)
}
}
}
</script>
Am I importing the libraries incorrectly? What am I doing wrong?
I am new to primevue so any suggestions are appreciated.