Angular: Filter on number, can't get it to work.

[MusAlain]

I'm trying to add a filter on a column that are numbers (customer id's).
When typing in the field, it is showing all entries

However, when i select one, then it returns 0 rows.

<input type="number" class="w-36 border shadow rounded" [attr.placeholder]="'Search... (' + column().getFacetedUniqueValues().size + ')'" [attr.list]="column().id + 'list'" [value]="columnFilterValue() ?? ''" (change)="column().setFilterValue($any($event).target.value)" />

I am using the same method as the text variant (which does seem to return the filtered table correctly), only change the type from text to number.

instead of directly setting the filter in the html, i also tried calling a function to convert the value to a number first and then set the filter value, but that does also not seem to work.

readonly changeNumberValue = (event: Event): void => { const value: number = parseInt((event.target as HTMLInputElement).value); this.column().setFilterValue(() => value); };

The only thing i changed from the example btw is in the html i use (change)="....", while in the example it is using (changeEvent)="...". But that doesn't seem to do anything when i use that.

Did i forget something when it comes to numbers or is that not working correcly?

[riccardoperra]

Hi, as I remember if you don't define a column filterFns, a table globalFilterFns will be used, which is 'includesString' as default .

The only thing i changed from the example btw is in the html i use (change)="....", while in the example it is using (changeEvent)="...". But that doesn't seem to do anything when i use that.

In the Angular example changeEvent is a custom output bound by the debounceInput directive, which basically debounce the change event. You can still use native input change if you want to update filters immediately when that dom event is triggered.

Did i forget something when it comes to numbers or is that not working correcly?

Depend on how you want to filter the data. You definitely need to use the filterFns to customize the behavior for this column in my opinion

https://tanstack.com/table/latest/docs/guide/column-filtering#filterfns

If you want to search for the exact id, you can use the default exact or weekEquals filterFn. If you want to search in like, you probably need to write a custom filterFn which cast your customer id as string.

I'd do something like this

    {
      filterFn: (row, columnId, filterValue) => {
        const id = String(row.original.customerId);
        return id.includes(String(filterValue))
      },
    },

[MusAlain]

defining a column filter worked, thanks