Sizes In addition to the regular table, a smal and a large version are available with different paddings. For a table with smaller paddings use p-datatable-sm class and for a larger one use p-datatable-lg. <DataTable :value="cars" class="p-datatable-sm"> <template #header> Small Table </template> <Column field="vin" header="Vin"></Column> <Column field="year" header="Year"></Column> <Column field="brand" header="Brand"></Column> <Column field="color" header="Color"></Column> </DataTable> <DataTable :value="cars"> <template #header> Normal Table </template> <Column field="vin" header="Vin"></Column> <Column field="year" header="Year"></Column> <Column field="brand" header="Brand"></Column> <Column field="color" header="Color"></Column> </DataTable> <DataTable :value="cars" class="p-datatable-lg"> <template #header> Large Table </template> <Column field="vin" header="Vin"></Column> <Column field="year" header="Year"></Column> <Column field="brand" header="Brand"></Column> <Column field="color" header="Color"></Column> </DataTable>

https://primetek.hashnode.dev/vue3-datatable

https://thewebdev.info/2020/12/30/vue-3-development-with-the-primevue-framework%E2%80%8A-%E2%80%8Atable-styles/Table Cell Size We can change table cell sizes with classes provided by PrimeVue. For instance, we can write: <template> <div> <DataTable :value="cars" class="p-datatable-sm"> <Column field="vin" header="Vin"> </Column> <Column field="year" header="Year"></Column> <Column field="brand" header="Brand"></Column> <Column field="color" header="Color"></Column> </DataTable> </div> </template> <script> export default { name: "App", data() { return { cars: [ { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" }, { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" }, { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" }, ], }; }, methods: {}, }; </script> We add the p-datatable-sm to make the cells extra small. Also, we can add p-datatable-lg to make the cells extra large. Table Grid Lines We can add table gridlines to cells by writing: <template> <div> <DataTable :value="cars" class="p-datatable-gridlines"> <Column field="vin" header="Vin"> </Column> <Column field="year" header="Year"></Column> <Column field="brand" header="Brand"></Column> <Column field="color" header="Color"></Column> </DataTable> </div> </template> <script> export default { name: "App", data() { return { cars: [ { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" }, { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" }, { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" }, ], }; }, methods: {}, }; </script> The p-datatable-gridlines lets us add the gridlines. Striped Table Rows We can make the table rows striped by adding the p-datatable-striped class: <template> <div> <DataTable :value="cars" class="p-datatable-striped"> <Column field="vin" header="Vin"> </Column> <Column field="year" header="Year"></Column> <Column field="brand" header="Brand"></Column> <Column field="color" header="Color"></Column> </DataTable> </div> </template> <script> export default { name: "App", data() { return { cars: [ { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" }, { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" }, { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" }, ], }; }, methods: {}, }; </script> 08.03.26

https://thewebdev.info/2020/12/30/vue-3-development-with-the-primevue-framework%E2%80%8A-%E2%80%8Atable-styles/

• Home
• Notebook
• Contact us

• Privacy Statement
• 

Copyleft ☠ 2026