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 (3)
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 tried `data-kt-orderable="false"`, without success. The only thing I found in the docs is `data-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 the `columns` object in the config. The keys of `columns` seem to have to match the backend fields for pagination. So `data-kt-datatable-column` is probably unrelated to the keys of `configuration.columns`. This is very confusing, as the documentation claims `Used 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.
