Sort arrows in 2.3 and later

Sort arrows in 2.3 and later

BalkothBalkoth Posts: 24Questions: 2Answers: 0

A previous update changed the sort arrows from

to

Before v2.3 you could just copy the css of the previous version and get the imho way better looking side-by-side arrows back. Now with the column header changes v2.3 broke this approach. Can someone help?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 64,593Questions: 1Answers: 10,683 Site admin

    Hi,

    What version were you using before which had the side-by-side vertical arrows? Also, is that Bootstrap styling? v4 / 5?

    I've just tried it back to DataTables 2.0 and it uses the stack arrows like in 2.3.

    To change the arrows you'd need to alter the CSS used for the display of the cons. I just took a look at the Bootstrap icons and there doesn't appear to be side-by-side vertical ones so perhaps it is something different you were using?

    Allan

  • BalkothBalkoth Posts: 24Questions: 2Answers: 0

    The up and down side-by-side arrows were at least in
    https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.11.5/css/dataTables.bootstrap5.css
    and no longer used in
    https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.2/css/dataTables.bootstrap5.css

    This is the transition period i have in my source control when i copied the css for the sorting.

  • allanallan Posts: 64,593Questions: 1Answers: 10,683 Site admin
    Answer ✓

    Thanks for the extra information. I've created this little example with 1.11.5: https://live.datatables.net/yiguteho/1/edit .

    It uses styling such as for :before on the element:

    right: 1em;
    
    
    .dt-column-order:before {
      content: "↑" !important;
    }
    

    And :after:

    right: .5em;
    content: "↓";
    

    You can target the span.dt-column-order element in 2.3 and apply content and positioning to the before/after pseudo elements to get something similar as 1.11: https://live.datatables.net/daqaruyi/1/edit .

    You might wish to tweak the opacity as well.

    Allan

  • BalkothBalkoth Posts: 24Questions: 2Answers: 0

    Thanks for your help, got it working nearly identical as before:

    table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
    table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
    table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
    table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before {
        top: -2px !important;
        bottom: 0 !important;
        opacity: 0.3 !important;
        content: "\2191" !important;
        line-height: 1.5em !important;
        font-size: 1em !important;
    }
    
    table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after,
    table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
    table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
    table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
        top: -2px !important;
        bottom: 0 !important;
        left: 0.5em !important;
        opacity: 0.3 !important;
        content: "\2193" !important;
        line-height: 1.5em !important;
        font-size: 1em !important;
    }
    
    table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
    table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
    table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
    table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
        opacity: 1 !important;
    }
    
  • allanallan Posts: 64,593Questions: 1Answers: 10,683 Site admin

    Nice one - thanks for sharing that! Here is the updated example with that.

    Allan

Sign In or Register to comment.