[Feature]-[500]:Allow devs to format numbers in table

[areyabhishek]

Summary

Numbers need to be shown in formats: 10,00,000 or 1,000,000 or 1,000,000.00, etc. We should show a condition that shows these options in the property pane.

User can use toLocalestring to achieve this in JS

[somangshu]

@areyabhishek are you talking about the table widget or the input widget.

Also, would something like a toggle called as internationalised format work?

@Nikhil-Nandagopal can you think of a better terminology here?

[Nikhil-Nandagopal]

I think just the number format is good. This needs to be a dropdown where a user can select the format (Check Google Sheets format option). This should only be in places where the data type is known i.e Input & Table. Users should use a JS lib for places like text

[somangshu]

@Nikhil-Nandagopal I didn't quiet get it!

• We want this only on the number / currency type in the input / table widget prop pane?
• If this a dropdown, what are the options, can you please suggest?
• Do you think this is only valid for the currency type?

[Nikhil-Nandagopal]

It's valid for any numerical type including currently. See the screenshots

from google sheets

[somangshu]

Oops, I was checking the appsmith google integration 🙈

Got it now, thanks.

[vicky-primathon]

• [ ] Add a number formats dropdown in Table Widget property pane
• [ ] Selected number format should be applied for number type columns in Table Widget
• [ ] Add cypress test to validate number formatting in Table widget
• [ ] Add a number formats dropdown in Input Widget property pane
• [ ] Selected number format should be applied for number type Input widget
• [ ] Add cypress test to validate number formatting in Input widget

[vicky-primathon]

Below formatting options will be supported

1. 1,122,222.21 / 10,00,000 (Localised formats)
2. 123.4 (precision)
3. 44.22% (percentage format)

[dilippitchika]

We can follow something similar to the property exposed in date fields, which is display date format.

Reach - Users configuring the table's col as number type Impact - Low Effort - Assuming 1 sprint for dev+design+QA

Stats

Stat	Values
Reach	500
Effort (months)	0.5

[somangshu]

@dilippitchika I think this should also be a part of the input widget! Under the type number these formatting options are valid for the user

[dilippitchika]

@somangshu i was only considering this for display purpose and not the editing purpose yet. That is the reason i removed the input widget.

If we were to add it there as well, i believe the issue should be updated, because the impact is for app-viewer will be higher because they can edit the values.

[somangshu]

@dilippitchika in that case, I also want to think about how this will pan out for table widget inline edit, Will be persist the formating or remove it before the editing starts.

another point is that this can we the output also, like {{input1.text}} gives out the formatted label required many times by the DB

[Nikhil-Nandagopal]

I think it should work exactly like google sheets or our date picker. The underlying format is a number and you input it as a number in edit mode but there is presentation logic to add commas

[bobbintb]

I came across a need for this recently. I have file sizes in a column that are difficult to read in the default format (bytes). I have a JS function to make it more human readable but that makes it impossible to sort. I even tried changing it to a date type and using the custom JS but that did not work. I think something similar to the date type would work well, and give formatting option like Google Sheets.

[Tooluloope]

@bobbintb are you formatting the column after it's been rendered on the table, or are you formatting the data before it gets to the table?

[bobbintb]

@bobbintb are you formatting the column after it's been rendered on the table, or are you formatting the data before it gets to the table?

I'm formatting before it gets to the table via the computed value in the widget. I'm not sure how I would do it otherwise.

[Tooluloope]

You can format the data just before it gets to the table, not the column.

[bobbintb]

You can format the data just before it gets to the table, not the column.

I'm not quite following. The table widget displays data from a MongoDB query. If I leave the data I can sort it but it's difficult to read. If I format it I can read it better (ex 93.05 MB instead of 97569381) but it breaks sorting because it is no longer a number. Are you saying I can format it and keep sorting functionality or would this require a new feature?

[Tooluloope]

@bobbintb Do let me know if this settles your use case.

https://user-images.githubusercontent.com/31691737/202294179-20ad0afb-99c8-498e-bb12-6f92acb2c501.mov

[bobbintb]

It doesn't unfortunately. It still transforms the data. The sort works with the specific test numbers you've chosen but I think it will break like mine did with more varied examples (KB, bytes, GB, etc).

[Tooluloope]

Oh got it. This won't work with varying bytes unit

[Tooluloope]

@dilippitchika @sbalaji1192, is there another way to unblock him?

[sbalaji1192]

@Tooluloope @dilippitchika I don't think it is possible without a property to format numbers while rendering the cells like the date output format property.