How to set cell type to show percentage?

Getting help Questions
1

Hello,

I would like to set percentage for number, how can I do it?

Example is available at https://jsfiddle.net/janzitniak/nw5qsdgv/9/ where cells E2:E5 should be formatted to percentage.

Jan

2

Hi @jan.zitniak

I can see that you’ve posted a couple of new questions. Does it mean that you moved to the 2nd stage of development or have been added a set of new requirements?

When it comes to the percentages in the visual part of the table you should

  • define the number of decimal places for formatted cell (eg. 50%, or 50,89%)
  • add a custom renderer that uses the value to: multiple it by 100, round, and attach the ‘%’ sign.

Here’s an example https://jsfiddle.net/hmL8jwqo/

3

Hi @aleksandra_budnik,

yes I’m on next level of programming my app :). Thank you for your answer, I would like to change only some cells, no all ones in column as in your example. I tried a following code which meets my expectations

hot.setCellMetaObject(row, col, { type: 'numeric',
      numericFormat: {
        pattern: '0.00 %'
      }});
4

Hi @jan.zitniak

As you can see in our docs - https://handsontable.com/docs/7.4.2/Options.html#numericFormat - we support all patterns from numbro.

If you want to have a percentage you have to follow a pattern - http://numbrojs.com/format.html#percentages

Here is an updated demo - https://jsfiddle.net/qry3n7tg/

5

Dear @piotr.nowak,

thank you for your answer and example, it works.

Jan

6

I am glad to hear that @jan.zitniak

So I close this thread.

1 Like