How can I remove ALL sort arrows from ALL columns?

How can I remove ALL sort arrows from ALL columns?

ckennedy65ckennedy65 Posts: 1Questions: 1Answers: 0

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'
}

Answers

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • leighJaneleighJane Posts: 21Questions: 3Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    @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

  • leighJaneleighJane Posts: 21Questions: 3Answers: 0

    Perfect!! That worked for me. Thanks Kevin

  • awariatawariat Posts: 7Questions: 3Answers: 0

    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;
    }
    
  • chboccachbocca Posts: 86Questions: 13Answers: 1

    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;
    }
    
  • chboccachbocca Posts: 86Questions: 13Answers: 1
    edited April 2023

    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.

Sign In or Register to comment.