How to disable sorting a column in KTUI Datatable?
I am using https://ktui.io/docs/datatable
I want to avoid that some columns are sortable.
Simply removing the sort span does not work, the column is still clickable:
<tr>
<th scope="col" class="w-30" data-kt-datatable-column="label">
<span class="kt-table-col"
><span class="kt-table-col-label">Label</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th scope="col" class="w-20" data-kt-datatable-column="method">
<span class="kt-table-col"
><span class="kt-table-col-label">Method</span
><!-- this should not be sortable -- >
</th>I found at the docs https://ktui.io/docs/datatable#selectors that there is the selector
data-kt-datatable-column-sort but I don't understand how its supposed to work. In the code examples I don't see them and applying data-kt-datatable-column-sort='false' has no impact.
Replies (4)
<th class="text-end" data-kt-datatable-column="actions" >
<span class="kt-table-col-label">Actions</span>
</th> this seemed to work
remove the
<span class="kt-table-col">
<span class="kt-table-col-sort"></span>
Hi
Sorry, you can ignore my previous answer. The correct attribute is data-kt-datatable-column-sort="false". We did update to Ktui GitHub: https://github.com/keenthemes/ktui/commit/c06039eced883e0309500f134a7f7be5f2e97ed8
Or you can use this second method. You can completely remove the sort-related structure:
<th scope="col" class="w-20" data-kt-datatable-column="method">
<span class="kt-table-col-label">Method</span>
<!-- No kt-table-col wrapper or sort span -->
</th>Try Method 1 first with data-kt-datatable-column-sort="false". If that doesn't work, use Method 2 by removing the sort span structure completely. The sorting logic checks for this specific attribute to disable sorting.
Hi Adam Nielsen
When initializing the datatable with JavaScript, use the orderable property in the column configuration:
Method 1: Using Column Configuration (Recommended)
const datatable = new KTDatatable("#kt_datatable_example_1", {
columns: {
label: {
title: "Label",
orderable: false // This disables sorting for this column
},
method: {
title: "Method",
orderable: false // This disables sorting for this column
},
// Other columns can remain sortable by default
status: {
title: "Status"
// orderable: true (default)
}
}
});Method 2: Using HTML Data Attributes
You can also use the data-orderable="false" attribute on the <th> element:
<th scope="col" class="w-30" data-kt-datatable-column="label" data-orderable="false">
<span class="kt-table-col">
<span class="kt-table-col-label">Label</span>
<!-- Remove the sort span for non-sortable columns -->
</span>
</th>
<th scope="col" class="w-20" data-kt-datatable-column="method" data-orderable="false">
<span class="kt-table-col">
<span class="kt-table-col-label">Method</span>
<!-- No sort span needed for non-sortable columns -->
</span>
</th>Remove Sort Spans: For non-sortable columns, you should remove the <span class="kt-table-col-sort"></span> element from the HTML to prevent visual confusion.
Column Order: The data-kt-datatable-column attribute should match the field names in your data structure.
Visual Feedback: Non-sortable columns won't show the sort icons and won't be clickable when properly configured.
How does the HTML markup look in your first case?
If I render a table without any <th>, nothing is displayed.
I don’t fully understand how columns in the configuration interact with the HTML.
- If I add
label: { title: ... }in JS, the title never shows up. It doesn’t override an existing<th>, and it also doesn’t appear if there is no<th>. - The attribute
data-orderable="false"has no effect. I also trieddata-kt-orderable="false", without success. The only thing I found in the docs isdata-kt-datatable-column-sortable, but that also doesn’t work. - I also don’t understand the purpose of
data-kt-datatable-column. From what I see, it seems to be used when clicking on a column and sending the search parameter to the backend. But it doesn’t look related to thecolumnsobject in the config. The keys ofcolumnsseem to have to match the backend fields for pagination. Sodata-kt-datatable-columnis probably unrelated to the keys ofconfiguration.columns. This is very confusing, as the documentation claimsUsed on <th> elements to identify columns..
The only way I managed to disable sorting yet is by removing data-kt-datatable-column from the <th> and stripping out the <span class="kt-table-col">…</span> wrapper (including <span class="kt-table-col-sort"></span>).
This feels more like a hack, and I’m confused about the intended way. I would prefer to use Colum Configuration only, if possible. Maybe you can clarify by also showing the HTML markup for scenario 1.
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
