DataTable - There are 2 arrow icons on a column ordered but non-orderable
Hi,
In want to sort data by a default column and prevent user from changing it. That means, NO column in my table is sortable .
Please try it on your example
https://preview.keenthemes.com/html/metronic/docs/general/datatables/server-side
You are sorting by 5th column by order: [[5, 'desc']]
Please prevent the sort from changing of all columns by the below code
columns: [
{ data: 'RecordID', orderable: false },
{ data: 'Name', orderable: false },
{ data: 'Email', orderable: false },
{ data: 'Company', orderable: false },
{ data: 'CreditCardNumber', orderable: false },
{ data: 'Datetime', orderable: false },
{ data: null, orderable: false },
]
After table is drawed, you will see, under the arrow icon on the 5th column, there is another arrow icon which should be hidden.
Thanks
Replies (14)
Hi Sean,
Sorry for late response.
1. Yes, my Metronic version is the latest v8.1.8
2. Here is my code
https://jsfiddle.net/cungo_bu/o5amnrzd/14/
You can see, it works well with DataTables layout.
Please notice order: [[5, 'desc']] and { data: 'Datetime', title: 'Datetime', orderable: false }
I discover that the root cause is scrollX: true . If I get rid of it, the Metronic layout is good. However, I really want to keep the horizontal scrollbar.
Thanks
Hi,
Noted, let us check it further by enabling scrollX: true and come back to you with a workaround. I will update you once we have a solution in a few days.
Regards.
Hi,
It seems this is a mixed Datatable and Metronic's issue. By right Datatable should not leave sorting_asc and sorting_desc classes on the unsorted cell. Metronic just globally overrides the datatable cell padding.
You can use below workaround to fix this issue for the scrollable datatable:
1) In src/sass/vendors/plugins/_datatables.scss edit line 212:
<pre dir="scss">
// Scroll
div.dataTables_scrollBody {
border-left: 0 !important;
.sorting_disabled.sorting_asc,
.sorting_disabled.sorting_desc {
&:after {
display: none !important;
}
}
}
</pre>
2. If you have the table header cell alignment issue, in the HTML set pe-* class to the default ordered/disable cell as per gs-* set the table:
<table class="table table-striped gy-5 gs-7">
<thead>
<tr class="fw-semibold fs-6 text-gray-800">
<th class="pe-7">Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<body>
</tbody>
</table>Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Please give it a try and let us know the result.
Regards.
Hi Sean,
Sorry for late response, quite busy these days.
Yeah, your fix can get grid of the redundant arrow as expected.
Could you please add this fix into the next update?
Thanks
Hi,
Glad to hear that. We will include it in the next update v8.1.9 in a few weeks.
Regards.
Your Support Matters!
Sorry,
Because the order base is 0, not 1 so the bug happens in 6th column, not 5th column as I mentioned above.
Thanks
Hi,
Have you managed to fix it or do you still need our help?
Regards.
Hi Sean,
I still need your help. It is a layout bug regarding css.
Thanks
Hi,
Can you replace the code in src/sass/vendors/plugins/_datatables.scss
and change the sorting cell styles as shown below:
table.dataTable > thead {
.sorting_disabled,
.sorting {
&:after,
&:before {
display: none !important;
}
}
.sorting_asc:not(.sorting_disabled),
.sorting_desc:not(.sorting_disabled) {
vertical-align: middle;
&:before,
&:after {
position: relative !important;
opacity: 1 !important;
display: inline-block !important;
width: 0.75rem;
height: 0.75rem;
content: " " !important;
//top: 50%;
bottom: auto;
right: auto !important;
left: auto;
margin-left: 0.5rem;
}
&:before {
display: none !important;
}
}
}You can refer to this to get the full code.
Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Regards.
Hi Sean,
Tried and your fix hid both arrow icons. Actually, I think the only second icon should be hidden, not the first because the data is being sorted on that column and the first icon is showing the sort direction.
In fact, orderable: true just prevents user from changing the sort direction and we still need to show the current direction.
Do you think so?
Thanks.
Hi,
Sorry, please ignore the fix and revert back to the changes.
May I know your Metronic version ? Are you getting this issue with the latest Metronic v8.1.8 ? It seems we should not reproduce the issue with the latest version. Can you please provide a screenshot of the issue using https://imgur.com/ ?
Regards.
Hi,
Sure, here you are
https://imgur.com/a/Eq5IsDr
The bug only happens when I set orderable: false for the column.
Besides, I want to mention that my project is including the below fix, not sure if it is the reason.
https://devs.keenthemes.com/question/nested-datatable-example#answers
Thanks
Well, I have tried to remove the fix on
https://devs.keenthemes.com/question/nested-datatable-example#answers
but the bug is still there. I think that fix is not the reason.
Hi,
We will check it further. Is the second arrow shown only when the table has no rows or shown with rows as well? May I know your Metronic version and could you please provide your table's HTML and JS codes using https://gist.github.com/ ? The above-provided code seems truncated a bit.
Regards.
