DataTables logo
≡

Replace Sort Icons in DataTables v3

Replace Sort Icons in DataTables v3

Wooly65Wooly65 Posts: 108Questions: 35Answers: 1
in Free community support

I had discussed replacing sort icons in DataTables v2 in the following discussion Replace Sort Icons in Datatable 2.07 in May 2024.

I am just now beginning to update my application from v2 to the latest DataTables v3.1.3 and latest extensions. I have found any discussion about this yet. I am using the browser elements tab to inspect the css and reviewing the dataTables.bootstrap5.css file.

I will continue to look at this over the holiday weekend. Any hints would help.

Answers

  • allanallan Posts: 66,065Questions: 1Answers: 11,002 Site admin
    edited 7:41AM

    Hi,

    This is the SCSS file that is used to display the ordering icons. They are basically CSS triangles (i.e. a border on one side of a box) using the ::before and ::after pseudo elements of the containing div.

    You'll see a bunch of CSS variables in that file which can be used for basic control of the triangles.

    If you want something different from the triangle, have a look at ColumnControl:

    The icons are held as SVG in the ColumnControl code, so it is easy to alter them if you have a particular style you want.

    Allan

  • Wooly65Wooly65 Posts: 108Questions: 35Answers: 1

    I still might try to override the icons like I did in DataTable v2, but I was a little confused looking at the new style.

    So I have decided to try out the ColumnControl since it has some additional features I might be interested in.

Sign In or Register to comment.