I've been busy working on implementing table filtering in Vue.js. So far, I have successfully filtered the table by name and date. However, I'm now facing a challenge with adding another filter along with them.
If you want to check out my current progress, feel free to visit this CodePen link.
This is how my computed property looks like:
filterItem() {
let filterClient = this.selectedClient;
let startDate = this.localizeDate(this.startDate);
let endDate = this.localizeDate(this.endDate);
let filterBranch = this.selectedBranch;
const itemsByClient = filterClient
? this.salesReport.filter((item) => item.client_name === filterClient) && item.business_branch=== filterBranch)
: this.salesReport;
return itemsByClient.filter((item) => {
const itemDate = new Date(item.date);
if (startDate && endDate) {
return startDate <= itemDate && itemDate <= endDate;
}
if (startDate && !endDate) {
return startDate <= itemDate;
}
if (!startDate && endDate) {
return itemDate <= endDate;
}
return true;
});
},
Currently, it works when both name and business branch are provided. However, I aim to enhance the functionality to allow for filtering data with or without a name.
For instance, if a client is selected, only the rows related to that client should be displayed. Similarly, if a branch is selected (leaving other fields empty), the table should show the rows associated with the chosen branch.