Search

Author: jods4

demo/app.vue

@@ -4,14 +4,17 @@
   <button @click='fetch(1500)'>Load data (1.5s)</button>
   Selected count: {{ selected.size }}
   <button @click='selected.clear()'>Clear selection</button>
+  <input type='search' v-model='search' placeholder='Search...' />
 </div>
 <ui-datagrid :data='data' :columns='columns' 
              :selected='selected'
+             :search='search'
              style='flex: 1' />
 </template>
 
 <script lang="ts">
-import { markNonReactive, ref, shallowReactive } from "vue";
+import { markNonReactive, ref, shallowReactive } from 'vue';
+import { debouncedRef } from './debounceRef';
 
 export default {
   setup() {
@@ -21,7 +24,7 @@ export default {
         { label: 'Name', data: 'name' },
         { label: 'Height', data: 'height', css: 'dg-right', sortable: false, width: 100 },
         { label: 'Weight', data: 'weight', css: 'dg-right', sortable: false, width: 100 },
-        { label: 'Spawn chance', data: 'spawn_chance', right: true, width: 100 },
+        { label: 'Spawn chance', data: 'spawn_chance', right: true, searchable: false, width: 100 },
       ],
       data: ref<any>([]),
 
@@ -32,6 +35,8 @@ export default {
       },
 
       selected: shallowReactive(new Set()),
+
+      search: debouncedRef(400, ''),
     };
 
     state.fetch(0);

demo/debounceRef.ts

@@ -0,0 +1,18 @@
+import { Ref } from 'vue';
+import { track, trigger, TrackOpTypes, TriggerOpTypes } from '@vue/reactivity';
+
+export function debouncedRef<T>(delay: number, value?: T) {  
+  let timeout = 0;
+  return <Ref<T>><any>{
+    _isRef: true,
+    get value() {
+      track(this, TrackOpTypes.GET, 'value');
+      return value;
+    },
+    set value(v) {
+      value = v;
+      clearTimeout(timeout);
+      timeout = setTimeout(<Function>(() => trigger(this, TriggerOpTypes.SET, 'value')), delay);
+    },
+  };
+}

src/columns/filler.ts

@@ -2,7 +2,14 @@ import { shallowReactive as sreactive, onMounted, watchEffect } from 'vue';
 import { Column } from './column';
 
 export function addFiller(columns: Column[], size: { width: number }) {
-  const filler = sreactive({ key: 'fill', sortable: false, header: () => '', render: () => '', width: 0 });
+  const filler = sreactive({ 
+    key: 'fill', 
+    sortable: false, 
+    searchable: false, 
+    header: () => '', 
+    render: () => '', 
+    width: 0 
+  });
 
   columns.push(filler);
 

src/datagrid.vue

@@ -45,7 +45,8 @@ import { onMounted, reactive, shallowReactive, shallowRef as sref, watchEffect,
 import { AnimBody, AnimColumn, useAnimations } from "./animation";
 import { addFiller, autoSize, Column, ColumnDefinition, ColResizer } from './columns';
 import { ItemDirective, getItem } from './item';
-import ResizeDirective from './resize';
+import { ResizeDirective } from './resize';
+import { useSearching } from './search';
 import { addSelection } from './selection';
 import { useSorting, SortIndicator } from './sort';
 import { Ctor, view } from './utils';
@@ -70,6 +71,7 @@ export default defineComponent({
     columns: { type: Array as Ctor<ColumnDefinition[]>, required: true },
     data: [Array as Ctor<object[]>, Promise as Ctor<Promise<object[]>>],
     selected: Set as Ctor<Set<object>>,
+    search: String,
   },
 
   setup(props) {
@@ -79,10 +81,10 @@ export default defineComponent({
     const table = sref();
     const size = shallowReactive({ width: 0, height: 0 });
     const headerSize = shallowReactive({ width: 0, height: 0 });
-    const sorting = useSorting(data);
+    const sorting = useSorting(useSearching(data, props));
     const { scrollToTop } = useVirtual(sorting.data, size);
     
-    const columns: Column[] = reactive(props.columns!.map((c, i) => ({
+    const columns: Column[] = reactive(props.columns.map((c, i) => ({
       header: (childProps: any) => c.label + "",
       render: (childProps: any) => childProps.data[c.data!] + "",      
       width: 0,
@@ -97,6 +99,7 @@ export default defineComponent({
     const headerPointerDown = useAnimations(columns, autoSized);
 
     onMounted(() => watchEffect(async () => {
+      // TODO: empty grid because of no props.data or await data == []
       loading.value = true;
       data.value = await props.data!;
       loading.value = false;

src/resize.ts

@@ -1,6 +1,6 @@
 import { ObjectDirective } from "vue";
 
-export default <ObjectDirective>{
+export const ResizeDirective = <ObjectDirective>{
   beforeMount(el, binding) {
     const size = binding.value as { width: number; height: number };
     const observer = new ResizeObserver(entries => {

src/search.ts

@@ -0,0 +1,23 @@
+import { computed, Ref } from 'vue';
+import { ColumnDefinition } from './columns';
+
+function escapeRegExp(re: string) {
+  return re.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export function useSearching(data: Ref<object[]>, props: { search?: string, columns: ColumnDefinition[] }) {
+  return computed(() => {
+    const { search, columns } = props;
+    if (!search) return data.value;
+    const re = RegExp(escapeRegExp(search), 'i');
+    const searchables = columns.filter(c => c.searchable !== false).map(c => c.data!);
+    return data.value.filter(obj => {
+      for (const s of searchables) {
+        const val = obj[s];
+        if (val != null && re.test(val + ""))
+          return true;
+      }
+      return false;
+    });
+  });  
+}

src/selection/index.ts src/selection.ts

@@ -1,5 +1,5 @@
-import { computed, Ref, watch, h } from "vue";
-import { Column } from '../columns';
+import { computed, Ref, watch, h } from 'vue';
+import { Column } from './columns';
 
 export function addSelection(columns: Column[], data: Ref<object[]>, selected: Set<object> | undefined) {
   if (!selected) return null;
@@ -24,6 +24,7 @@ export function addSelection(columns: Column[], data: Ref<object[]>, selected: S
     key: 'select',
     resizable: false,
     sortable: false, 
+    searchable: false,
     defaultWidth: 0,
     width: 0,
     header: () => h('input', { 

src/virtual/body.vue

@@ -3,7 +3,7 @@
     <tr :style='{ height: topGap + "px" }' />
     <tr v-if='(index & 1) === 0' />
   </tbody>
-  <slot :items="items" />
+  <slot :items='items' />
   <tbody>
     <tr :style='{ height: bottomGap + "px" }' />
   </tbody>

src/virtual/index.ts

@@ -1,4 +1,4 @@
-import { Ref, provide, shallowReactive, unref, watchEffect } from "vue";
+import { computed, Ref, provide, reactive, unref } from "vue";
 import { injectKey, VirtualState } from './state';
 
 export { default as VirtualScroller } from './scroller.vue';
@@ -7,34 +7,32 @@ export { default as VirtualBody } from './body.vue';
 type Val<T> = T | Ref<T>;
 
 export function useVirtual(data: Val<object[]>, size: { height: number }) {
-  const state: VirtualState = shallowReactive({
+  const state: VirtualState = reactive({
     scroller: <any>null!, // initialized on mount // FIXME: TS error if declared as Element?
     scrollTop: 0,
     rowHeight: 25,
     buffer: 4,
     topGap: 0,
     bottomGap: 0,
-    index: 0,
-    count: 0,
 
-    items: function*() {
-      const all = unref(data);
-      const to = state.index + state.count;
-      for (let i = state.index; i < to; i++)
-        yield all[i];
-    },
-  });
+    items: computed(() => {
+      // Technically, size.height is slighty too high because it's the height of the full table, 
+      // including thead, rather than just tbody.
+      // That's not an issue though, it just means one or two extra rows will be rendered past the bottom.
+      const length = unref(data).length;
+      const { buffer, rowHeight, scrollTop } = state;
+      const index = Math.max((scrollTop / rowHeight | 0) - buffer, 0);
+      const count = Math.min((size.height / rowHeight | 0) + 1 + buffer + buffer, length - index);
+      state.topGap = index * rowHeight;
+      state.bottomGap = (length - count - index) * rowHeight;
 
-  watchEffect(() => {
-    // Technically, size.height is slighty too high because it's the height of the full table, 
-    // including thead, rather than just tbody.
-    // That's not an issue though, it just means one or two extra rows will be rendered past the bottom.
-    const length = unref(data).length;
-    const { buffer, rowHeight, scrollTop } = state;
-    const index = state.index = Math.max((scrollTop / rowHeight | 0) - buffer, 0);
-    const count = state.count = Math.min((size.height / rowHeight | 0) + 1 + buffer + buffer, length - index);
-    state.topGap = index * rowHeight;
-    state.bottomGap = (length - count - index) * rowHeight;
+      return function*() {
+        const all = unref(data);
+        const to = index + count;
+        for (let i = index; i < to; i++)
+          yield all[i];
+      };
+    }),
   });
 
   provide(injectKey, state);

src/virtual/state.ts

@@ -7,8 +7,6 @@ export interface VirtualState {
   buffer: number;
   topGap: number;
   bottomGap: number;
-  index: number;
-  count: number;
 
   items: () => Iterator<object>;
 }