Percent input seems unnatural?

Tags: #<Tag:0x00007f8b1cc76100>
#1

In Excel, if a cell is formatted as “%” then you enter a number, you enter it as the “percent” value not the “decimal” value:

User types: "12"
Cell shows: "12%"
Decimal value: 0.12

This then means you can do something like =A1 * A2 and get something meaningful.

Our cell settings are as follows:

{
  data: 'rate',
  type: 'numeric',
  numericFormat: {
    pattern: '0 %'
  }
},

In HOT typing 12 displays as “1200 %” which is undesirable.

I’d like for our users to be able to type “12” and see “12 %”.

Perhaps I have to use a different kind of formatting?

Also, I assume I need to use beforeChange() to parse this value to a number?

Thanks

#2

It looks like one option is to apply a cell class and use a pseudo:after selector:

.percent:after {
	content: " %";
}

Is this the way?

I couldn’t see any other formats for text, other than date or numeric.

#3

Hey Dave,

you can use a renderer to get this behavior. Here’s how it works https://jsfiddle.net/AMBudnik/to48zu7f/

#4

Hi Aleksandra,

Thanks! Nice, succinct example!

For anyone else following in my footsteps, here it is working for columns only:

:smiley:

2 Likes
#5