diff --git a/public/js/components/filter/Filter/Columns.js b/public/js/components/filter/Filter/Columns.js
new file mode 100644
index 000000000..448d05d17
--- /dev/null
+++ b/public/js/components/filter/Filter/Columns.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright (C) 2022 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see .
+ */
+
+/**
+ *
+ */
+export default {
+ props: {
+ fields: Array,
+ selected: {
+ type: Array,
+ default: []
+ },
+ names: {
+ type: Array,
+ default: []
+ }
+ },
+ emits: [
+ 'hide',
+ 'show'
+ ],
+ data: function() {
+ return {
+ selectedFields: []
+ };
+ },
+ computed: {
+
+ },
+ watch: {
+ selected(n) {
+ this.selectedFields = n;
+ }
+ },
+ methods: {
+ toggle(field) {
+ if (this.selectedFields.indexOf(field) != -1)
+ {
+ this.selectedFields.splice(this.selectedFields.indexOf(field), 1);
+ this.$emit('hide', field);
+ }
+ else
+ {
+ this.selectedFields.push(field);
+ this.$emit('show', field);
+ }
+ }
+ },
+ template: `
+
+
+
+
+
+ {{ names[fieldToDisplay] || fieldToDisplay }}
+
+
+
+
+
+ `
+};
+
diff --git a/public/js/components/filter/Filter/Config.js b/public/js/components/filter/Filter/Config.js
new file mode 100644
index 000000000..6869c1599
--- /dev/null
+++ b/public/js/components/filter/Filter/Config.js
@@ -0,0 +1,215 @@
+/**
+ * Copyright (C) 2022 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see .
+ */
+
+const FILTER_COMPONENT_NEW_FILTER = 'Filter Component New Filter';
+
+/**
+ *
+ */
+export default {
+ props: {
+ filters: {
+ type: Array,
+ default: []
+ },
+ columns: {
+ type: Array,
+ default: []
+ },
+ fields: {
+ type: Array,
+ default: []
+ }
+ },
+ emits: [
+ 'switchFilter',
+ 'applyFilterConfig',
+ 'saveCustomFilter'
+ ],
+ data: function() {
+ return {
+ currentFields: []
+ };
+ },
+ computed: {
+ types() {
+ return this.columns.reduce((a,c) => {
+ let type = c.type.toLowerCase();
+ if (type.indexOf('int') >= 0)
+ a[c.name] = 'Numeric';
+ else if (
+ type.indexOf('varchar') >= 0 ||
+ type.indexOf('text') >= 0 ||
+ type.indexOf('bpchar') >= 0
+ )
+ a[c.name] = 'Text';
+ else if (
+ type.indexOf('timestamp') >= 0 ||
+ type.indexOf('date') >= 0
+ )
+ a[c.name] = 'Date';
+ else
+ a[c.name] = '';
+ return a;
+ }, {});
+ }
+ },
+ watch: {
+ fields(n) {
+ this.currentFields = n;
+ }
+ },
+ methods: {
+ switchFilter(evt) {
+ this.$emit('switchFilter', evt.currentTarget.value);
+ },
+ applyFilterConfig() {
+ const filteredFields = this.currentFields.filter(el => el.name != FILTER_COMPONENT_NEW_FILTER);
+ if (filteredFields.filter(el => el.condition == "").length)
+ alert("Please fill all the filter options");
+ else
+ this.$emit('applyFilterConfig', filteredFields);
+ },
+ addField(evt) {
+ this.currentFields.push({
+ name: FILTER_COMPONENT_NEW_FILTER
+ });
+ },
+ removeField(index) {
+ this.currentFields.splice(index, 1);
+ }
+ },
+ template: `
+