Vue 3 Development with the PrimeVue Framework — Table Styles

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

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>

Table Column Group

We can group table columns together with the ColumnGroup component:

<template>
  <div>
    <DataTable :value="cars" class="p-datatable-striped">
      <ColumnGroup type="header">
        <Row>
          <Column header="Vin" :rowspan="1"></Column>
          <Column header="Specs" :colspan="3"></Column>
        </Row>
      </ColumnGroup>
      <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 type='header' prop to replace the default column headers with the ColumnGroup header.

Conclusion

We can add tables with various styles into our Vue 3 app with PrimeVue.