Skip to content

Commit ffc112d

Browse files
committed
feat: adding custom-search prop
1 parent aa77f92 commit ffc112d

File tree

4 files changed

+26
-4
lines changed

4 files changed

+26
-4
lines changed

src/components/DataTable.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
v-else-if="slots['header']"
7474
name="header"
7575
v-bind="header"
76-
/>
76+
/>
7777
<span
7878
v-else
7979
class="header-text"
@@ -145,7 +145,7 @@
145145
// eslint-disable-next-line max-len
146146
}, typeof bodyItemClassName === 'string' ? bodyItemClassName : bodyItemClassName(column, index + 1), `direction-${bodyTextDirection}`]"
147147
@click="column === 'expand' ? updateExpandingItemIndexList(index + prevPageEndIndex, item, $event) : null"
148-
>
148+
>
149149
<slot
150150
v-if="slots[`item-${column}`]"
151151
:name="`item-${column}`"
@@ -482,6 +482,7 @@ const {
482482
itemsSelected,
483483
searchField,
484484
searchValue,
485+
props.customSearch,
485486
serverItemsLength,
486487
multiSort,
487488
emits,

src/hooks/useTotalItems.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default function useTotalItems(
1313
itemsSelected: Ref<Item[]>,
1414
searchField: Ref<string>,
1515
searchValue: Ref<string>,
16+
customSearch: (item: Item) => boolean | undefined,
1617
serverItemsLength: Ref<number>,
1718
multiSort: Ref<boolean>,
1819
emits: (event: EmitsEventName, ...args: any[]) => void,
@@ -33,8 +34,8 @@ export default function useTotalItems(
3334
const itemsSearching = computed((): Item[] => {
3435
// searching feature is not available in server-side mode
3536
if (!isServerSideMode.value && searchValue.value !== '') {
36-
const regex = new RegExp(searchValue.value, 'i');
37-
return items.value.filter((item) => regex.test(generateSearchingTarget(item)));
37+
const searchFn = customSearch ?? ((item) => new RegExp(searchValue.value, 'i').test(generateSearchingTarget(item)));
38+
return items.value.filter(searchFn);
3839
}
3940
return items.value;
4041
});

src/modes/Client.vue

+16
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
:header-item-class-name="headerItemClassNameFunction"
3434
:body-item-class-name="bodyItemClassNameFunction"
3535
:body-expand-row-class-name="bodyExpandRowClassNameFunction"
36+
:custom-search="customSearchFunction"
3637
@update-sort="updateSort"
3738
@update-filter="updateFilter"
3839
multi-sort
@@ -165,6 +166,21 @@ const updateTotalItems = (items: Item[]) => {
165166
console.log(JSON.stringify(items));
166167
};
167168
169+
// Example of Custom search by name and height
170+
// e.g.: searchValue = 'h 6-11'
171+
const customSearchFunction = (item: Item) => {
172+
const keyword = searchValue.value.toLowerCase();
173+
174+
return keyword
175+
.split(' ')
176+
.every((word) => {
177+
const nameMatched = item.name.toLowerCase().includes(word);
178+
const heightMatched = item.indicator.height.toLowerCase().includes(word);
179+
180+
return nameMatched || heightMatched;
181+
});
182+
}
183+
168184
const items = ref<Item[]>([
169185
{ name: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
170186
{ name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},

src/propsWithDefault.ts

+4
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,10 @@ export default {
103103
type: String,
104104
default: '',
105105
},
106+
customSearch: {
107+
type: Object as PropType<(item: Item) => boolean> | null,
108+
default: null,
109+
},
106110
serverOptions: {
107111
type: Object as PropType<ServerOptions> | null,
108112
default: null,

0 commit comments

Comments
 (0)