I have columns in my table that are dates. They're presented to the user in MMM YYYY
(e.g. JAN 2020
) format. I want the user to be able to filter based on those months and years - if they type "Jan" they should get all the January rows, etc. Same for years.
According to the Vuetify documentation for Data Tables:
You can override the default filtering used with
search
prop by supplying a function to thecustom-filter
prop. If you need to customize the filtering of a specific column, you can supply a function to thefilter
property on header items. The signature is(value: any, search: string | null, item: any) => boolean
. This function will always be run even ifsearch
prop has not been provided. Thus you need to make sure to exit early with a value oftrue
if filter should not be applied.
I have a couple of headers that call supply the filterDate function as required:
{
text: "Contract Delivery",
value: "contractDate",
align: "center",
sortable: true,
filter: this.filterDate
},
{
text: "Nominal Delivery",
value: "targetDeliveryDate",
align: "center",
sortable: true,
filter: this.filterDate
},
... and the function itself:
const formatter = new Intl.DateTimeFormat("en-us", {
year: "numeric",
month: "short"
});
export default {
// ... other stuff redacted
methods: {
filterDate(dateString, search) {
// dateString is a string from the database, not a handy month and year
if (dateString == null || search == null || search == "") return true;
let month = "";
let year = "";
formatter
.formatToParts(new Date(dateString)) // make it a date and get the bits
.map(({ type, value }) => {
switch (type) {
case "month":
this.month = value.ToLowerCase();
break;
case "year":
this.year = value;
break;
});
return month.indexOf(search.toLowerCase()) !== -1 || year.indexOf(search) !== -1
});
}
}
}
... but this obviously doesn't work - and I can't make it work even if I make the entire formatDate
just return true
. I'm at a loss.