feat: filter using all keys if filterby not provided

boussadjra · Nov 19, 2023 · 1df6dd1 · 1df6dd1
1 parent db64e02
commit 1df6dd1
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 18 deletions.
diff --git a/packages/vueye-table/src/App.vue b/packages/vueye-table/src/App.vue
@@ -150,14 +150,7 @@ const search = ref('')
         <AppHeader class="docs__header" />
         <main class="flex justify-center flex-col items-center p-4">
             <input v-model="search" class="input" placeholder="Search..." aria-label="Search" />
-            <VueyeTable
-                class="tbl"
-                :data="items"
-                :column-headers="columns"
-                :per-page="5"
-                :filter-query="search"
-                :filter-by="['name.first_name', 'age']"
-            >
+            <VueyeTable class="tbl" :data="items" :column-headers="columns" :per-page="5" :filter-query="search">
             </VueyeTable>
         </main>
     </div>

diff --git a/packages/vueye-table/src/components/core/VueyeTable/api.ts b/packages/vueye-table/src/components/core/VueyeTable/api.ts
@@ -53,6 +53,7 @@ export function getVueyeTablePropDefaults<
         filterBy: undefined,
         filterMethod: (query, item, filterBy) => {
             if (query === '' || query === undefined || filterBy === undefined || filterBy.length === 0) return true
+
             const found = filterBy?.some((key) => {
                 const value = item[key] as NativeType
 

diff --git a/packages/vueye-table/src/components/core/VueyeTable/composables/useBodyRows.ts b/packages/vueye-table/src/components/core/VueyeTable/composables/useBodyRows.ts
@@ -1,4 +1,4 @@
-import { ColumnHeader } from '../types'
+import { ColumnHeader, FlattenKeys } from '../types'
 
 import { MaybeRef } from 'vue'
 import { getBodyRows, paginateRows } from '../utils'
@@ -11,7 +11,6 @@ interface PaginationProps {
 
 export function useBodyRows<TData extends Record<string, unknown>, TColumn extends ColumnHeader<TData>>(
     props: VueyeTableProps<TData, TColumn>,
-
     headers: MaybeRef<ColumnHeader[]>,
     pagination: MaybeRef<PaginationProps>
 ) {
@@ -20,7 +19,13 @@ export function useBodyRows<TData extends Record<string, unknown>, TColumn exten
         const end = toValue(pagination).perPage * toValue(pagination).currentPage
 
         const rows = getBodyRows(toValue(props.data), toValue(headers))
-        const filteredRows = rows.filter((item) => props.filterMethod?.(props.filterQuery, item, props.filterBy))
+        const filterBy = computed(() => {
+            if (props.filterBy === undefined || props.filterBy.length === 0) {
+                return Object.keys(rows[0]) as FlattenKeys<TData>[]
+            }
+            return props.filterBy
+        })
+        const filteredRows = rows.filter((item) => props.filterMethod?.(props.filterQuery, item, toValue(filterBy)))
         return paginateRows(filteredRows, start, end)
     })
 

diff --git a/packages/vueye-table/src/stories/filter/filter.story.vue b/packages/vueye-table/src/stories/filter/filter.story.vue
@@ -132,18 +132,15 @@ const columns = defineTableColumnHeaders([
 ])
 
 const search = ref('b')
-
-function filterMethod(query: string | undefined, item: any): boolean {
-    return item.name.first_name.toLowerCase().includes(query?.toLowerCase())
-}
 </script>
 
 <template>
     <Story title="Filter" icon="lucide:filter">
         <Variant title="Default">
             <p>You can enable filtering by setting the <code>`filter-query`</code> prop to a string.</p>
             <input v-model="search" class="input" placeholder="Search..." />
-            <VueyeTable :data="items" :column-headers="columns" :filter-query="search"> </VueyeTable>
+            <VueyeTable class="tbl" :data="items" :column-headers="columns" :per-page="5" :filter-query="search">
+            </VueyeTable>
         </Variant>
 
         <Variant title="Custom filter method">
@@ -153,8 +150,7 @@ function filterMethod(query: string | undefined, item: any): boolean {
             </p>
             <input v-model="search" class="input" placeholder="Search..." />
 
-            <VueyeTable :data="items" :column-headers="columns" :filter-query="search" :filter-method="filterMethod">
-            </VueyeTable>
+            <VueyeTable :data="items" :column-headers="columns" :filter-query="search"> </VueyeTable>
         </Variant>
     </Story>
 </template>