Mastering Vue 3 with PrimeVue: Dynamic Table Features Explained
Written on
Chapter 1: Introduction to PrimeVue
PrimeVue serves as a versatile UI framework designed specifically for Vue 3 applications. In this piece, we will explore the essentials of developing applications with PrimeVue, focusing on how to toggle and reorder table columns.
Section 1.1: Adding Toggle Functionality to Table Columns
To enhance user interaction, we can incorporate a multi-select dropdown that allows users to toggle table columns on or off. Here’s a basic implementation:
<template>
<div>
<DataTable :value="cars">
<template #header>
<div style="text-align: left">
- <MultiSelect
:modelValue="selectedColumns" :options="columns"
optionLabel="header"
@update:modelValue="onToggle"
placeholder="Select Columns"
style="width: 20em"
/>
</div>
</template>
<Column
v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="${col.field}_${index}"></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" },
],
selectedColumns: [],
columns: [
{ field: "vin", header: "VIN" },
{ field: "year", header: "Year" },
{ field: "color", header: "Color" },
{ field: "brand", header: "Brand" },
],
};
},
methods: {
onToggle(value) {
this.selectedColumns = this.columns.filter((col) => value.includes(col));},
},
created() {
this.selectedColumns = this.columns;},
};
</script>
We utilize the update:modelValue event to filter out disabled columns based on user selection.
Section 1.2: Making Columns Resizable
To allow for dynamic resizing of columns, we can enable the resizableColumns property in our DataTable component:
<template>
<div>
- <DataTable
:value="cars" :resizableColumns="true"
columnResizeMode="fit"
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>
By setting the resizableColumns property to true and using columnResizeMode="fit", we ensure that columns adjust to fit their content seamlessly.
Chapter 2: Reordering Table Rows and Columns
Next, we will explore how to implement the functionality to reorder table rows:
<template>
<div>
- <DataTable
:value="cars" :reorderableColumns="true"
@column-reorder="onColReorder"
@row-reorder="onRowReorder"
>
- <Column
:rowReorder="true"
headerStyle="width: 3rem" :reorderableColumn="false"
/>
<Column
v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></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" },
],
columns: [
{ field: "vin", header: "VIN" },
{ field: "year", header: "Year" },
{ field: "color", header: "Color" },
{ field: "brand", header: "Brand" },
],
};
},
methods: {
onColReorder() {},
onRowReorder(event) {
this.cars = event.value;},
},
};
</script>
We capture reordered items through the event.value property, enabling us to maintain an updated list of cars.
Conclusion
Utilizing PrimeVue allows for the dynamic toggling and reordering of table rows and columns, enhancing user experience significantly.
In this video, learn how to toggle table columns in Vue 3 with Laravel and Vue 3.
Watch this tutorial to create an animated, responsive sidebar menu using Vue JS, Vue Router, SCSS, and Vite in 2022.