Answers

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

  September 2021

  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 Posts: 20,425Questions: 26Answers: 4,794

  September 2021

  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 Posts: 21Questions: 3Answers: 0

  December 2021

  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 Posts: 20,425Questions: 26Answers: 4,794

  December 2021

  @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 Posts: 21Questions: 3Answers: 0

  December 2021

  Perfect!! That worked for me. Thanks Kevin
• awariat Posts: 7Questions: 3Answers: 0

  June 2022

  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 Posts: 86Questions: 13Answers: 1

  April 2023

  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 Posts: 86Questions: 13Answers: 1

  April 2023 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.