CH Swiss Thousand Separator and Filtering Issue

💬 App Building
1

Goal

I want to display numeric fields (such as table.Summe and table.Betrag) in Swiss formatting (1'035.45), while also allowing them to be filterable in Retool. Retool currently interprets the values as strings (not numbers) due to the presence of ' as a thousand separator, which blocks number-based functionality like filtering.

Challenges

  1. Formatting Issue: Retool does not natively accept ' as a thousand separator for numbers.
  2. Filter Functionality: Filtering fails because Retool considers ' invalid for number formats, shows each value as 0.
  3. Type Conversion: Since the fields are converted to strings for display formatting, they lose their numeric type, making numeric operations (like sum or filter) problematic.

Steps Taken So Far

I formatted numbers in CH format using the Intl.NumberFormat method:

{{ new Intl.NumberFormat('de-CH', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(currentSourceRow.betrag) }}

  • This successfully displays the numbers with ' as the thousand separator and . as the decimal place.

  • When it is string it shows:

image
image297×397 16.1 KB

image
image115×212 4.18 KB

  • When it is number all values are 0:

image
image301×341 14.9 KB

image

MY Question:

  • How can I format the numbers in my table to fit into Swiss formatting (1'035.45 ) instead of (1,035.45 ) and still keep it as a number for filtering purposes?
2

Any answers?

3

It's not an obvious setting, but you can try...

Go to the table component, then pick the column, then open the advanced settings for Interaction

asdfsd

and see if setting it to Raw will help? I presume it will use the underlying number to sort instead of the formatted value?

4

Good point! I think for filtering you'll still run into the same issue :disappointed: We have a feature request for better support here.

One workaround could be to create your own filter functionality with standalone components. You could have a number input & filter your table based on the value of the number input.

CleanShot 2024-12-19 at 11.33.33@2x
CleanShot 2024-12-19 at 11.33.33@2x1626×718 17.5 KB

You could add such a filter to your table query or you could use the setFilter api.

5

Thanks @Tess ! With the very different date and number formats here in Europe, it would be most helpful if retool reads out the localization settings of the web browser resp. local client environment and sets the display format accordingly.

There are already hints here Localize web apps | Retool Docs which may help.

How can we support you guys further here to get to the next level of retool.com?