Fixed #217, Fixed #219 , Fixed #220

src/components/utils/FilterUtils.js

@@ -1,3 +1,5 @@
+import ObjectUtils from './ObjectUtils';
+
 export default class FilterUtils {
 
     static startsWith(value, filter) {
@@ -9,8 +11,10 @@ export default class FilterUtils {
             return false;
         }
 
-        let filterValue = filter.toLowerCase();
+        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
-        return value.toString().toLowerCase().slice(0, filterValue.length) === filterValue;
+        let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
+
+        return stringValue.slice(0, filterValue.length) === filterValue;
     }
 
     static contains(value, filter) {
@@ -22,7 +26,10 @@ export default class FilterUtils {
             return false;
         }
 
-        return value.toString().toLowerCase().indexOf(filter.toLowerCase()) !== -1;
+        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
+        let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
+
+        return stringValue.indexOf(filterValue) !== -1;
     }
 
     static endsWith(value, filter) {
@@ -34,8 +41,10 @@ export default class FilterUtils {
             return false;
         }
 
-        let filterValue = filter.toString().toLowerCase();
+        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLowerCase();
-        return value.toString().toLowerCase().indexOf(filterValue, value.toString().length - filterValue.length) !== -1;
+        let stringValue = ObjectUtils.removeAccents(value.toString()).toLowerCase();
+
+        return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
     }
 
     static equals(value, filter) {
@@ -47,7 +56,10 @@ export default class FilterUtils {
             return false;
         }
 
-        return value.toString().toLowerCase() === filter.toString().toLowerCase();
+        if (value.getTime && filter.getTime)
+            return value.getTime() === filter.getTime();
+        else
+            return ObjectUtils.removeAccents(value.toString()).toLowerCase() == ObjectUtils.removeAccents(filter.toString()).toLowerCase();
     }
 
     static notEquals(value, filter) {
@@ -59,7 +71,10 @@ export default class FilterUtils {
             return true;
         }
 
-        return value.toString().toLowerCase() !== filter.toString().toLowerCase();
+        if (value.getTime && filter.getTime)
+            return value.getTime() !== filter.getTime();
+        else
+            return ObjectUtils.removeAccents(value.toString()).toLowerCase() != ObjectUtils.removeAccents(filter.toString()).toLowerCase();
     }
 
     static in(value, filter) {
@@ -72,11 +87,72 @@ export default class FilterUtils {
         }
 
         for (let i = 0; i < filter.length; i++) {
-            if (filter[i] === value)
+            if (filter[i] === value || (value.getTime && filter[i].getTime && value.getTime() === filter[i].getTime())) {
                 return true;
             }
+        }
 
         return false;
     }
 
+    static lt(value, filter) {
+        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        if (value.getTime && filter.getTime)
+            return value.getTime() < filter.getTime();
+        else
+            return value < parseFloat(filter);
+    }
+
+    static lte(value, filter) {
+        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        if (value.getTime && filter.getTime)
+            return value.getTime() <= filter.getTime();
+        else
+            return value <= parseFloat(filter);
+    }
+
+    static gt(value, filter) {
+        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        if (value.getTime && filter.getTime)
+            return value.getTime() > filter.getTime();
+        else
+            return value > parseFloat(filter);
+    }
+
+    static gte(value, filter) {
+        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        if (value.getTime && filter.getTime)
+            return value.getTime() >= filter.getTime();
+        else
+            return value >= parseFloat(filter);
+    }
+
 }

src/components/utils/ObjectUtils.js

@@ -151,4 +151,33 @@ export default class ObjectUtils {
             arr.push(item);
         }
     }
+
+    static removeAccents(str) {
+        if (str && str.search(/[\xC0-\xFF]/g) > -1) {
+            str = str
+                    .replace(/[\xC0-\xC5]/g, "A")
+                    .replace(/[\xC6]/g, "AE")
+                    .replace(/[\xC7]/g, "C")
+                    .replace(/[\xC8-\xCB]/g, "E")
+                    .replace(/[\xCC-\xCF]/g, "I")
+                    .replace(/[\xD0]/g, "D")
+                    .replace(/[\xD1]/g, "N")
+                    .replace(/[\xD2-\xD6\xD8]/g, "O")
+                    .replace(/[\xD9-\xDC]/g, "U")
+                    .replace(/[\xDD]/g, "Y")
+                    .replace(/[\xDE]/g, "P")
+                    .replace(/[\xE0-\xE5]/g, "a")
+                    .replace(/[\xE6]/g, "ae")
+                    .replace(/[\xE7]/g, "c")
+                    .replace(/[\xE8-\xEB]/g, "e")
+                    .replace(/[\xEC-\xEF]/g, "i")
+                    .replace(/[\xF1]/g, "n")
+                    .replace(/[\xF2-\xF6\xF8]/g, "o")
+                    .replace(/[\xF9-\xFC]/g, "u")
+                    .replace(/[\xFE]/g, "p")
+                    .replace(/[\xFD\xFF]/g, "y");
+        }
+
+        return str;
+    }
 }

src/views/datatable/DataTableDemo.vue

@@ -13,8 +13,8 @@
             <div class="p-card">
                 <div class="p-card-body" style="padding:0">
                     <DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10"
-                        dataKey="id" :rowHover="true" :selection.sync="selectedCustomers"
+                        dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters"
-                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]">
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport " :rowsPerPageOptions="[10,25,50]">
                         <template #header>
                             List of Customers
                             <div class="p-datatable-globalfilter-container">
@@ -72,7 +72,7 @@
                                 </Dropdown>
                             </template>
                         </Column>
-                        <Column field="activity" header="Activity" :sortable="true">
+                        <Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte">
                             <template #body="slotProps">
                                 <span class="p-column-title">Activity</span>
                                 <ProgressBar :value="slotProps.data.activity" :showValue="false" />
@@ -134,14 +134,6 @@ export default {
     mounted() {
         this.customerService.getCustomers().then(data => this.customers = data);
     },
-    methods: {
-        toggle(event, menu) {
-            menu.toggle(event);
-        },
-        save() {
-            this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
-        }
-    },
     components: {
         'DataTableDoc': DataTableDoc,
         'DataTableSubMenu': DataTableSubMenu

src/views/datatable/DataTableDoc.vue

@@ -206,7 +206,7 @@ export default {
                                 <td>filterMatchMode</td>
                                 <td>string</td>
                                 <td>startsWith</td>
-                                <td>Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in" and "custom".</td>
+                                <td>Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom".</td>
                             </tr>
                             <tr>
                                 <td>filterFunction</td>
@@ -485,7 +485,7 @@ data() {
                 <p>Filtering is enabled by defining a filter template per column to populate the <i>filters</i> property of the DataTable. The <i>filters</i>
                 property should be an key-value object where keys are the field name and the value is the filter value. The filter template receives the column properties
                 via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the <i>filterMatchMode</i> property that also accepts
-                "contains", "endsWith", "equals", "notEquals", "in" and "custom" as available modes.</p>
+                "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom" as available modes.</p>
                 <p>Optionally a global filter is available to search against all the fields, in this case the special <i>global</i> keyword should be the property to be populated.</p>
 <CodeHighlight>
 <template v-pre>