@nanoporetech-digital/components 3.4.0 → 3.5.0

package/dist/collection/components/table/table.css

@@ -10,7 +10,6 @@
 [hidden] {
   display: none !important;
 }
-@charset "UTF-8";
 nano-table {
   /**
    * @prop --max-col-width: Default 200px;
@@ -56,11 +55,13 @@ nano-table {
   */
   display: block;
   width: 100%;
-  --max-col-width: 200px;
+  --max-col-width: clamp(200px, 30%, 20vw);
   --color: var(--nano-color-mediumgrey, #68767e);
   --font-size: 0.87rem;
   --cell-line-height: 1.5;
   --thead-font-size: 0.95rem;
+  --thead-color: #455560;
+  --tfoot-color: #455560;
   --border-color: #dddbda;
   --border-style: thin solid var(--border-color);
   --border-tint-color: #0084a9;
@@ -82,8 +83,8 @@ nano-table {
   --td-padding-h: var(--td-padding-start) var(--td-padding-end);
   --th-padding-v: var(--th-padding-top) var(--th-padding-bottom);
   --th-padding-h: var(--th-padding-start) var(--th-padding-end);
-  --foot-th-padding-v: var(--th-padding-top) var(--th-padding-bottom);
-  --foot-th-padding-h: var(--th-padding-start) var(--th-padding-end);
+  --foot-th-padding-v: var(--td-padding-top) var(--td-padding-bottom);
+  --foot-th-padding-h: var(--td-padding-start) var(--td-padding-end);
   --head-th-padding-v: var(--th-padding-top) var(--th-padding-bottom);
   --head-th-padding-h: var(--th-padding-start) var(--th-padding-end);
   --bookend-col-padding: 2rem;
@@ -123,6 +124,41 @@ nano-table {
   border-inline-start: var(--border-style);
   border-inline-end: var(--border-style);
 }
+.nano-tbl__drag-mask {
+  display: none;
+  position: absolute;
+  inset-block: -2px -2px;
+  z-index: 10;
+  opacity: 0;
+  transition: 0.2s ease opacity;
+}
+.nano-tbl__drag-mask--start {
+  width: calc(50% + 2px);
+  inset-inline-start: -2px;
+  border-inline-start: 2px dashed var(--border-tint-color);
+}
+.nano-tbl__drag-mask--end {
+  width: 50%;
+  inset-inline-end: 0;
+  border-inline-end: 2px dashed var(--border-tint-color);
+}
+.nano-tbl__drag-mask--active {
+  opacity: 1;
+}
+.nano-tbl__dragging .nano-tbl__drag-mask {
+  display: block;
+}
+.nano-tbl__drag--start {
+  opacity: 0.4;
+}
+.nano-tbl__dragging .nano-tbl__td,
+.nano-tbl__dragging .nano-tbl__th {
+  cursor: no-drop;
+}
+.nano-tbl__dragging .nano-tbl__td .nano-tbl__cell-content,
+.nano-tbl__dragging .nano-tbl__th .nano-tbl__cell-content {
+  pointer-events: none;
+}
 .nano-tbl__order-btn {
   padding: 0;
   border: none;
@@ -196,18 +232,21 @@ tbody:last-of-type tr:last-child .nano-tbl__td, tbody:last-of-type tr:last-child
   }
 }
 thead .nano-tbl__td, thead .nano-tbl__th {
+  color: var(--thead-color);
   font-weight: 800;
   background: rgba(var(--head-bg-rgb), 90%);
   font-size: var(--thead-font-size);
-  border-block-start: none;
+  border-block-start: none !important;
+  transition: all 0.2s ease;
 }
 thead .nano-tbl__td .nano-tbl__cell-content, thead .nano-tbl__th .nano-tbl__cell-content {
   padding-block: var(--head-th-padding-v);
   padding-inline: var(--head-th-padding-h);
 }
 tfoot .nano-tbl__td, tfoot .nano-tbl__th {
+  color: var(--tfoot-color);
   font-weight: 800;
-  border-block-end: none;
+  border-block-start: none;
   background: rgba(var(--foot-bg-rgb), 90%);
   font-size: var(--thead-font-size);
 }
@@ -225,6 +264,9 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
   padding-block: var(--td-padding-v);
   padding-inline: var(--td-padding-h);
 }
+.nano-tbl__cell-content--no-result {
+  padding-block: 2rem;
+}
 .nano-tbl tbody {
   will-change: scroll-position;
   visibility: visible;
@@ -236,16 +278,14 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
   font-weight: 800;
   margin: 0;
 }
-.sm .nano-tbl th[scope=row] {
-  max-width: 65vw !important;
-}
 .nano-tbl__pin {
   position: sticky;
   z-index: 1;
 }
 .nano-tbl__pin--start {
   inset-inline: -1px auto;
-  transition: max-width 0.25s;
+  transition: max-width 0.25s ease;
+  z-index: 2;
 }
 .nano-tbl__pin--start::after {
   content: "";
@@ -257,19 +297,20 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
 }
 .nano-tbl__pinned--start .nano-tbl__pin--start {
   z-index: 2;
-  max-width: 125px;
+  max-width: 125px !important;
 }
 .sm .nano-tbl__pinned--start .nano-tbl__pin--start {
-  max-width: var(--max-col-width);
+  max-width: var(--max-col-width) !important;
 }
 .nano-tbl__pinned--start .nano-tbl__pin--start::after {
   opacity: 1;
 }
 .nano-tbl__pin--end {
+  z-index: 2;
   /*
     I cannot think of a nice way to make stuck-end columns play nice on small screens :(
     Changing the width when stuck (as we do for stuck-start columns) causes the whole positioning to change.
-    This fires the IO, thus un-sticks the column, thus causes the IO to fire which sticks the column ∞
+    This fires the IO, thus un-sticks the column, thus causes the IO to fire which sticks the column ad-infinitum
   */
 }
 .nano-tbl__pin--start + .nano-tbl__pin--end {
@@ -299,28 +340,53 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
 }
 .nano-tbl__pin--top {
   inset-block: -1px auto;
+  z-index: 3;
 }
 .nano-tbl__pinned--top .nano-tbl__pin--top {
-  z-index: 4;
+  z-index: 4 !important;
 }
 .nano-tbl__pin--bottom {
   inset-block: auto -1px;
+  z-index: 3;
 }
 .nano-tbl__pinned--bottom .nano-tbl__pin--bottom {
-  z-index: 5;
-  border-block-start: var(--border-tint-style) !important;
+  z-index: 5 !important;
+}
+.nano-tbl__pin--top.nano-tbl__pin--start {
+  z-index: 4;
+}
+.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start {
+  z-index: 5 !important;
 }
 .nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start {
-  z-index: 6;
+  z-index: 6 !important;
+}
+.nano-tbl__pin--top.nano-tbl__pin--end {
+  z-index: 4;
+}
+.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end {
+  z-index: 5 !important;
 }
 .nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end {
-  z-index: 6;
+  z-index: 6 !important;
+}
+.nano-tbl__pin--bottom.nano-tbl__pin--start {
+  z-index: 4;
+}
+.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start {
+  z-index: 5 !important;
 }
 .nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start {
-  z-index: 6;
+  z-index: 6 !important;
+}
+.nano-tbl__pin--bottom.nano-tbl__pin--end {
+  z-index: 4;
+}
+.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end {
+  z-index: 5 !important;
 }
 .nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end {
-  z-index: 6;
+  z-index: 6 !important;
 }
 .nano-tbl thead tr:last-of-type td,
 .nano-tbl thead tr:last-of-type th {
@@ -330,6 +396,18 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
 .nano-tbl tfoot tr:first-of-type th {
   border-block-start: none;
 }
+.nano-tbl tfoot tr:last-of-type td,
+.nano-tbl tfoot tr:last-of-type th {
+  border-block-end: var(--border-tint-style);
+}
+.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,
+.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th {
+  border-block-start: var(--border-tint-style) !important;
+}
+.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,
+.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th {
+  border-block-end: none !important;
+}
 .nano-tbl .unlimited-width {
   max-width: none;
 }

package/dist/collection/components/table/table.header.js

@@ -0,0 +1,156 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { Fragment, h } from '@stencil/core';
+import { CSSNAMESPACE } from './table.constants';
+import { addHObserver, addVObserver, colheadFootRender, fetchStores, headerPinClasses, mergeProperties, } from './table.utils';
+// TABLE HEADERS
+// (thead > tr > th, tfoot > tr > th)
+let draggingCol;
+let draggingColEle;
+let dragEnterEle;
+let draggingParent;
+export const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned, onColumnDrag, onColumnDrop, defaults, }) => {
+  const store = fetchStores();
+  // Drag to re-order columns handling
+  function handleDragStart(e, column) {
+    draggingCol = column;
+    draggingColEle = dragEnterEle = e.target;
+    draggingParent = draggingColEle.closest('.' + `${CSSNAMESPACE}__tr`);
+    draggingParent.classList.add(`${CSSNAMESPACE}__dragging`);
+    draggingColEle.classList.add(`${CSSNAMESPACE}__drag--start`);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/html', draggingColEle.innerHTML);
+    onColumnDrag(column.prop, draggingColEle);
+  }
+  function handleDragEnd() {
+    draggingParent.classList.remove(`${CSSNAMESPACE}__dragging`);
+    draggingColEle.classList.remove(`${CSSNAMESPACE}__drag--start`);
+    draggingParent
+      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)
+      .forEach((el) => {
+      el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);
+    });
+    draggingColEle = null;
+    draggingCol = null;
+    draggingParent = null;
+    dragEnterEle = null;
+  }
+  function handleDragEnter(e) {
+    if (dragEnterEle === e.target)
+      return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    e.dataTransfer.dropEffect = 'move';
+    draggingParent
+      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)
+      .forEach((el) => {
+      el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);
+    });
+    dragEnterEle = e.target;
+    if (!dragEnterEle.classList.contains(`${CSSNAMESPACE}__drag-mask`)) {
+      e.dataTransfer.dropEffect = 'none';
+      return;
+    }
+    dragEnterEle.classList.add(`${CSSNAMESPACE}__drag-mask--active`);
+  }
+  function handleDrop(e) {
+    e.stopPropagation();
+    const { colName } = this.dataset;
+    if (colName === draggingCol.prop)
+      return;
+    const cols = store.config.state.columns;
+    let toIndex = cols.findIndex((col) => col.prop === colName);
+    const fromIndex = cols.findIndex((col) => col === draggingCol);
+    if (toIndex < fromIndex &&
+      this.classList.contains(`${CSSNAMESPACE}__drag-mask--end`))
+      toIndex++;
+    if (toIndex > fromIndex &&
+      this.classList.contains(`${CSSNAMESPACE}__drag-mask--start`))
+      toIndex--;
+    if (toIndex === fromIndex)
+      return;
+    onColumnDrop(draggingCol.prop, store.config.state.columns[toIndex].prop, draggingColEle);
+  }
+  // Sort handling
+  function handleColumnSortClick(e) {
+    let order;
+    switch (column.order) {
+      case 'asc':
+        order = 'desc';
+        break;
+      case 'desc':
+        order = null;
+        break;
+      default:
+        order = 'asc';
+    }
+    onColumnSortClick(order, column.prop, e.target.closest('th'));
+  }
+  function isSortable() {
+    return ((!!defaults.sortable && column.sortable !== false) ||
+      (!defaults.sortable && column.sortable === true));
+  }
+  function isDraggable() {
+    return ((!!defaults.draggable && column.draggable !== false) ||
+      (!defaults.draggable && column.draggable === true));
+  }
+  let extraProps = {};
+  if (column.columnProperties) {
+    extraProps = column.columnProperties(column) || extraProps;
+  }
+  const baseProps = {
+    class: {
+      ...headerPinClasses('th', headRenderer?.pinned),
+      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
+      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
+      [`${CSSNAMESPACE}__ordered`]: !!column.order,
+      [`${CSSNAMESPACE}__filtered`]: !!column.filter,
+    },
+  };
+  let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
+  const content = colheadFootRender(column);
+  if (!content)
+    return h(Fragment, null);
+  props =
+    Number(props.colSpan) > 1
+      ? { ...props, scope: 'colgroup' }
+      : { ...props, scope: 'col' };
+  if (isSortable()) {
+    const sort = column.order
+      ? column.order === 'asc'
+        ? 'ascending'
+        : 'descending'
+      : 'none';
+    props = { ...props, 'aria-sort': sort };
+  }
+  if (isDraggable()) {
+    props = {
+      ...props,
+      draggable: true,
+      onDragStart: (e) => handleDragStart(e, column),
+      onDragOver: (e) => e.preventDefault(),
+      onDragEnd: () => handleDragEnd(),
+    };
+  }
+  return (h("th", { ...props, ref: (th) => {
+      if (['end', 'start'].includes(column.pinned))
+        addHObserver(th, column.pinned, onColumnPinned);
+      if (['top', 'bottom'].includes(headRenderer.pinned))
+        addVObserver(th, headRenderer.pinned, onColumnPinned);
+    }, key: column.prop }, isDraggable() && [
+    h("div", { class: {
+        [`${CSSNAMESPACE}__drag-mask`]: true,
+        [`${CSSNAMESPACE}__drag-mask--start`]: true,
+      }, "data-col-name": column.prop, onDragEnter: handleDragEnter, onDrop: handleDrop, onDragOver: (e) => e.preventDefault() }),
+    h("div", { class: {
+        [`${CSSNAMESPACE}__drag-mask`]: true,
+        [`${CSSNAMESPACE}__drag-mask--end`]: true,
+      }, "data-col-name": column.prop, onDragEnter: handleDragEnter, onDrop: handleDrop, onDragOver: (e) => e.preventDefault() }),
+  ], isSortable() ? (h("button", { class: {
+      [`${CSSNAMESPACE}__order-btn`]: true,
+      [`${CSSNAMESPACE}__cell-content`]: true,
+    }, onClick: handleColumnSortClick }, colheadFootRender(column), !!column.filter && h("nano-icon", { name: "light/filter" }), !!column.order &&
+    (column.order === 'desc' ? (h("nano-icon", { name: "solid/long-arrow-down" })) : (h("nano-icon", { name: "solid/long-arrow-up" }))), h("div", { class: `${CSSNAMESPACE}__status-icons` }, h("nano-icon", { name: "light/chevron-down" })))) : (h("div", { class: `${CSSNAMESPACE}__cell-content` }, colheadFootRender(column), !!column.filter && h("nano-icon", { name: "light/bars-filter" })))));
+};
+//# sourceMappingURL=table.header.js.map

package/dist/collection/components/table/table.header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.header.js","sourceRoot":"","sources":["../../../src/components/table/table.header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  addHObserver,\n  addVObserver,\n  colheadFootRender,\n  fetchStores,\n  headerPinClasses,\n  mergeProperties,\n} from './table.utils';\nimport type { TableTypes } from '../../interface';\n\n// TABLE HEADERS\n// (thead > tr > th, tfoot > tr > th)\n\nlet draggingCol: TableTypes.ColumnConfig;\nlet draggingColEle: HTMLTableCellElement;\nlet dragEnterEle: HTMLElement;\nlet draggingParent: HTMLTableRowElement;\n\ntype TableColHeadProps = {\n  column: TableTypes.ColumnConfig;\n  headRenderer: TableTypes.HeadFootRenderer;\n  onColumnSortClick?: (\n    order: TableTypes.Order,\n    column: TableTypes.Prop,\n    el: HTMLTableCellElement\n  ) => void;\n  onColumnPinned?: TableTypes.PinnedCb;\n  onColumnDrag?: (column: TableTypes.Prop, el: HTMLTableCellElement) => void;\n  onColumnDrop?: (\n    fromColumn: TableTypes.Prop,\n    toColumn: TableTypes.Prop,\n    el: HTMLTableCellElement\n  ) => void;\n  defaults: { draggable?: boolean; sortable?: boolean };\n};\n\nexport const TableColHead: FunctionalComponent<TableColHeadProps> = ({\n  column,\n  headRenderer,\n  onColumnSortClick,\n  onColumnPinned,\n  onColumnDrag,\n  onColumnDrop,\n  defaults,\n}) => {\n  const store = fetchStores();\n\n  // Drag to re-order columns handling\n\n  function handleDragStart(e: DragEvent, column: TableTypes.ColumnConfig) {\n    draggingCol = column;\n    draggingColEle = dragEnterEle = e.target as HTMLTableCellElement;\n    draggingParent = draggingColEle.closest('.' + `${CSSNAMESPACE}__tr`);\n\n    draggingParent.classList.add(`${CSSNAMESPACE}__dragging`);\n    draggingColEle.classList.add(`${CSSNAMESPACE}__drag--start`);\n\n    e.dataTransfer.effectAllowed = 'move';\n    e.dataTransfer.setData('text/html', draggingColEle.innerHTML);\n\n    onColumnDrag(column.prop, draggingColEle);\n  }\n\n  function handleDragEnd() {\n    draggingParent.classList.remove(`${CSSNAMESPACE}__dragging`);\n    draggingColEle.classList.remove(`${CSSNAMESPACE}__drag--start`);\n\n    draggingParent\n      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)\n      .forEach((el) => {\n        el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);\n      });\n\n    draggingColEle = null;\n    draggingCol = null;\n    draggingParent = null;\n    dragEnterEle = null;\n  }\n\n  function handleDragEnter(e: DragEvent) {\n    if (dragEnterEle === e.target) return;\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    e.dataTransfer.dropEffect = 'move';\n\n    draggingParent\n      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)\n      .forEach((el) => {\n        el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);\n      });\n    dragEnterEle = e.target as HTMLElement;\n\n    if (!dragEnterEle.classList.contains(`${CSSNAMESPACE}__drag-mask`)) {\n      e.dataTransfer.dropEffect = 'none';\n      return;\n    }\n    dragEnterEle.classList.add(`${CSSNAMESPACE}__drag-mask--active`);\n  }\n\n  function handleDrop(this: HTMLElement, e: DragEvent) {\n    e.stopPropagation();\n\n    const { colName } = this.dataset as { colName: keyof TableTypes.RowData };\n    if (colName === draggingCol.prop) return;\n\n    const cols = store.config.state.columns;\n    let toIndex = cols.findIndex((col) => col.prop === colName);\n    const fromIndex = cols.findIndex((col) => col === draggingCol);\n\n    if (\n      toIndex < fromIndex &&\n      this.classList.contains(`${CSSNAMESPACE}__drag-mask--end`)\n    )\n      toIndex++;\n    if (\n      toIndex > fromIndex &&\n      this.classList.contains(`${CSSNAMESPACE}__drag-mask--start`)\n    )\n      toIndex--;\n    if (toIndex === fromIndex) return;\n\n    onColumnDrop(\n      draggingCol.prop,\n      store.config.state.columns[toIndex].prop,\n      draggingColEle\n    );\n  }\n\n  // Sort handling\n\n  function handleColumnSortClick(e: MouseEvent & { target: HTMLElement }) {\n    let order;\n    switch (column.order) {\n      case 'asc':\n        order = 'desc';\n        break;\n      case 'desc':\n        order = null;\n        break;\n      default:\n        order = 'asc';\n    }\n    onColumnSortClick(order, column.prop, e.target.closest('th'));\n  }\n\n  function isSortable() {\n    return (\n      (!!defaults.sortable && column.sortable !== false) ||\n      (!defaults.sortable && column.sortable === true)\n    );\n  }\n\n  function isDraggable() {\n    return (\n      (!!defaults.draggable && column.draggable !== false) ||\n      (!defaults.draggable && column.draggable === true)\n    );\n  }\n\n  let extraProps = {};\n  if (column.columnProperties) {\n    extraProps = column.columnProperties(column) || extraProps;\n  }\n\n  const baseProps = {\n    class: {\n      ...headerPinClasses('th', headRenderer?.pinned),\n      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n      [`${CSSNAMESPACE}__ordered`]: !!column.order,\n      [`${CSSNAMESPACE}__filtered`]: !!column.filter,\n    },\n  };\n  let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const content = colheadFootRender(column);\n\n  if (!content) return <Fragment></Fragment>;\n\n  props =\n    Number((props as TableTypes.CellProps).colSpan) > 1\n      ? { ...props, scope: 'colgroup' }\n      : { ...props, scope: 'col' };\n\n  if (isSortable()) {\n    const sort = column.order\n      ? column.order === 'asc'\n        ? 'ascending'\n        : 'descending'\n      : 'none';\n\n    props = { ...props, 'aria-sort': sort };\n  }\n\n  if (isDraggable()) {\n    props = {\n      ...props,\n      draggable: true,\n      onDragStart: (e) => handleDragStart(e, column),\n      onDragOver: (e) => e.preventDefault(),\n      onDragEnd: () => handleDragEnd(),\n    };\n  }\n\n  return (\n    <th\n      {...props}\n      ref={(th) => {\n        if (['end', 'start'].includes(column.pinned))\n          addHObserver(th, column.pinned, onColumnPinned);\n        if (['top', 'bottom'].includes(headRenderer.pinned))\n          addVObserver(th, headRenderer.pinned, onColumnPinned);\n      }}\n      key={column.prop}\n    >\n      {isDraggable() && [\n        <div\n          class={{\n            [`${CSSNAMESPACE}__drag-mask`]: true,\n            [`${CSSNAMESPACE}__drag-mask--start`]: true,\n          }}\n          data-col-name={column.prop}\n          onDragEnter={handleDragEnter}\n          onDrop={handleDrop}\n          onDragOver={(e) => e.preventDefault()}\n        ></div>,\n        <div\n          class={{\n            [`${CSSNAMESPACE}__drag-mask`]: true,\n            [`${CSSNAMESPACE}__drag-mask--end`]: true,\n          }}\n          data-col-name={column.prop}\n          onDragEnter={handleDragEnter}\n          onDrop={handleDrop}\n          onDragOver={(e) => e.preventDefault()}\n        ></div>,\n      ]}\n      {isSortable() ? (\n        <button\n          class={{\n            [`${CSSNAMESPACE}__order-btn`]: true,\n            [`${CSSNAMESPACE}__cell-content`]: true,\n          }}\n          onClick={handleColumnSortClick}\n        >\n          {colheadFootRender(column)}\n          {!!column.filter && <nano-icon name=\"light/filter\" />}\n          {!!column.order &&\n            (column.order === 'desc' ? (\n              <nano-icon name=\"solid/long-arrow-down\" />\n            ) : (\n              <nano-icon name=\"solid/long-arrow-up\" />\n            ))}\n          <div class={`${CSSNAMESPACE}__status-icons`}>\n            <nano-icon name=\"light/chevron-down\" />\n          </div>\n        </button>\n      ) : (\n        <div class={`${CSSNAMESPACE}__cell-content`}>\n          {colheadFootRender(column)}\n          {!!column.filter && <nano-icon name=\"light/bars-filter\" />}\n        </div>\n      )}\n    </th>\n  );\n};\n"]}