Group filters

src/components/runners/RunnersOverview.svelte

@@ -14,6 +14,27 @@
   $: selected =
     $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
 
+  const groupFilter = (row, columnId, value, addMeta) => {
+    const group = row.getValue(columnId);
+    if (group.responseType === "RUNNERORGANIZATION") {
+      return group.name.toLowerCase().includes(value.toLowerCase());
+    } else if (value.includes(">")) {
+      value = value.split(">")[1];
+      if(value.length == 0){
+        return group.name.toLowerCase().includes(value.toLowerCase());
+      }
+      return (
+        group.name.toLowerCase().includes(value.toLowerCase()) ||
+        group.parentGroup.name.toLowerCase().includes(value.toLowerCase())
+      );
+    } else {
+      return (
+        group.name.toLowerCase().includes(value.toLowerCase()) ||
+        group.parentGroup.name.toLowerCase().includes(value.toLowerCase())
+      );
+    }
+  };
+
   const columns = [
     {
       accessorKey: "id",
@@ -22,30 +43,34 @@
     },
     {
       accessorKey: "firstname",
-      header: () => $_('first-name'),
+      header: () => $_("first-name"),
       filterFn: `includesString`,
     },
     {
       accessorKey: "lastname",
-      header: () => $_('last-name'),
+      header: () => $_("last-name"),
       filterFn: `includesString`,
     },
     {
       accessorKey: "group",
-      header: () => $_('group'),
+      header: () => $_("group"),
       cell: (info) => {
         const group = info.getValue();
-        if(group.responseType === "RUNNERORGANIZATION"){return group.name}
+        if (group.responseType === "RUNNERORGANIZATION") {
-        return `${group.parentGroup.name} > ${group.name}`
+          return group.name;
+        }
+        return `${group.parentGroup.name} > ${group.name}`;
       },
-      filterFn: `includesString`,
+      filterFn: `group`,
     },
     {
       accessorKey: "distance",
-      header: () => $_('distance'),
+      header: () => $_("distance"),
       cell: (info) => {
-        if(info.getValue() < 1000){return `${info.getValue()} m`}
+        if (info.getValue() < 1000) {
-        return `${(info.getValue() / 1000).toFixed(1)} km`
+          return `${info.getValue()} m`;
+        }
+        return `${(info.getValue() / 1000).toFixed(1)} km`;
       },
       enableColumnFilter: false,
     },
@@ -84,6 +109,9 @@
   const options = writable({
     data: [],
     columns: columns,
+    filterFns: {
+      group: groupFilter,
+    },
     initialState: {
       pagination: {
         pageSize: tablePageCount[0],