@sparser/au2-data-grid/src/grid-header.html

A data grid for Aurelia 2

<template role="columnheader button">
  <div click.trigger="handleClick()">
    <span ref="content" draggable="true" dragstart.trigger="handleDragStart($event)"
      dragover.trigger="handleDragover($event)" drop.trigger="handleDrop($event)">
      <au-slot></au-slot>
    </span>
    <template if.bind="isSortable">
      <!-- BLACK UP-POINTING SMALL TRIANGLE -->
      <span if.bind="direction === 'Ascending'" ref="sortingMarker">&#x25B4;</span>

      <!-- BLACK DOWN-POINTING SMALL TRIANGLE -->
      <span if.bind="direction === 'Descending'" ref="sortingMarker">&#x25BE;</span>
    </template>
  </div>
  <svg if.bind="isResizable" class="resize-handle" viewBox="0 0 7 15" mousedown.capture="handleMouseDown($event)">
    <line x1="6" y1="0" x2="6" y2="17" stroke="var(--handle-color)" stroke-width="15%"></line>
  </svg>
</template>