New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Datatable sorting


I am using ktui datatables but in my case sorting is not working why??


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


Hi

Please check the examples here.

https://github.com/keenthemes/ktui/tree/main/examples/datatable

May I know if you use a local or remote data source?

Thanks



Please check the package.json and verify the KTUI version. Please try to update to the latest version.

npm install @keenthemes/ktui@latest

Thanks



Thanks for the update.
I’ve checked, and the current KTUI theme version is 1.0.25. I tried updating, but unfortunately, the sorting functionality is still not working even with this version.



Sorting issues in KTUI Datatables usually happen when the table data isn’t properly initialized or when dynamic content is loaded after the table is rendered.

Try calling the reinitialization function after loading or updating your data, like:

KTDatatable.init();


Also, make sure your column headers have the correct data-sort attributes, and that the table isn’t inside a hidden tab or container when it's initialized, as that often breaks sorting.

I’ve shared some performance tools and troubleshooting guides that might help:



Thanks for the pointers! I’ve already tried reinitializing and checked the data-sort attributes, but the sorting issue still persists. I’ll review the guides you shared and see if I missed anything.



Hi

sorting isn’t working because the <th> headers lack the required kt-table-col wrapper with kt-table-col-sort and the data-kt-datatable-column is set to a name incompatible with the data structure.

<th scope="col" data-kt-datatable-column="course_name">
<span class="kt-table-col">
<span class="kt-table-col-label">Course Name</span>
<span class="kt-table-col-sort"></span>
</span>
</th>


Wrap the label and icon in <span class="kt-table-col">.
Place the label in <span class="kt-table-col-label">.
Add <span class="kt-table-col-sort"> for sorting icons.
data-kt-datatable-column must match your data keys.
If sorting isn’t needed, set data-kt-datatable-column-sort="false" on the <th>.



HEllo ,

Same I have implemented in my code but not working, if i copy paste code from here https://ktui.io/docs/datatable but also not working sorting.

here is the code
<th scope="col" class="w-30" data-kt-datatable-column="course_name">
<span class="kt-table-col">
<span class="kt-table-col-label">Course Name</span>
<span class="kt-table-col-sort">
</span>
</span>
</th>



Hi,

Please share your code in https://gist.github.com/

Thanks



Hi,

I have share the code here - https://gist.github.com/bhagyashri-gfi/51a83d9b10d126dea73223baeb83392f


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