@progress/kendo-spreadsheet-vue-wrapper
Version:
Kendo UI Spreadsheet wrapper for Vue.js
1,256 lines (1,249 loc) • 35.5 kB
Markdown
title: Sorting and Filtering
page_title: Sorting and Filtering - Spreadsheet - Kendo UI for Vue
description: "Sorting and filtering in Kendo UI Spreadsheet for Vue."
slug: sortingfiltering_spreadsheet
position: 2
# Sorting and Filtering
In order to enable sorting and filtering you can setup the `:filter-ref` and `:filter-columns` props as shown in the following demo. The `:filter-ref` prop defines which cells to be filtered and sorted. And the `:filter-columns` prop is dedicated for individual configurations per columns. You can read more about that in the [Kendo Spreadsheet API](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/configuration/sheets.filter#sheets.filter.columns).
{% meta height:680 %}
```html-preview
<div id="vueapp" class="vue-app">
<kendo-spreadsheet ref="spreadsheet">
<kendo-spreadsheet-sheet :name="'OrdersLog'"
:merged-cells="mergedCells"
:rows="rows"
:columns="columns"
:filter-ref="'A3:G49'"
:filter-columns="[]">
</kendo-spreadsheet-sheet>
</kendo-spreadsheet>
</div>
```
```js
Vue.use(SpreadsheetInstaller);
new Vue({
el: '#vueapp',
data: {
mergedCells: [
"A1:G1",
"A2:F2"
],
columns: [
{ width: 80 },
{ width: 100 },
{ width: 100 },
{ width: 150 },
{ width: 150 },
{ width: 130 },
{ width: 130 }
],
rows: [{
height: 50,
cells: [
{
value: "ORDERS LOG", background: "rgb(144,164,174)", textAlign: "center",
color: "white", fontSize: 18
}
]
},
{
cells: [
{
value: "REPORT", background: "rgb(176,190,197)", color: "white", textAlign: "right"
},
{
format: "MMM-dd", formula: "TODAY()", background: "rgb(176,190,197)", color: "white", index: 6
}
]
},
{
cells: [
{
value: "ID", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
},
{
value: "DATE", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
},
{
value: "TIME", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
},
{
value: "CLIENT", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
},
{
value: "COMPANY", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
},
{
value: "SHIPPING", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
},
{
value: "DISCOUNT", bold: "true", background: "rgb(236,239,241)", color: "black", textAlign: "center"
}
]
},
{
cells: [
{
value: 10223, textAlign: "center"
},
{
value: new Date("6/30/2014"), textAlign: "center"
},
{
value: new Date("6/30/2014 9:30"), format: "hh:mm", textAlign: "center"
},
{
value: "Terry Lawson", textAlign: "left"
},
{
value: "Excella", textAlign: "left"
},
{
value: "1 day", textAlign: "center"
},
{
value: 0.02, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10247, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 15:15"), format: "hh:mm", textAlign: "center"
},
{
value: "Charles Miller", textAlign: "left"
},
{
value: "Complete Tech", textAlign: "left"
},
{
value: "2 days", textAlign: "center"
},
{
value: 0.08, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10251, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 14:13"), format: "hh:mm", textAlign: "center"
},
{
value: "Jennie Walker", textAlign: "left"
},
{
value: "Plan Smart", textAlign: "left"
},
{
value: "2 days", textAlign: "center"
},
{
value: 0.10, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10226, textAlign: "center"
},
{
value: new Date("6/30/2014"), textAlign: "center"
},
{
value: new Date("6/30/2014 17:43"), format: "hh:mm", textAlign: "center"
},
{
value: "Samuel Green", textAlign: "left"
},
{
value: "Excella", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.08, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10227, textAlign: "center"
},
{
value: new Date("6/30/2014"), textAlign: "center"
},
{
value: new Date("6/30/2014 10:27"), format: "hh:mm", textAlign: "center"
},
{
value: "James Smith", textAlign: "left"
},
{
value: "Complete Tech", textAlign: "left"
},
{
value: "2 days", textAlign: "center"
},
{
value: 0.01, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10228, textAlign: "center"
},
{
value: new Date("6/30/2014"), textAlign: "center"
},
{
value: new Date("6/30/2014 11:12"), format: "hh:mm", textAlign: "center"
},
{
value: "Nora Allen", textAlign: "left"
},
{
value: "Plan Smart", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10229, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 13:56"), format: "hh:mm", textAlign: "center"
},
{
value: "Robyn Mason", textAlign: "left"
},
{
value: "Excella", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0.07, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10230, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 14:40"), format: "hh:mm", textAlign: "center"
},
{
value: "Ralph Burke", textAlign: "left"
},
{
value: "Plan Smart", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.06, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10231, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 8:25"), format: "hh:mm", textAlign: "center"
},
{
value: "Patty Prince", textAlign: "left"
},
{
value: "Integra Design", textAlign: "left"
},
{
value: "1 day", textAlign: "center"
},
{
value: 0.02, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10232, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 10:09"), format: "hh:mm", textAlign: "center"
},
{
value: "Natasha Green", textAlign: "left"
},
{
value: "Excella", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10233, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 12:54"), format: "hh:mm", textAlign: "center"
},
{
value: "James Smith", textAlign: "left"
},
{
value: "Complete Tech", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0.03, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10259, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 11:28"), format: "hh:mm", textAlign: "center"
},
{
value: "Francis Stevens", textAlign: "left"
},
{
value: "Plan Smart", textAlign: "left"
},
{
value: "2 days", textAlign: "center"
},
{
value: 0.08, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10235, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 18:22"), format: "hh:mm", textAlign: "center"
},
{
value: "Roger Peters", textAlign: "left"
},
{
value: "Integra Design", textAlign: "left"
},
{
value: "2 days", textAlign: "center"
},
{
value: 0.03, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10236, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 9:07"), format: "hh:mm", textAlign: "center"
},
{
value: "Nora Allen", textAlign: "left"
},
{
value: "Plan Smart", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0.02, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10224, textAlign: "center"
},
{
value: new Date("6/30/2014"), textAlign: "center"
},
{
value: new Date("6/30/2014 12:14"), format: "hh:mm", textAlign: "center"
},
{
value: "Scott Lewis", textAlign: "left"
},
{
value: "Circuit Design", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0.09, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10225, textAlign: "center"
},
{
value: new Date("6/30/2014"), textAlign: "center"
},
{
value: new Date("6/30/2014 14:58"), format: "hh:mm", textAlign: "center"
},
{
value: "Scott Fox", textAlign: "left"
},
{
value: "Zig Zag Coder", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0.10, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10239, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 17:20"), format: "hh:mm", textAlign: "center"
},
{
value: "Marian Rodriguez", textAlign: "left"
},
{
value: "Zig Zag Coder", textAlign: "left"
},
{
value: "1 day", textAlign: "center"
},
{
value: 0.06, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10240, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 8:04"), format: "hh:mm", textAlign: "center"
},
{
value: "Joe Lawrence", textAlign: "left"
},
{
value: "Complete Tech", textAlign: "left"
},
{
value: "2 days", textAlign: "center"
},
{
value: 0.07, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10241, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 10:49"), format: "hh:mm", textAlign: "center"
},
{
value: "Francis Stevens", textAlign: "left"
},
{
value: "Plan Smart", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10242, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 13:33"), format: "hh:mm", textAlign: "center"
},
{
value: "Lynda Evans", textAlign: "left"
},
{
value: "Complete Tech", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.05, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10243, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 16:18"), format: "hh:mm", textAlign: "center"
},
{
value: "Keith Clark", textAlign: "left"
},
{
value: "Circuit Design", textAlign: "left"
},
{
value: "1 day", textAlign: "center"
},
{
value: 0, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10244, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 19:02"), format: "hh:mm", textAlign: "center"
},
{
value: "Kara Wood", textAlign: "left"
},
{
value: "Excella", textAlign: "left"
},
{
value: "2 days", textAlign: "center"
},
{
value: 0, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10245, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 9:46"), format: "hh:mm", textAlign: "center"
},
{
value: "Juan Jacobs", textAlign: "left"
},
{
value: "Plan Smart", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.07, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10237, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 13:51"), format: "hh:mm", textAlign: "center"
},
{
value: "Samuel Green", textAlign: "left"
},
{
value: "Excella", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0.15, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10265, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 14:36"), format: "hh:mm", textAlign: "center"
},
{
value: "Alison Thompson", textAlign: "left"
},
{
value: "Circuit Design", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0.10, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10248, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 18:07"), format: "hh:mm", textAlign: "center"
},
{
value: "Jerry Wright", textAlign: "left"
},
{
value: "Integra Design", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.07, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10234, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 15:38"), format: "hh:mm", textAlign: "center"
},
{
value: "Nora Allen", textAlign: "left"
},
{
value: "Plan Smart", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.10, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10238, textAlign: "center"
},
{
value: new Date("6/29/2014"), textAlign: "center"
},
{
value: new Date("6/29/2014 14:36"), format: "hh:mm", textAlign: "center"
},
{
value: "Mark Moore", textAlign: "left"
},
{
value: "Webcom Services", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.09, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10246, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 12:31"), format: "hh:mm", textAlign: "center"
},
{
value: "Patty Prince", textAlign: "left"
},
{
value: "Integra Design", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.08, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10252, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 16:57"), format: "hh:mm", textAlign: "center"
},
{
value: "James Smith", textAlign: "left"
},
{
value: "Complete Tech", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0.02, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10253, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 18:42"), format: "hh:mm", textAlign: "center"
},
{
value: "Marian Rodriguez", textAlign: "left"
},
{
value: "Zig Zag Coder", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.01, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10254, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 9:46"), format: "hh:mm", textAlign: "center"
},
{
value: "Patty Prince", textAlign: "left"
},
{
value: "Integra Design", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10255, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 12:31"), format: "hh:mm", textAlign: "center"
},
{
value: "Jack Sims", textAlign: "left"
},
{
value: "Circuit Design", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10256, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 15:15"), format: "hh:mm", textAlign: "center"
},
{
value: "Hannah Watson", textAlign: "left"
},
{
value: "Excella", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.01, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10257, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 18:07"), format: "hh:mm", textAlign: "center"
},
{
value: "Gregory Morrison", textAlign: "left"
},
{
value: "Webcom Services", textAlign: "left"
},
{
value: "2 days", textAlign: "center"
},
{
value: 0.04, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10258, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 8:44"), format: "hh:mm", textAlign: "center"
},
{
value: "Joe Lawrence", textAlign: "left"
},
{
value: "Complete Tech", textAlign: "left"
},
{
value: "1 day", textAlign: "center"
},
{
value: 0, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10249, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 8:44"), format: "hh:mm", textAlign: "center"
},
{
value: "Edward Hall", textAlign: "left"
},
{
value: "Zig Zag Coder", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.08, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10260, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 14:13"), format: "hh:mm", textAlign: "center"
},
{
value: "Glenda White", textAlign: "left"
},
{
value: "Webcom Services", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.05, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10261, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 16:57"), format: "hh:mm", textAlign: "center"
},
{
value: "Lynda Evans", textAlign: "left"
},
{
value: "Complete Tech", textAlign: "left"
},
{
value: "1 day", textAlign: "center"
},
{
value: 0.01, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10262, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 8:48"), format: "hh:mm", textAlign: "center"
},
{
value: "Edward Hall", textAlign: "left"
},
{
value: "Zig Zag Coder", textAlign: "left"
},
{
value: "2 days", textAlign: "center"
},
{
value: 0.04, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10250, textAlign: "center"
},
{
value: new Date("7/1/2014"), textAlign: "center"
},
{
value: new Date("7/1/2014 11:28"), format: "hh:mm", textAlign: "center"
},
{
value: "Jerry Wright", textAlign: "left"
},
{
value: "Integra Design", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.08, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10264, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 13:51"), format: "hh:mm", textAlign: "center"
},
{
value: "Jerry Wright", textAlign: "left"
},
{
value: "Integra Design", textAlign: "left"
},
{
value: "2 days", textAlign: "center"
},
{
value: 0, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10263, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 9:07"), format: "hh:mm", textAlign: "center"
},
{
value: "Charles Miller", textAlign: "left"
},
{
value: "Complete Tech", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.10, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10266, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 17:20"), format: "hh:mm", textAlign: "center"
},
{
value: "Alison Ross", textAlign: "left"
},
{
value: "Excella", textAlign: "left"
},
{
value: "express", textAlign: "center"
},
{
value: 0.02, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10267, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 8:04"), format: "hh:mm", textAlign: "center"
},
{
value: "Alexandra Kennedy", textAlign: "left"
},
{
value: "Webcom Services", textAlign: "left"
},
{
value: "regular", textAlign: "center"
},
{
value: 0.05, format: "0%", textAlign: "center"
}
]
},
{
cells: [
{
value: 10268, textAlign: "center"
},
{
value: new Date("7/2/2014"), textAlign: "center"
},
{
value: new Date("7/2/2014 10:49"), format: "hh:mm", textAlign: "center"
},
{
value: "Agnes Hill", textAlign: "left"
},
{
value: "Integra Design", textAlign: "left"
},
{
value: "1 day", textAlign: "center"
},
{
value: 0, format: "0%", textAlign: "center"
}
]
}]
},
mounted () {
var spreadsheet = this.$refs.spreadsheet.kendoWidget();
spreadsheet.element.css('height', '450px');
spreadsheet.element.css('width', '100%');
spreadsheet.resize();
}
})
```
{% endmeta %}
## Suggested Links
* [Kendo UI DataSource Component](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource)
* [Kendo UI Spreadsheet for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/overview)
* [API Reference of the Spreadsheet Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet)