The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

Datatable sorting


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


G
Guest 10 months ago
HTML
8 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (8)

user
Faizal Author 10 months ago

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


user
Faizal Author 10 months ago

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

npm install @keenthemes/ktui@latest

Thanks


G
Guest 10 months ago

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.


 
Deleted comment
G
Guest 10 months ago

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.


user
Faizal Author 10 months ago

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>.


G
Guest 10 months ago

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>


user
Faizal Author 10 months ago

Hi,

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

Thanks


G
Guest 10 months ago

Hi,

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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation