Primevue Data table styling not working in Vue3

Question

So I am trying to add grids to my data table using primevue. But for some reason the table is bot showing grids. I am following the example given here https://www.primefaces.org/primevue/datatable/dynamiccolumns.

My code is:

<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>

and script tag is as follows:

<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>

In the output I can see just the table I will be very grateful if someone could let me know what am I doing incorrectly?

skr · Accepted Answer · 2022-06-15 01:22:54Z

0

Make sure you're importing the PrimeVue CSS dependencies

primevue/resources/themes/saga-blue/theme.css       //theme
primevue/resources/primevue.min.css                 //core css
primeicons/primeicons.css                           //icons

you're free to choose any theme, they're listed in the docs, but picking one is required

edited Jun 15, 2022 at 1:22

skr

1,8411 gold badge20 silver badges49 bronze badges

answered Jun 10, 2022 at 21:30

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

harsh panday Over a year ago

Yes I am importing them as well, it's still not working

Mr.P Over a year ago

same here ... I imported them all ... I got the components and icons .. but classes are not applied ... when checked the primevue.min.css it says

/**  * The primevue[.min].css has been deprecated. In order not to break existing projects, it is currently included in the build as an empty file.  */

... could that be the issue?

yoduh Over a year ago

The question and answer are both outdated. Always follow the latest instructions in the documentation. As of today, you only need the theme CSS import

Mr.P Over a year ago

tbh @yoduh the documentation is a bit misleading.. check the video tutorial at the bottom of the page ... they specifically mention (check the 4:33) the primevue.min.css ... however, your reply here worked well :) linking it here for the others too stackoverflow.com/questions/77614800/…

Collectives™ on Stack Overflow

Primevue Data table styling not working in Vue3

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related