Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and used with metaKey.
Use metakey to add a column to the sort selection.
<div class="card">
<h5>Single Column</h5>
<DataTable :value="products">
<Column field="code" header="Code" sortable="true"></Column>
<Column field="name" header="Name" sortable="true"></Column>
<Column field="category" header="Category" sortable="true"></Column>
<Column field="quantity" header="Quantity" sortable="true"></Column>
<Column field="price" header="Price" sortable="true">
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Multiple Columns</h5>
<p>Use metakey to add a column to the sort selection.</p>
<DataTable :value="products" sortMode="multiple">
<Column field="code" header="Code" sortable="true"></Column>
<Column field="name" header="Name" sortable="true"></Column>
<Column field="category" header="Category" sortable="true"></Column>
<Column field="quantity" header="Quantity" sortable="true"></Column>
<Column field="price" header="Price" sortable="true">
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Presort</h5>
<DataTable :value="products" sortField="category" :sortOrder="-1">
<Column field="code" header="Code" sortable="true"></Column>
<Column field="name" header="Name" sortable="true"></Column>
<Column field="category" header="Category" sortable="true"></Column>
<Column field="quantity" header="Quantity" sortable="true"></Column>
<Column field="price" header="Price" sortable="true">
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Removable Sort</h5>
<DataTable :value="products" removableSort>
<Column field="code" header="Code" sortable="true"></Column>
<Column field="name" header="Name" sortable="true"></Column>
<Column field="category" header="Category" sortable="true"></Column>
<Column field="quantity" header="Quantity" sortable="true"></Column>
<Column field="price" header="Price" sortable="true">
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</div>
import ProductService from '../../service/ProductService';
export default {
data() {
return {
products: null
}
},
productService: null,
created() {
this.productService = new ProductService();
},
mounted() {
this.productService.getProductsSmall().then(data => this.products = data);
},
methods: {
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
}
}