From cec3eec1dac0edd6e416940a809e375227679242 Mon Sep 17 00:00:00 2001
From: mlmo <marcel.moravek@yahoo.de>
Date: Fri, 7 Jun 2024 14:24:55 +0200
Subject: [PATCH] refactor

---
 packages/docs/components/Table.md             |  4 +--
 packages/oruga/src/components/table/Table.vue | 26 +++++++------------
 .../src/components/table/TableColumn.vue      |  4 +--
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/packages/docs/components/Table.md b/packages/docs/components/Table.md
index a9f17e656..006e5deb3 100644
--- a/packages/docs/components/Table.md
+++ b/packages/docs/components/Table.md
@@ -172,9 +172,9 @@ title: Table
 
 | Prop name        | Description                                                      | Type                                         | Values                      | Default                                                     |
 | ---------------- | ---------------------------------------------------------------- | -------------------------------------------- | --------------------------- | ----------------------------------------------------------- |
+| customSearch     | Define a custom filter funtion for the search                    | (row: T, filter: string) =&gt; boolean       | -                           |                                                             |
+| customSort       | Define a custom sort function                                    | (a: T, b: T, isAsc: boolean) =&gt; number    | -                           |                                                             |
 | display          | Provide a display function to edit the output                    | (value: unknown, row: T) =&gt; string        | -                           |                                                             |
-| doSearch         | Define a custom filter funtion for the search                    | (row: T, filter: string) =&gt; boolean       | -                           |                                                             |
-| doSort           | Define a custom sort function                                    | (a: T, b: T, isAsc: boolean) =&gt; number    | -                           |                                                             |
 | field            | Define an object property key if data is an object               | string                                       | -                           |                                                             |
 | headerSelectable | Make header selectable                                           | boolean                                      | -                           | <code style='white-space: nowrap; padding: 0;'>false</code> |
 | label            | Define the column label                                          | string                                       | -                           |                                                             |
diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue
index c37d578fb..f56ee3f7f 100644
--- a/packages/oruga/src/components/table/Table.vue
+++ b/packages/oruga/src/components/table/Table.vue
@@ -1013,8 +1013,8 @@ function isRowFiltered(row: T): boolean {
         // get column for filter
         const column = tableColumns.value.find((c) => c.field === key);
         // if column has onSearch return result
-        if (typeof column?.doSearch === "function")
-            return column.doSearch(row, filter);
+        if (typeof column?.customSearch === "function")
+            return column.customSearch(row, filter);
 
         const value = getValueByPath(row, key);
         if (value == null) return false;
@@ -1124,8 +1124,8 @@ function sortByColumn(rows: TableRow<T>[]): TableRow<T>[] {
     return sortBy<TableRow<T>>(
         rows,
         column?.field ? "value." + column.field : undefined,
-        column?.doSort
-            ? (a, b, asc): number => column.doSort(a.value, b.value, asc)
+        column?.customSort
+            ? (a, b, asc): number => column.customSort(a.value, b.value, asc)
             : undefined,
         isAsc.value,
     );
@@ -1672,7 +1672,7 @@ defineExpose({ rows: tableData });
                         <!-- row data columns -->
                         <th
                             v-for="(column, index) in visibleColumns"
-                            :key="column.identifier + ':' + index + 'header'"
+                            :key="`${column.identifier}_${index}_header`"
                             v-bind="column.thAttrsData"
                             :class="thClasses(column)"
                             :style="isMobileActive ? {} : column.style"
@@ -1754,9 +1754,7 @@ defineExpose({ rows: tableData });
                         <!-- row data columns -->
                         <th
                             v-for="(column, index) in visibleColumns"
-                            :key="
-                                column.identifier + ':' + index + 'searchable'
-                            "
+                            :key="`${column.identifier}_${index}_searchable`"
                             v-bind="column.thAttrsData"
                             :class="thClasses(column)"
                             :style="isMobileActive ? {} : column.style">
@@ -1793,9 +1791,7 @@ defineExpose({ rows: tableData });
                         <!-- row data columns -->
                         <th
                             v-for="(column, index) in visibleColumns"
-                            :key="
-                                column.identifier + ':' + index + 'subheading'
-                            "
+                            :key="`${column.identifier}_${index}_subheading`"
                             :style="isMobileActive ? {} : column.style"
                             :class="[...thBaseClasses, ...thSubheadingClasses]">
                             <template v-if="column.$slots?.subheading">
@@ -1816,7 +1812,7 @@ defineExpose({ rows: tableData });
                 <tbody>
                     <template
                         v-for="(row, index) in visibleRows"
-                        :key="row.key + ':' + index + '_row'">
+                        :key="`${row.key}_${index}_row`">
                         <tr
                             :class="rowClasses(row, index)"
                             :draggable="canDragRow"
@@ -1875,9 +1871,7 @@ defineExpose({ rows: tableData });
                             <!-- row data columns -->
                             <o-slot-component
                                 v-for="(column, colindex) in visibleColumns"
-                                :key="
-                                    column.identifier + index + ':' + colindex
-                                "
+                                :key="`${column.identifier}_${index}_${colindex}`"
                                 v-bind="column.tdAttrsData[index]"
                                 :component="column.$el"
                                 name="default"
@@ -1935,7 +1929,7 @@ defineExpose({ rows: tableData });
                                     :index="index" />
                                 <tr
                                     v-else
-                                    :key="row.key + '_detail'"
+                                    :key="`${row.key}_detail`"
                                     :class="detailedClasses">
                                     <td :colspan="columnCount">
                                         <!--
diff --git a/packages/oruga/src/components/table/TableColumn.vue b/packages/oruga/src/components/table/TableColumn.vue
index 4f13b4568..01ea27d89 100644
--- a/packages/oruga/src/components/table/TableColumn.vue
+++ b/packages/oruga/src/components/table/TableColumn.vue
@@ -57,12 +57,12 @@ const props = defineProps({
     /** Make header selectable */
     headerSelectable: { type: Boolean, default: false },
     /** Define a custom sort function */
-    doSort: {
+    customSort: {
         type: Function as PropType<(a: T, b: T, isAsc: boolean) => number>,
         default: undefined,
     },
     /** Define a custom filter funtion for the search */
-    doSearch: {
+    customSearch: {
         type: Function as PropType<(row: T, filter: string) => boolean>,
         default: undefined,
     },