feat: adding custom-search prop

Author: pohnean

src/components/DataTable.vue

@@ -73,7 +73,7 @@
                   v-else-if="slots['header']"
                   name="header"
                   v-bind="header"
-                />   
+                />
                 <span
                   v-else
                   class="header-text"
@@ -145,7 +145,7 @@
                 // eslint-disable-next-line max-len
                 }, typeof bodyItemClassName === 'string' ? bodyItemClassName : bodyItemClassName(column, index + 1), `direction-${bodyTextDirection}`]"
                 @click="column === 'expand' ? updateExpandingItemIndexList(index + prevPageEndIndex, item, $event) : null"
-              > 
+              >
                 <slot
                   v-if="slots[`item-${column}`]"
                   :name="`item-${column}`"
@@ -482,6 +482,7 @@ const {
   itemsSelected,
   searchField,
   searchValue,
+  props.customSearch,
   serverItemsLength,
   multiSort,
   emits,

src/hooks/useTotalItems.ts

@@ -13,10 +13,21 @@ export default function useTotalItems(
   itemsSelected: Ref<Item[]>,
   searchField: Ref<string>,
   searchValue: Ref<string>,
+  customSearch: (item: Item) => boolean | undefined,
   serverItemsLength: Ref<number>,
   multiSort: Ref<boolean>,
   emits: (event: EmitsEventName, ...args: any[]) => void,
 ) {
+  const defaultSearchFunction = (item: Item) => {
+    if (searchValue.value === '') {
+      return true;
+    }
+
+    const regExp = new RegExp(searchValue.value, 'i');
+    return regExp.test(generateSearchingTarget(item));
+  };
+
+
   const generateSearchingTarget = (item: Item): string => {
     if (typeof searchField.value === 'string' && searchField.value !== '') return getItemValue(searchField.value, item);
     if (Array.isArray(searchField.value)) {
@@ -32,9 +43,9 @@ export default function useTotalItems(
   // items searching
   const itemsSearching = computed((): Item[] => {
     // searching feature is not available in server-side mode
-    if (!isServerSideMode.value && searchValue.value !== '') {
-      const regex = new RegExp(searchValue.value, 'i');
-      return items.value.filter((item) => regex.test(generateSearchingTarget(item)));
+    if (!isServerSideMode.value) {
+      const searchFn =  customSearch ?? defaultSearchFunction;
+      return items.value.filter(searchFn);
     }
     return items.value;
   });

src/modes/Client.vue

@@ -33,6 +33,7 @@
       :header-item-class-name="headerItemClassNameFunction"
       :body-item-class-name="bodyItemClassNameFunction"
       :body-expand-row-class-name="bodyExpandRowClassNameFunction"
+      :custom-search="customSearchFunction"
       @update-sort="updateSort"
       @update-filter="updateFilter"
       multi-sort
@@ -165,6 +166,21 @@ const updateTotalItems = (items: Item[]) => {
   console.log(JSON.stringify(items));
 };
 
+// Example of Custom search by name and height
+// e.g.: searchValue = 'h 6-11'
+const customSearchFunction = (item: Item) => {
+  const keyword = searchValue.value.toLowerCase();
+
+  return keyword
+      .split(' ')
+      .every((word) => {
+        const nameMatched = item.name.toLowerCase().includes(word);
+        const heightMatched = item.indicator.height.toLowerCase().includes(word);
+
+        return nameMatched || heightMatched;
+      });
+}
+
 const items = ref<Item[]>([
   { name: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
   { name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},

src/propsWithDefault.ts

@@ -103,6 +103,10 @@ export default {
     type: String,
     default: '',
   },
+  customSearch: {
+    type: Object as PropType<(item: Item) => boolean> | null,
+    default: null,
+  },
   serverOptions: {
     type: Object as PropType<ServerOptions> | null,
     default: null,