Как добавить сортировку символов в мою таблицу HTML?

Question

Я пытаюсь добавить символы сортировки в мою таблицу HTML. Ниже мой Javascript код.

function sortTableRowsByColumn( table, columnIndex, ascending ) {

    const rows = Array.from( table.querySelectorAll( ':scope > tbody > tr' ) );

    rows.sort( ( x, y ) => {

        const xValue = x.cells[columnIndex].textContent;
        const yValue = y.cells[columnIndex].textContent;

        const xNum = parseFloat( xValue );
        const yNum = parseFloat( yValue );

        return ascending ? ( xNum - yNum ) : ( yNum - xNum );
    } );

    for( let row of rows ) {
        table.tBodies[0].appendChild( row );
    }
}

function onColumnHeaderClicked( ev ) {

    const th = ev.currentTarget;
    const table = th.closest( 'table' );
    const thIndex = Array.from( th.parentElement.children ).indexOf( th );

    const ascending = !( 'sort' in th.dataset ) || th.dataset.sort != 'asc';

    sortTableRowsByColumn( table, thIndex, ascending );

    const allTh = table.querySelectorAll( ':scope > thead > tr > th' );
    for( let th2 of allTh ) {
        delete th2.dataset['sort'];
    }

    th.dataset['sort'] = ascending ? 'asc' : 'desc';
}

Вот мой html для таблицы.

  <table id="table" class="table table-striped table-bordered table-sm" style="font-size: 50%;">
    <thead>
      <tr>
        <th onclick="onColumnHeaderClicked(event)" scope="col">Klant  </th>
        <th scope="col">Adres</th>
        <th onclick="onColumnHeaderClicked(event)" scope="col"># panelen</th>
      </tr>
    </thead>

Моя сортировка работает полностью нормально. Однако, чтобы сделать его более интуитивным, я хочу добавить символы сортировки в мой заголовок. Кто-нибудь может предложить способ сделать это?

Answer 1

Как предлагается в комментариях, вы можете использовать иконки и шрифты. Также можно использовать набор символов UTF-8, чтобы добавить символ в заголовок вашего столбца. Следующие два полезны для этой цели:

• ▴, который будет отображаться как ▴
• ▾, который будет отображаться как ▾

В зависимости от если столбец не отсортирован, отсортирован по возрастанию или отсортирован по убыванию, отображается один из следующих трех вариантов:

1. <tr>Klant &#x25b4;&#x25be;</tr>, который будет выглядеть как Klant ▴▾
2. <tr>Klant &#x25b4</tr>, который будет выглядеть как Klant 101
3. <tr>Klant &#x25be;</tr>, что будет выглядеть как Klant ▾