Move Sorting Arrows to front of Column Title

travisk42

I want to move the sorting arrows to the front of the column title. I found the 2017 post below. Does DataTables 2 have a cleaner way to achieve this?

Old post: https://datatables.net/forums/discussion/comment/123317/#Comment_123317

allan

It is just a position: absolute element, so all you need to do is set the left and right properties as needed, and move the padding for the header cell:

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
  right: auto;
  left: 12px;
}

table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc,
table.dataTable thead > tr > td.dt-orderable-asc,
table.dataTable thead > tr > td.dt-orderable-desc,
table.dataTable thead > tr > td.dt-ordering-asc,
table.dataTable thead > tr > td.dt-ordering-desc {
  padding-right: 10px;
  padding-left: 30px;
}

The selectors are a bit unwieldy, but a simple "Inspect" yields them.

https://live.datatables.net/vuqinoni/1/edit

Allan