How can I remove ALL sort arrows from ALL columns?

ckennedy65

I am trying to remove all of the sort arrows from the column headers when 'orderable' is set to false.

I included the following code in my datatable definition but an arrow continues to appear on the first column. I am not allowing sorting on any column, rather I'm using filtering and I don't want the sort arrows showing up at all.

columnDefs: [{
"orderable": false,
"targets": '_all'
}

kthorngren

The columns.orderable only affects the users ability to order columns. As stated in the docs the order option and order() API can affect the order. Thus the arrows still show. You can turn off all ordering with order like order: []. Datatables will then show the table in the order of the data received.

Kevin

kthorngren

You could inspect the sorting arrows and override the CSS settings. For example the default Datatables CSS to show the sorting icons is this:

table.dataTable thead .sorting_asc {
    background-image: url(../images/sort_asc.png) !important;
}

table.dataTable thead .sorting_desc {
    background-image: url(../images/sort_desc.png) !important;
}

table.dataTable thead .sorting {
    background-image: url(../images/sort_both.png);
}

You can change the background to something else if you wish.

Kevin

leighJane

This needs a better solution. Kevin's solution to edit the css didn't work for me because I couldn't even find the snippets he pasted above. The only reference to table.dataTable thead was in css/plugins/datatables/dataTables.bootstrap.min.css and I removed the entire css from the page and it didn't change a thing

kthorngren

@leighJane The above CSS likely only works with the default Datatables styling. Depending on your goals you could simply set ordering to false. This will turn off all table ordering and the arrows won't show. If this doesn't help then please provide more information about your requirements.

Kevin

leighJane

Perfect!! That worked for me. Thanks Kevin

awariat

I removed this way in my css:

table.dataTable>thead .sorting::before,
 table.dataTable>thead .sorting_asc::before,
 table.dataTable>thead .sorting_desc::before,
 table.dataTable>thead .sorting_asc_disabled::before,
 table.dataTable>thead .sorting_desc_disabled::before {
    right: 0;
    content: "";
}

 table.dataTable>thead .sorting::after,
 table.dataTable>thead .sorting_asc::after,
 table.dataTable>thead .sorting_desc::after,
 table.dataTable>thead .sorting_asc_disabled::after,
 table.dataTable>thead .sorting_desc_disabled::after {
    right: 0;
    content: "";
}

 table.dataTable>thead>tr>th:not(.sorting_disabled),
 table.dataTable>thead>tr>td:not(.sorting_disabled) {
    padding-right: 4px;
    padding-left: 4px;
}

 table.dataTable>thead>tr>th,
 table.dataTable>thead>tr>td {
    padding-right: 4px;
    padding-left: 4px;
}

chbocca

Thanks awariat!

That worked for me too, but I needed to add !important ...

/* ref https://datatables.net/forums/discussion/70046/how-can-i-remove-all-sort-arrows-from-all-columns */

table.dataTable>thead .sorting::before,
table.dataTable>thead .sorting_asc::before,
table.dataTable>thead .sorting_desc::before,
table.dataTable>thead .sorting_asc_disabled::before,
table.dataTable>thead .sorting_desc_disabled::before {
    right: 0 !important;
    content: "" !important;
}
 
 table.dataTable>thead .sorting::after,
 table.dataTable>thead .sorting_asc::after,
 table.dataTable>thead .sorting_desc::after,
 table.dataTable>thead .sorting_asc_disabled::after,
 table.dataTable>thead .sorting_desc_disabled::after {
    right: 0 !important;
    content: "" !important;
}
 
 table.dataTable>thead>tr>th:not(.sorting_disabled),
 table.dataTable>thead>tr>td:not(.sorting_disabled) {
    padding-right: 0px !important;
    padding-left: 0px !important;
}
 
 table.dataTable>thead>tr>th,
 table.dataTable>thead>tr>td {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

chbocca

I did notice that the small pop-up icon for adjusting column widths in the plug-in Daniel Hobi created no longer appears when hovering over column separator. Not sure which dt version it stopped appearing in. I know it worked in 1.11.3, but it does not work in 1.13.4.