Feature/bim data table filter

src/BIMDataComponents/BIMDataTable/BIMDataTable.vue

@@ -26,7 +26,15 @@
                 textAlign: column.align || 'left',
               }"
             >
-              {{ column.id ? column.label || column.id : column }}
+              <div :style="{ display: 'inline-flex' }">
+                {{ column.id ? column.label || column.id : column }}
+                <slot name="header-right"></slot>
+                <HeaderTableFilter
+                  v-if="column.sortable"
+                  :column="column"
+                  @click="toggleSorting(column)"
+                />
+              </div>
             </th>
           </tr>
           <tr key="head-row-1">
@@ -37,7 +45,7 @@
         </thead>
         <tbody @dragleave="onDragleave">
           <tr
-            v-for="{ key, data } of computedRows"
+            v-for="{ key, data } of sortedRows"
             :key="`body-row-${key}`"
             v-show="displayedRows.includes(key)"
             :style="{ height: `${rowHeight}px` }"
@@ -117,12 +125,14 @@ import { useRowSelection } from "./table-row-selection.js";
 import BIMDataButton from "../BIMDataButton/BIMDataButton.vue";
 import BIMDataCheckbox from "../BIMDataCheckbox/BIMDataCheckbox.vue";
 import BIMDataIconChevron from "../BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue";
+import HeaderTableFilter from "./header-table-filter/HeaderTableFilter.vue";
 
 export default {
   components: {
     BIMDataButton,
     BIMDataCheckbox,
     BIMDataIconChevron,
+    HeaderTableFilter,
   },
   props: {
     columns: {
@@ -185,7 +195,7 @@ export default {
   setup(props, { emit }) {
     // Compute rows keys based on props values.
     const computedRows = computed(() =>
-      props.rows.map((row, i) => ({ key: row[props.rowKey] ?? i, data: row }))
+      props.rows.map((row, i) => ({ key: row[props.rowKey] ?? i, data: row })),
     );
 
     const { rowSelection, toggleRowSelection, toggleFullSelection } =
@@ -211,7 +221,7 @@ export default {
               emit("all-deselected");
             }
           },
-        }
+        },
       );
 
     const toggleRow = row => {
@@ -236,7 +246,7 @@ export default {
       () => {
         pageIndex.value = 0;
       },
-      { immediate: true }
+      { immediate: true },
     );
     // Compute `displayedRows` according to rows array and pagination settings.
     watch(
@@ -254,7 +264,7 @@ export default {
           displayedRows.value = rowKeys;
         }
       },
-      { immediate: true }
+      { immediate: true },
     );
 
     const onDrop = (data, event) => {
@@ -274,6 +284,46 @@ export default {
       dragOveredRowKey.value = null;
     };
 
+    const sortingColumn = ref(null);
+    const sortedRows = computed(() => {
+      if (sortingColumn.value) {
+        // by default, sort in ascending order
+        const ascendingSort =
+          sortingColumn.value.defaultSortAs !== "desc" ? 1 : -1;
+        if (sortingColumn.value.sortFunction) {
+          const sortFunction = (a, b) => {
+            return (
+              sortingColumn.value.sortFunction(a.data, b.data) * ascendingSort
+            );
+          };
+          return Array.from(computedRows.value).sort(sortFunction);
+        } else {
+          return Array.from(computedRows.value).sort((a, b) => {
+            if (
+              a.data[sortingColumn.value.id] < b.data[sortingColumn.value.id]
+            ) {
+              return ascendingSort;
+            }
+            if (
+              a.data[sortingColumn.value.id] > b.data[sortingColumn.value.id]
+            ) {
+              return -ascendingSort;
+            }
+            return 0;
+          });
+        }
+      }
+      return computedRows.value;
+    });
+    const toggleSorting = column => {
+      if (column.defaultSortAs === "asc") {
+        column.defaultSortAs = "desc";
+      } else {
+        column.defaultSortAs = "asc";
+      }
+      sortingColumn.value = column;
+    };
+
     return {
       // References
       computedRows,
@@ -289,6 +339,8 @@ export default {
       onDragleave,
       toggleAll,
       toggleRow,
+      toggleSorting,
+      sortedRows,
     };
   },
 };

src/BIMDataComponents/BIMDataTable/header-table-filter/HeaderTableFilter.vue

@@ -0,0 +1,37 @@
+<template>
+  <span
+    v-if="column.sortable"
+    :class="[column.defaultSortAs === 'asc' ? 'asc' : 'desc', 'm-l-6']"
+    @mousedown.prevent
+  >
+    <BIMDataIconUp
+      v-if="column.defaultSortAs === 'desc'"
+      size="xxxs"
+      fill
+      color="default"
+    />
+    <BIMDataIconDown
+      v-if="column.defaultSortAs === 'asc'"
+      size="xxxs"
+      fill
+      color="default"
+    />
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    column: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+span {
+  cursor: pointer;
+}
+</style>

src/BIMDataComponents/BIMDataTable/header-table-filter/_HeaderTableFilter.scss

@@ -0,0 +1 @@
+

src/web/views/Components/Table/Table.vue

@@ -14,7 +14,8 @@
             :paginated="simpleExample.paginated"
             :perPage="+simpleExample.perPage"
             @selection-changed="simpleExample.selection = $event"
-          />
+          >
+          </BIMDataTable>
           <div class="selection-box">
             <div class="selection-box__label">Selection :</div>
             <div
@@ -160,9 +161,17 @@
         <Code language="javascript">
           <pre>
             let columns = [
-              { id: "fullName", label: "Name" },
-              { id: "age", label: "Age", width: "64px" },
-              { id: "country", label: "Country", width: "200px", align: "center" }
+            { 
+              id: "fullName",
+              label: "Name",
+              sortable: true, defaultSortAs: "desc",
+              sortFunction: (a, b) => {
+                const fullNameA = `${a.firstName} ${a.lastName}`;
+                const fullNameB = `${b.firstName} ${b.lastName}`;
+                return fullNameA &lt; fullNameB ? 1 : -1;
+              },
+              { id: "age", label: "Age", width: "64px", sortable: true, defaultSortAs: "desc" },
+              { id: "country", label: "Country", width: "200px", align: "center", sortable: true, defaultSortAs: "desc" }
             ];
           </pre>
         </Code>
@@ -298,17 +307,29 @@ export default {
           {
             id: "fullName",
             label: "Name",
+            sortable: true,
+            defaultSortAs: "desc",
+            sortFunction: (a, b) => {
+              const fullNameA = `${a.firstName} ${a.lastName}`;
+              const fullNameB = `${b.firstName} ${b.lastName}`;
+
+              return fullNameA < fullNameB ? 1 : -1;
+            },
           },
           {
             id: "age",
             label: "Age",
             width: "64px",
+            sortable: true,
+            defaultSortAs: "desc",
           },
           {
             id: "country",
             label: "Country",
             width: "200px",
             align: "center",
+            sortable: true,
+            defaultSortAs: "desc",
           },
         ],
         rows: [

src/web/views/Components/Table/columns-data.js

@@ -24,4 +24,19 @@ export default [
     "'left' ; 'center' ; 'right'",
     "Set how text is aligned in the column.",
   ],
+  [
+    "sortable",
+    "Boolean",
+    "If you want to sort the column, set this to true. Sortable by id value.",
+  ],
+  [
+    "defaultSortAs",
+    "'desc' ; 'asc'",
+    "Set the default sort order for the column.",
+  ],
+  [
+    "sortFunction",
+    "Function",
+    "Set a custom sort function for the column. If not specified, the default sort function will be used.",
+  ],
 ];