Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Metronic 8 Vue - KTDataTable filter
Hi,
I`m trying to simplify your implementation of searching through table component.
<Datatable
:loading="loading"
:table-header="tableHeader"
:table-data="filterRows"
>and JS. Initially table is filled. Typing in search field and "consoling" tableData and temp gives me fine results -> temp is filtered tynamically. But why KTDataTable not decreasing number of rows while typing? Lauris can you look at it please? no console errors.
setup() {
const loading = ref<boolean>(true);
const tableHeader = ref([
// header keys
]);
const tableData = ref<Array<ITransaction>>([]);
const search = ref<string>("");
onMounted(() => {
getTransactions();
});
const filterRows = computed(() => {
if (search.value !== "") {
let temp: Array<ITransaction> = [];
console.log(tableData.value);
temp = tableData.value.filter((item) =>
item.acronym.includes(search.value)
);
console.log("temp:");
console.log(temp);
return temp;
} else {
return tableData.value;
}
});
const params = {
SalesRepresentativeId: [189, 315],
Start: "2022-04-21",
End: "2022-04-21",
};
const getTransactions = (): void => {
ApiService.postRequest("api/dev/transactions", params)
.then(({ data }) => {
tableData.value.splice(0, tableData.value.length, ...data);
loading.value = false;
})
.catch(({ response }) => {
console.log("API Request went wrong.");
});
};Replies (1)
Hi,
Overall logic looks fine and it should work.
Do you use v-model="search" on your field?
