Replace Sort Icons in Datatable 2.07

TerraX3000 · May 21

Link to test case: https://live.datatables.net/nixucome/4/edit
Description of problem:

My test case is using alternative arrow sorting icons based on Material UI icons: https://live.datatables.net/nixucome/4/edit

The arrow icons are working but the default triangle icons are still present. How do I remove the default sorting icons?

I'm using a very minimal Datatables 2.07 configuration. Also, I'm importing JQuery separately. My goal was to avoid conflicting CSS issues as reported by this user here:

https://datatables.net/forums/discussion/comment/200401/#Comment_200401

Note: In this test case, I'm not trying to use the Datatables Material Design Tech Preview as described here: https://datatables.net/examples/styling/material.html

I have tried the Material Design Tech Preview but it didn't display any sorting arrows. I'm hoping I can stick with the baseline Datatables configuration and tweak the styles for the sorting arrows but I'm open to the Material Design approach if it will be supported and if sorting arrows can be included.

TerraX3000 · May 21

Another poster had provided their CSS to replace the sorting icons:
https://datatables.net/forums/discussion/40100/replacing-original-sorting-icons-with-bootstrap-4

Their approach did not work for me. I updated their CSS to work with the new class names for 2.0.7 and added a new test case: https://live.datatables.net/nixucome/5/edit

FYI for anyone wondering, here is my summary of the changes to the sorting class names in version 2.0.7:

Description : Old Class Names
Unsorted column : sorting
Sorted Ascending : sorting sorting_asc
Sorted Descending: sorting sorting_desc

Description : New Class Names
Unsorted column : dt-orderable-asc dt-orderable-desc
Sorted Ascending : dt-orderable-asc dt-orderable-desc dt-ordering-asc
Sorted Descending : dt-orderable-asc dt-orderable-desc dt-ordering-desc

Wooly65 · May 22

I use Font Awesome for the sort icons. It is not perfect, but works for me.

I use 1 font awesome icon (fa-solid fa-sort which is \f0dc)for the up/down arrows instead of 2 displaying in the css after.

Then a totally different icon for the column being sorted.
Ascending --> fa-solid fa-arrow-up-wide-short which is \f161
Descending --> fa-solid fa-arrow-down-wide-short which is \f160

/* -------------------------------------------------- */
/* Sorting icons and positioning overrides */

/* Previously displayed two separate icons, hide first one */
table.dataTable thead .dt-column-order {
    top: 0.18em !important;
    right: 0.2em !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-size: 1.3em !important;
}

table.dataTable thead .dt-column-order:before,
table.dataTable thead .dt-column-order:after
{
    content: "" !important;
}

/* Only display in after */
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:after
{
    /*right:    0 !important;*/
    content: "\f0dc" !important;
    color: blue !important;
    opacity: 0.3 !important;
    top: unset !important;
    bottom: 0.3em !important;
    line-height: unset !important;
    padding-left: 5px;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after {
    content: "\f161" !important;
    color: blue !important;
    opacity: 0.7 !important;
    top: unset !important;
    bottom: 0.3em !important;
    line-height: unset !important; /* DataTable 1.12 set to 9px */
    padding-left: inherit;
}

table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    content: "\f160" !important;
    color: blue !important;
    opacity: 0.7 !important;
    top: unset !important;
    bottom: 0.3em !important;
    line-height: unset !important; /* DataTable 1.12 set to 9px */
    padding-left: inherit;
}

TerraX3000 · May 22

Wooly65 - thank you very much! I've created test cases for your Font Awesome approach as well as my Material UI Icon approach.

Font Awesome: https://live.datatables.net/nixucome/10/edit

Material UI Icon: https://live.datatables.net/nixucome/9/edit

The Material UI example includes some hover effects. Providing the stylesheets and scripts below for reference:

<link href="https://cdn.datatables.net/v/dt/dt-2.0.7/datatables.min.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

<script src="https://cdn.datatables.net/v/dt/dt-2.0.7/datatables.min.js"></script>

/* -------------------------------------------------- */
/* Sorting icons and positioning overrides */

/* Previously displayed two separate icons, hide first one */
table.dataTable thead .dt-column-order {
    top: 0.18em !important;
    right: auto !important;
    font-family: 'Material Icons' !important;
    font-size: 1.3em !important;
    line-height: 1 !important;
    /* Ensure consistent line height */
    margin-left: 5px !important;
    /* Adjust as needed to move slightly to the right of the text */
}

/* Remove default content */
table.dataTable thead .dt-column-order:before,
table.dataTable thead .dt-column-order:after {
    content: "" !important;
}

/* Only display in after */
table.dataTable thead>tr>th.dt-orderable-asc .dt-column-order:after {
    content: "\e8d5" !important;
    /* Unicode for swap_vert */
    color: lightgrey !important;
    opacity: 1 !important;
    top: unset !important;
    bottom: 0.3em !important;
    line-height: 1 !important;
    padding: 5px !important;
    border-radius: 50%;
}

/* Show upward arrow when sorted ascending */
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after {
    content: "\e5d8" !important;
    /* Unicode for arrow_upward */
    color: lightgrey !important;
    opacity: 1 !important;
    top: unset !important;
    bottom: 0.3em !important;
    line-height: 1 !important;
    padding: 5px !important;
    border-radius: 50%;
}

/* Show downward arrow when sorted descending */
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    content: "\e5db" !important;
    /* Unicode for arrow_downward */
    color: lightgrey !important;
    opacity: 1 !important;
    top: unset !important;
    bottom: 0.3em !important;
    line-height: 1 !important;
    padding: 5px !important;
    border-radius: 50%;
}

TerraX3000 · May 22

I created one more version which applies the Roboto font and hides the sort icons unless the column is sorted or the pointer hovers over the column.

See example here: https://live.datatables.net/nixucome/11/edit

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-2.0.7/datatables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/v/dt/dt-2.0.7/datatables.min.js"></script>

/* Apply the Roboto font to the entire table */
.dt-container .dataTable {
    font-family: 'Roboto', sans-serif;
}

/* Style the table headers */
.dt-container .dataTable th {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    /* You can use 400, 500, or 700 depending on your preference */
    font-size: 1rem;
    /* Adjust the size as needed */
    color: #333;
    /* Customize the color as needed */
    padding: 12px;
    /* Adjust padding for spacing */
    text-align: left;
    /* Customize alignment if needed */
}

/* Style the table body cells */
.dt-container .dataTable td {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    /* Regular weight for body text */
    font-size: 0.875rem;
    /* Adjust the size as needed */
    color: #666;
    /* Customize the color as needed */
    padding: 8px;
    /* Adjust padding for spacing */
}

/* Optional: Style the table footer cells */
.dt-container .dataTable tfoot th {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    /* You can use 400, 500, or 700 depending on your preference */
    font-size: 1rem;
    /* Adjust the size as needed */
    color: #333;
    /* Customize the color as needed */
    padding: 12px;
    /* Adjust padding for spacing */
    text-align: left;
    /* Customize alignment if needed */
}

/* -------------------------------------------------- */
/* Sorting icons and positioning overrides */

/* Previously displayed two separate icons, hide first one */
table.dataTable thead .dt-column-order {
    top: 0.18em !important;
    right: auto !important;
    font-family: 'Material Icons' !important;
    font-size: 1.3em !important;
    line-height: 1 !important;
    /* Ensure consistent line height */
    margin-left: 5px !important;
    /* Adjust as needed to move slightly to the right of the text */
}

/* Remove default content */
table.dataTable thead .dt-column-order:before,
table.dataTable thead .dt-column-order:after {
    content: "" !important;
}

/* Default light grey arrow when column is not sorted but hovered */
table.dataTable thead>tr>th.dt-orderable-asc:hover .dt-column-order:after,
table.dataTable thead>tr>th.dt-orderable-desc:hover .dt-column-order:after {
    content: "\e8d5" !important;
    /* Unicode for swap_vert */
    color: lightgrey !important;
    opacity: 1 !important;
    top: unset !important;
    bottom: 0.5em !important;
    line-height: 1 !important;
    padding: 5px !important;
    border-radius: 50%;
    display: inline-block !important;
}

/* Show upward arrow when sorted ascending */
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after {
    content: "\e5d8" !important;
    /* Unicode for arrow_upward */
    color: gray !important;
    opacity: 1 !important;
    top: unset !important;
    bottom: 0.5em !important;
    line-height: 1 !important;
    padding: 5px !important;
    border-radius: 50%;
    display: inline-block !important;
}

/* Show downward arrow when sorted descending */
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    content: "\e5db" !important;
    /* Unicode for arrow_downward */
    color: gray !important;
    opacity: 1 !important;
    top: unset !important;
    bottom: 0.5em !important;
    line-height: 1 !important;
    padding: 5px !important;
    border-radius: 50%;
    display: inline-block !important;
}

/* Hover effect: show light grey circle around the sorting icon */
table.dataTable thead>tr>th.dt-orderable-asc:hover span.dt-column-order:after,
table.dataTable thead>tr>th.dt-orderable-desc:hover span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-asc:hover span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-desc:hover span.dt-column-order:after {
    background-color: lightgrey;
    border-radius: 50%;
    color: gray !important;
    display: inline-block;
    line-height: 1 !important;
}

mvkotekar · August 11

Is there an example of using custom icons like ico files ?

Replace Sort Icons in Datatable 2.07

Replace Sort Icons in Datatable 2.07

Answers

Howdy, Stranger!

Categories

DataTables

Replace Sort Icons in Datatable 2.07

Replace Sort Icons in Datatable 2.07

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables