Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Tailwind Metronic Datatable with search


Below is my html code and also javascript. The search box didt apear and when initialize, the script got error. May i know wat problem is this?

Below is my javascript error, html code and javascript

Image : https://ibb.co/3MYNqZm

Metronic Tailwind Document : https://keenthemes.com/metronic/tailwind/docs/components/datatable


<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
Static DataTable

<label class="switch switch-sm">
<input checked="" class="order-2" name="check" type="checkbox" value="1"/>
<span class="switch-label order-1">
Push Alerts
</span>
</label>
</div>
<div class="card-body">
<div data-datatable="false" id="my_datatable" data-datatable-page-size="5"
data-datatable-state-save="true">
<div class="scrollable-x-auto">
<table id="" class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th class="w-[100px] text-center">
<span class="sort asc">
<span class="sort-label">
Status
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[185px]">
<span class="sort">
<span class="sort-label">
Last Session
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[185px]">
<span class="sort">
<span class="sort-label">
Label
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[185px]">
<span class="sort">
<span class="sort-label">
<span class="pt-px" data-tooltip="true" data-tooltip-offset="0, 5px" data-tooltip-placement="top">
<i class="ki-outline ki-information-2 text-lg leading-none">
</i>
<span class="tooltip max-w-48" data-tooltip-content="true">
Merchant account providers
</span>
</span>
Method
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[60px]">
</th>
<th class="w-[60px]">
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
6 Aug, 2024
</td>
<td>
HR Dept
</td>
<td>
Basic auth
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>




const datatableEl = document.querySelector("#my_datatable");
const options = {
search: {
/**
* Delay in milliseconds before the search function is applied to the data array
* @default 500
*/
delay: 500, // ms
/**
* Local search callback function
* Filters the data array based on the search string
* @param data Data array to be filtered
* @param search Search string used to filter the data array
* @returns Filtered data array
*/
callback: (data: T[], search: string): T[] => {
if (!data || !search) {
return [];
}

return data.filter((item: T) => {
if (!item) {
return false;
}

return Object.values(item).some((value: string | number | boolean) => {
if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") {
return false;
}

const valueText = String(value).replace(/<[^>]*>| /g, "").toLowerCase();
return valueText.includes(search.toLowerCase());
});
});
}
},
};
const datatable = new KTDataTable(datatableEl, options);


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 (5)


Hi

Here's how you can add a search input to your Datatable:


<div>
<input type="text" class="input input-sm pl-8" placeholder="Search.." data-datatable-search="true">
<table >
<!-- Your table content here -->
</table>
</div>

<script>
const datatableEl = document.querySelector("#my_datatable");
const options = {
pageSize: 5,
stateSave: true
};

const datatable = new KTDataTable(datatableEl, options);

const searchElement = document.querySelector("[data-datatable-search="true"]");

if (datatable && searchElement) {
const search = () => {
datatable.search(searchElement.value);
};
searchElement.addEventListener("keyup", search);
}
</script>


This setup allows you to create a custom search input. When the user types in the input field, the `keyup` event triggers the `search` function, filtering the data in the datatable based on the input value.



hi, can u give me an example on how to add search into datatable?

for eg
<div>
<table >
bla bla bla
</table>
</div>


<script>
const datatableEl = document.querySelector('#my_datatable');
const options = {
pageSize: 5,
stateSave: true
};
const datatable = new KTDataTable(datatableEl, options);

</script>



Hi,

Could you share the exact error message from that line?
Did the error originate from your IDE or the browser?

Thanks



The error is from IDE


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  :(