diff --git a/package-lock.json b/package-lock.json
index c776c76..c6bcf83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3171,20 +3171,54 @@
           }
         },
         "@graphql-codegen/visitor-plugin-common": {
-          "version": "1.17.17",
-          "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.17.tgz",
-          "integrity": "sha512-UGstk36jlGSUXg2Z1/22B8qeVTY18mW6kuQVNY32kB5sy1wIVDi4eNS3OJdBTYDvL5MGTHjeWXk7EhSt3NP7gQ==",
+          "version": "1.17.20",
+          "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.20.tgz",
+          "integrity": "sha512-buIpcNNyTqVubknancX8m9jARCZsUA5eKuskg+CylWKL/8CSaD2Tiq7CfbbNO10o7XIgRrPtJMl1c9hQ6N4ytw==",
           "dev": true,
           "requires": {
-            "@graphql-codegen/plugin-helpers": "^1.18.1",
+            "@graphql-codegen/plugin-helpers": "^1.18.2",
+            "@graphql-tools/optimize": "^1.0.1",
             "@graphql-tools/relay-operation-optimizer": "^6",
-            "array.prototype.flatmap": "^1.2.3",
+            "array.prototype.flatmap": "^1.2.4",
             "auto-bind": "~4.0.0",
             "dependency-graph": "^0.9.0",
             "graphql-tag": "^2.11.0",
             "parse-filepath": "^1.0.2",
             "pascal-case": "^3.1.1",
             "tslib": "~2.0.1"
+          },
+          "dependencies": {
+            "@graphql-codegen/plugin-helpers": {
+              "version": "1.18.2",
+              "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-1.18.2.tgz",
+              "integrity": "sha512-SvX+Ryq2naLcoD6jJNxtzc/moWTgHJ+X0KRfvhGWTa+xtFTS02i+PWOR89YYPcD8+LF6GmyFBjx2FmLCx4JwMg==",
+              "dev": true,
+              "requires": {
+                "@graphql-tools/utils": "^6",
+                "camel-case": "4.1.1",
+                "common-tags": "1.8.0",
+                "constant-case": "3.0.3",
+                "import-from": "3.0.0",
+                "lodash": "~4.17.20",
+                "lower-case": "2.0.1",
+                "param-case": "3.0.3",
+                "pascal-case": "3.1.1",
+                "tslib": "~2.0.1",
+                "upper-case": "2.0.1"
+              }
+            },
+            "array.prototype.flatmap": {
+              "version": "1.2.4",
+              "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz",
+              "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==",
+              "dev": true,
+              "requires": {
+                "call-bind": "^1.0.0",
+                "define-properties": "^1.1.3",
+                "es-abstract": "^1.18.0-next.1",
+                "function-bind": "^1.1.1"
+              }
+            }
           }
         },
         "dependency-graph": {
@@ -3193,6 +3227,26 @@
           "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==",
           "dev": true
         },
+        "es-abstract": {
+          "version": "1.18.0-next.1",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
+          "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.2.2",
+            "is-negative-zero": "^2.0.0",
+            "is-regex": "^1.1.1",
+            "object-inspect": "^1.8.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.1",
+            "string.prototype.trimend": "^1.0.1",
+            "string.prototype.trimstart": "^1.0.1"
+          }
+        },
         "import-from": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
@@ -3202,6 +3256,12 @@
             "resolve-from": "^5.0.0"
           }
         },
+        "is-callable": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz",
+          "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==",
+          "dev": true
+        },
         "resolve-from": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
@@ -3243,20 +3303,54 @@
           }
         },
         "@graphql-codegen/visitor-plugin-common": {
-          "version": "1.17.17",
-          "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.17.tgz",
-          "integrity": "sha512-UGstk36jlGSUXg2Z1/22B8qeVTY18mW6kuQVNY32kB5sy1wIVDi4eNS3OJdBTYDvL5MGTHjeWXk7EhSt3NP7gQ==",
+          "version": "1.17.20",
+          "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.20.tgz",
+          "integrity": "sha512-buIpcNNyTqVubknancX8m9jARCZsUA5eKuskg+CylWKL/8CSaD2Tiq7CfbbNO10o7XIgRrPtJMl1c9hQ6N4ytw==",
           "dev": true,
           "requires": {
-            "@graphql-codegen/plugin-helpers": "^1.18.1",
+            "@graphql-codegen/plugin-helpers": "^1.18.2",
+            "@graphql-tools/optimize": "^1.0.1",
             "@graphql-tools/relay-operation-optimizer": "^6",
-            "array.prototype.flatmap": "^1.2.3",
+            "array.prototype.flatmap": "^1.2.4",
             "auto-bind": "~4.0.0",
             "dependency-graph": "^0.9.0",
             "graphql-tag": "^2.11.0",
             "parse-filepath": "^1.0.2",
             "pascal-case": "^3.1.1",
             "tslib": "~2.0.1"
+          },
+          "dependencies": {
+            "@graphql-codegen/plugin-helpers": {
+              "version": "1.18.2",
+              "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-1.18.2.tgz",
+              "integrity": "sha512-SvX+Ryq2naLcoD6jJNxtzc/moWTgHJ+X0KRfvhGWTa+xtFTS02i+PWOR89YYPcD8+LF6GmyFBjx2FmLCx4JwMg==",
+              "dev": true,
+              "requires": {
+                "@graphql-tools/utils": "^6",
+                "camel-case": "4.1.1",
+                "common-tags": "1.8.0",
+                "constant-case": "3.0.3",
+                "import-from": "3.0.0",
+                "lodash": "~4.17.20",
+                "lower-case": "2.0.1",
+                "param-case": "3.0.3",
+                "pascal-case": "3.1.1",
+                "tslib": "~2.0.1",
+                "upper-case": "2.0.1"
+              }
+            },
+            "array.prototype.flatmap": {
+              "version": "1.2.4",
+              "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz",
+              "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==",
+              "dev": true,
+              "requires": {
+                "call-bind": "^1.0.0",
+                "define-properties": "^1.1.3",
+                "es-abstract": "^1.18.0-next.1",
+                "function-bind": "^1.1.1"
+              }
+            }
           }
         },
         "dependency-graph": {
@@ -3265,6 +3359,26 @@
           "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==",
           "dev": true
         },
+        "es-abstract": {
+          "version": "1.18.0-next.1",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
+          "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.2.2",
+            "is-negative-zero": "^2.0.0",
+            "is-regex": "^1.1.1",
+            "object-inspect": "^1.8.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.1",
+            "string.prototype.trimend": "^1.0.1",
+            "string.prototype.trimstart": "^1.0.1"
+          }
+        },
         "import-from": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
@@ -3274,6 +3388,12 @@
             "resolve-from": "^5.0.0"
           }
         },
+        "is-callable": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz",
+          "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==",
+          "dev": true
+        },
         "resolve-from": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
@@ -3283,14 +3403,15 @@
       }
     },
     "@graphql-codegen/visitor-plugin-common": {
-      "version": "1.17.14",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.14.tgz",
-      "integrity": "sha512-tHVkMqQcWuq5xuXm7q8JKcKUVdEYaT61Hnz1OZNgYCBQIOCKUljZcmPuy3F8aJU29XHyZ2vwF2hNG6q4CE3fcQ==",
+      "version": "1.17.20",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-1.17.20.tgz",
+      "integrity": "sha512-buIpcNNyTqVubknancX8m9jARCZsUA5eKuskg+CylWKL/8CSaD2Tiq7CfbbNO10o7XIgRrPtJMl1c9hQ6N4ytw==",
       "dev": true,
       "requires": {
-        "@graphql-codegen/plugin-helpers": "^1.17.8",
-        "@graphql-tools/relay-operation-optimizer": "^6.0.18",
-        "array.prototype.flatmap": "^1.2.3",
+        "@graphql-codegen/plugin-helpers": "^1.18.2",
+        "@graphql-tools/optimize": "^1.0.1",
+        "@graphql-tools/relay-operation-optimizer": "^6",
+        "array.prototype.flatmap": "^1.2.4",
         "auto-bind": "~4.0.0",
         "dependency-graph": "^0.9.0",
         "graphql-tag": "^2.11.0",
@@ -3299,11 +3420,68 @@
         "tslib": "~2.0.1"
       },
       "dependencies": {
+        "@graphql-codegen/plugin-helpers": {
+          "version": "1.18.2",
+          "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-1.18.2.tgz",
+          "integrity": "sha512-SvX+Ryq2naLcoD6jJNxtzc/moWTgHJ+X0KRfvhGWTa+xtFTS02i+PWOR89YYPcD8+LF6GmyFBjx2FmLCx4JwMg==",
+          "dev": true,
+          "requires": {
+            "@graphql-tools/utils": "^6",
+            "camel-case": "4.1.1",
+            "common-tags": "1.8.0",
+            "constant-case": "3.0.3",
+            "import-from": "3.0.0",
+            "lodash": "~4.17.20",
+            "lower-case": "2.0.1",
+            "param-case": "3.0.3",
+            "pascal-case": "3.1.1",
+            "tslib": "~2.0.1",
+            "upper-case": "2.0.1"
+          }
+        },
+        "array.prototype.flatmap": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz",
+          "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3",
+            "es-abstract": "^1.18.0-next.1",
+            "function-bind": "^1.1.1"
+          }
+        },
         "dependency-graph": {
           "version": "0.9.0",
           "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.9.0.tgz",
           "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==",
           "dev": true
+        },
+        "es-abstract": {
+          "version": "1.18.0-next.1",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
+          "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.2.2",
+            "is-negative-zero": "^2.0.0",
+            "is-regex": "^1.1.1",
+            "object-inspect": "^1.8.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.1",
+            "string.prototype.trimend": "^1.0.1",
+            "string.prototype.trimstart": "^1.0.1"
+          }
+        },
+        "is-callable": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz",
+          "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==",
+          "dev": true
         }
       }
     },
@@ -3835,6 +4013,15 @@
         }
       }
     },
+    "@graphql-tools/optimize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@graphql-tools/optimize/-/optimize-1.0.1.tgz",
+      "integrity": "sha512-cRlUNsbErYoBtzzS6zXahXeTBZGPVlPHXCpnEZ0XiK/KY/sQL96cyzak0fM/Gk6qEI9/l32MYEICjasiBQrl5w==",
+      "dev": true,
+      "requires": {
+        "tslib": "~2.0.1"
+      }
+    },
     "@graphql-tools/prisma-loader": {
       "version": "6.2.5",
       "resolved": "https://registry.npmjs.org/@graphql-tools/prisma-loader/-/prisma-loader-6.2.5.tgz",
@@ -4973,38 +5160,6 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
-    "array.prototype.flatmap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz",
-      "integrity": "sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.0-next.1",
-        "function-bind": "^1.1.1"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.17.6",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
-          "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
-          "dev": true,
-          "requires": {
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.1",
-            "is-callable": "^1.2.0",
-            "is-regex": "^1.1.0",
-            "object-inspect": "^1.7.0",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.0",
-            "string.prototype.trimend": "^1.0.1",
-            "string.prototype.trimstart": "^1.0.1"
-          }
-        }
-      }
-    },
     "arraybuffer.slice": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz",
@@ -5837,6 +5992,16 @@
         }
       }
     },
+    "call-bind": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.0.tgz",
+      "integrity": "sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.0"
+      }
+    },
     "caller-callsite": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
@@ -8559,6 +8724,17 @@
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
     },
+    "get-intrinsic": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.1.tgz",
+      "integrity": "sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
     "get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@@ -9359,6 +9535,23 @@
         "resolve-from": "^3.0.0"
       }
     },
+    "import-from": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
+      "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^5.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+          "dev": true
+        }
+      }
+    },
     "import-local": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
diff --git a/src/app/components/reference-table/reference-table.component.html b/src/app/components/reference-table/reference-table.component.html
index fc64366..65952af 100644
--- a/src/app/components/reference-table/reference-table.component.html
+++ b/src/app/components/reference-table/reference-table.component.html
@@ -24,10 +24,21 @@
       <mat-label>Tabelle filtern</mat-label>
       <input
         matInput
-        (input)="applyTableFilter()"
         [(ngModel)]="tableFilterString"
+        (ngModelChange)="newFilterStringValue()"
         placeholder="Suchbegriff eingeben..."
       />
+      <button
+        mat-button
+        *ngIf="tableFilterString"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="tableFilterString = ''; applyTableFilter()"
+        color="accent"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
     </mat-form-field>
     <mat-paginator
       [pageSizeOptions]="[15, 25]"
diff --git a/src/app/components/reference-table/reference-table.component.ts b/src/app/components/reference-table/reference-table.component.ts
index 6906a5a..cdd53da 100644
--- a/src/app/components/reference-table/reference-table.component.ts
+++ b/src/app/components/reference-table/reference-table.component.ts
@@ -12,6 +12,8 @@ import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { FormControl, FormGroup } from '@angular/forms';
+import { Subject } from 'rxjs/internal/Subject';
+import { debounceTime } from 'rxjs/internal/operators/debounceTime';
 
 @Component({
   selector: 'app-reference-table',
@@ -78,7 +80,8 @@ export class ReferenceTableComponent {
 
   addForm: FormGroup = new FormGroup({ addGroup: new FormControl() });
 
-  tableFilterString: string = '';
+  tableFilterString = '';
+  filterStringChanged: Subject<string> = new Subject<string>();
 
   constructor(private schemaService: SchemaService) {}
 
@@ -92,6 +95,10 @@ export class ReferenceTableComponent {
     this.addForm
       .get('addGroup')
       .valueChanges.subscribe(() => this.filterPossibleValueOptions());
+
+    this.filterStringChanged
+      .pipe(debounceTime(400))
+      .subscribe(() => this.applyTableFilter());
   }
 
   ngAfterViewInit() {
@@ -175,6 +182,10 @@ export class ReferenceTableComponent {
     );
   }
 
+  newFilterStringValue(): void {
+    this.filterStringChanged.next(this.tableFilterString);
+  }
+
   applyTableFilter() {
     this.dataSource.filter = this.tableFilterString;
   }
diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html
index 75ea4e1..b3707cb 100644
--- a/src/app/components/table/table.component.html
+++ b/src/app/components/table/table.component.html
@@ -34,9 +34,20 @@
       <input
         matInput
         [(ngModel)]="filter.includesString"
-        (input)="applyFilter()"
+        (ngModelChange)="newFilterStringValue()"
         placeholder="Suchbegriff eingeben..."
       />
+      <button
+        mat-button
+        *ngIf="filter.includesString"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="filter.includesString = ''; applyFilter()"
+        color="accent"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
     </mat-form-field>
     <button
       *ngIf="!filter.onlyUnsaved && countUnsavedRows() > 0"
diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts
index 2497178..4250556 100644
--- a/src/app/components/table/table.component.ts
+++ b/src/app/components/table/table.component.ts
@@ -5,6 +5,7 @@ import {
   Input,
   Output,
   ViewChild,
+  AfterViewInit,
 } from '@angular/core';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { CargoBikeResult } from 'src/app/services/bikes.service';
@@ -17,13 +18,15 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/internal/operators/debounceTime';
 
 @Component({
   selector: 'app-table',
   templateUrl: './table.component.html',
   styleUrls: ['./table.component.scss'],
 })
-export class TableComponent {
+export class TableComponent implements AfterViewInit {
   @Input()
   headline: string = null;
   /** this array defines the columns and translations of the table and the order they are displayed  */
@@ -69,6 +72,8 @@ export class TableComponent {
   @Input()
   relockingIntervalDuration = 1000 * 60 * 1;
   filter = { includesString: '', onlyUnsaved: false };
+  filterStringChanged: Subject<string> = new Subject<string>();
+
   initialFilter = this.filter;
   isLoaded = false;
 
@@ -78,8 +83,13 @@ export class TableComponent {
   @Output() cancelEvent = new EventEmitter();
   @Output() deleteEvent = new EventEmitter();
 
-  constructor(private schemaService: SchemaService, public dialog: MatDialog, private activatedroute:ActivatedRoute) {
-    this.filter.includesString = this.activatedroute.snapshot.queryParamMap.get('filter') || '';
+  constructor(
+    private schemaService: SchemaService,
+    public dialog: MatDialog,
+    private activatedroute: ActivatedRoute
+  ) {
+    this.filter.includesString =
+      this.activatedroute.snapshot.queryParamMap.get('filter') || '';
   }
 
   ngAfterViewInit() {
@@ -109,6 +119,10 @@ export class TableComponent {
       return a && b;
     };
 
+    this.filterStringChanged
+      .pipe(debounceTime(400))
+      .subscribe(() => this.applyFilter());
+
     this.columnInfo.forEach((column) =>
       this.displayedColumns.push(column.dataPath)
     );
@@ -119,15 +133,15 @@ export class TableComponent {
       this.loadingRowIds = rowIds;
     });
 
-    this.dataService.successfullyCreatedRowWithId.subscribe(id => {
-      this.data.data = this.data.data.filter(row => row.id !== id);
-    })
+    this.dataService.successfullyCreatedRowWithId.subscribe((id) => {
+      this.data.data = this.data.data.filter((row) => row.id !== id);
+    });
 
     this.dataService.tableData.subscribe((newTableDataSource) => {
       this.reloadingTable = false;
       const tempDataSource = [];
       if (newTableDataSource === null) {
-        return;  
+        return;
       }
       this.isLoaded = true;
       for (const row of newTableDataSource) {
@@ -184,8 +198,10 @@ export class TableComponent {
         this.tableDataGQLCreateInputType,
         column.dataPath
       );
-      column.requiredForCreation = column.requiredForCreation || typeInformation.isRequired;
-      column.acceptedForCreation = column.acceptedForCreation || typeInformation.isPartOfType;
+      column.requiredForCreation =
+        column.requiredForCreation || typeInformation.isRequired;
+      column.acceptedForCreation =
+        column.acceptedForCreation || typeInformation.isPartOfType;
     }
   }
 
@@ -261,7 +277,7 @@ export class TableComponent {
       this.tableDataGQLCreateInputType,
       deepen(row)
     );
-    this.createEvent.emit({currentId: row.id, row: newRow});
+    this.createEvent.emit({ currentId: row.id, row: newRow });
   }
 
   lock(row: any) {
@@ -338,7 +354,11 @@ export class TableComponent {
     this.applyFilter();
   }
 
-  applyFilter() {
+  newFilterStringValue(): void {
+    this.filterStringChanged.next(this.filter.includesString);
+  }
+
+  applyFilter(): void {
     this.data.filter = ({
       ...this.filter,
       includesString: this.filter.includesString.trim().toLowerCase(),