feat(icons): Use feather icons instead of raw ascii strings

src/cellmanager.js

@@ -5,6 +5,7 @@ import {
     linkProperties
 } from './utils';
 import $ from './dom';
+import icons from './icons';
 
 export default class CellManager {
     constructor(instance) {
@@ -791,16 +792,22 @@ export default class CellManager {
         if (this.options.treeView && !(isHeader || isFilter) && cell.indent !== undefined) {
             const nextRow = this.datamanager.getRow(cell.rowIndex + 1);
             const addToggle = nextRow && nextRow.meta.indent > cell.indent;
-            const leftPadding = 1;
+            const leftPadding = 20;
+            const unit = 'px';
 
             // Add toggle and indent in the first column
             const firstColumnIndex = this.datamanager.getColumnIndexById('_rowIndex') + 1;
             if (firstColumnIndex === cell.colIndex) {
-                const padding = ((cell.indent || 0) + 1) * leftPadding;
+                const padding = ((cell.indent || 0)) * leftPadding;
                 const toggleHTML = addToggle ?
-                    `<span class="dt-tree-node__toggle" style="left: ${padding - leftPadding}rem"></span>` : '';
-                contentHTML = `<span class="dt-tree-node" style="padding-left: ${padding}rem">
-                    ${toggleHTML}${contentHTML}</span>`;
+                    `<span class="dt-tree-node__toggle" style="left: ${padding - leftPadding}${unit}">
+                        <span class="icon-open">${icons.chevronDown}</span>
+                        <span class="icon-close">${icons.chevronRight}</span>
+                    </span>` : '';
+                contentHTML = `<span class="dt-tree-node" style="padding-left: ${padding}${unit}">
+                    ${toggleHTML}
+                    <span>${contentHTML}</span>
+                </span>`;
             }
         }
 

src/columnmanager.js

@@ -79,7 +79,8 @@ export default class ColumnManager {
         });
 
         const deactivateDropdownOnBodyClick = (e) => {
-            if (e.target.matches(toggleClass)) return;
+            const selector = [toggleClass, toggleClass + ' *'].join(',');
+            if (e.target.matches(selector)) return;
             deactivateDropdown();
         };
         $.on(document.body, 'click', deactivateDropdownOnBodyClick);

src/defaults.js

@@ -1,9 +1,10 @@
 import filterRows from './filterRows';
+import icons from './icons';
 
 export default {
     columns: [],
     data: [],
-    dropdownButton: '▼',
+    dropdownButton: icons.chevronDown,
     headerDropdown: [
         {
             label: 'Sort Ascending',

src/icons.js

@@ -0,0 +1,10 @@
+/* eslint-disable max-len */
+
+// Icons from https://feathericons.com/
+
+let icons = {
+    chevronDown: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>',
+    chevronRight: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>'
+};
+
+export default icons;

src/style.css

@@ -151,12 +151,29 @@
     }
 
     &--tree-close {
-        .dt-tree-node__toggle:before {
-            content: '►';
+        .icon-open {
+            display: none;
+        }
+
+        .icon-close {
+            display: flex;
         }
     }
 }
 
+.icon-open, .icon-close {
+    width: 16px;
+    height: 16px;
+}
+
+.icon-open {
+    display: flex;
+}
+
+.icon-close {
+    display: none;
+}
+
 .dt-dropdown {
     position: absolute;
     right: 10px;
@@ -198,19 +215,14 @@
 }
 
 .dt-tree-node {
-    display: inline-block;
+    display: flex;
+    align-items: center;
     position: relative;
 
     &__toggle {
         display: inline-block;
-        position: absolute;
-        font-size: 10px;
-        padding: 2px;
         cursor: pointer;
-    }
-
-    &__toggle:before {
-        content: '▼';
+        margin-right: 0.2rem;
     }
 }