Vue 3 Development with the PrimeVue Framework — Scrolling Table, Expandable Rows, and Editable Table Cells

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.

Scrolling Table

We can make the table scrollable with the scrollable and scrollHeight props.

For example, we can write:

<template>
  <div>
    <DataTable
      :value="cars"
      scrollable
      scrollHeight="200px"
    >
      <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>
const seed = [
  { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
  { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
  { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
];
let cars = [...seed];
for (let i = 1; i <= 100; i++) {
  cars.push(...seed);
}

export default {
  name: "App",
  data() {
    return {
      cars,
    };
  },
  methods: {},
};
</script>

We can freeze one or more rows with the frozenValue prop:

<template>
  <div>
    <DataTable
      :value="cars"
      scrollable
      scrollHeight="200px"
      :frozenValue="frozenValue"
    >
      <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>
const seed = [
  { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
  { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
  { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
];
let cars = [...seed];
for (let i = 1; i <= 100; i++) {
  cars.push(...seed);
}

export default {
  name: "App",
  data() {
    return {
      cars,
      frozenValue: [seed[0]],
    };
  },
  methods: {},
};
</script>

Expandable Table Rows

We can add expandable table rows with the expander prop:

<template>
  <div>
    <DataTable
      :value="cars"
      v-model:selection="selectedCars"
      v-model:expandedRows="expandedRows"
      dataKey="vin"
      [@row](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Frow "Twitter profile for @row")-expand="onRowExpand"
      [@row](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Frow "Twitter profile for @row")-collapse="onRowCollapse"
    >
      <Column :expander="true" headerStyle="width: 3rem" />
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"></Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
      <template #expansion="slotProps">
        <div>
          <h5>{{ slotProps.data.vin }}</h5>
        </div>
      </template>
    </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" },
      ],
      expandedRows: [],
    };
  },
  methods: {
    onRowExpand() {
      console.log("expanded");
    },
    onRowCollapse() {
      console.log("collapsed");
    },
  },
};
</script>

The expansion slot has the content for the expanded row.

slotProps.data has the table row data.

We can listen to the row-expand and row-collapse events to listen to event emitted when rows are expanded and collapsed.

The expandedRows reactive property has the expanded rows since we bound with v-model .

Editable Table Cells

We can make table cells editable by populating the editor slot:

<template>
  <div>
    <DataTable :value="cars" editMode="cell">
      <Column field="vin" header="Vin">
        <template #editor="slotProps">
          <InputText v-model="slotProps.data[slotProps.column.props.field]" />
        </template>
      </Column>
      <Column field="year" header="Year">
        <template #editor="slotProps">
          <InputText v-model="slotProps.data[slotProps.column.props.field]" />
        </template>
      </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 cell’s value is stored in the slotProps.data[slotProps.column.props.field] variable.

Conclusion

We can add scrolling, expandable rows, and editable table cells into our Vue 3 app with PrimeVue.