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.");
});
};

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

Hi,

Overall logic looks fine and it should work.

Do you use v-model="search" on your field?

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(