Currently, I am attempting to incorporate grids into my data table using primevue library. However, despite following the provided example at https://www.primefaces.org/primevue/datatable/dynamiccolumns, the gridlines are not appearing on the table.
The code snippet is as follows:
<template>
<div class="tableView">
<DataTable :value="data" showGridlines 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>
In addition, here's the script tag content:
<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>
After running the code, only the plain table appears without any gridlines: https://i.sstatic.net/8pLPz.png Any assistance on identifying what might be wrong would be highly appreciated.