Force numeric format does not work in React

Getting help Questions
1

Hello I am using HandsOnTable to work on a large project, but it does not seem to change the format correctly to the european standard.

I have tried the documentation and the things on other forums. The weird thing the display language does properly change.

                {//cost/st
                    type: 'numeric',
                    numericFormat: {
                        pattern: '0,0.00 $',
                        culture: 'nl-NL',
                        language: 'nl-NL'
                    }

This is what I use currently to define the column and this is in React. Any help would be greatly appreciated.

2

Hi @omerkati

We had a similar ticket here https://github.com/handsontable/handsontable/issues/6145
Partially the issue relates to numbro settings https://github.com/BenjaminVanRyseghem/numbro/issues/388 but I’ve asked our Tech Write to create demos for the wrappers in our docs https://github.com/handsontable/docs/issues/62 (it should be ready within the next couple of days)

If you won’t be able to load the language with the tips from https://github.com/handsontable/handsontable/issues/6145 please let me know.

3

If you do not use any other Numbro than the one that’s loaded with Handsontable this demo should work https://codesandbox.io/s/react-locale-forked-mxdnp

4

Thank you for the quick response! I will try this out on monday and come back to you if it worked.

5

It does not work, I remember that I tried it in the past. The weird thing is when I try to “import languages from “numbro/dist/languages.min.js”;” my whole application fails to compile and it does not even specify what was the problem. I am fairly new to js and react. Do you know any reason why it would not compile? The application runs while using numbro though. And the numbro/dist/languages.min.js does exist, because I can access it. Could it be that other scripts are interferring?

6

I should have an update about using the format when you have two versions of Numbro (one loaded externally and one from Handsontable) by the end of this week. I will notify you as soon as I get any updates.

7

Hi @omerkati

I got an update from the Devs team.

They recommend holding the same Numbro version across the project. If you need a different version you may also force Handsontable (by an alias in the Webpack file) to use your other Numbro version. We do not mention the same in the docs but here https://webpack.js.org/configuration/resolve/ is a tutorial that may help.

8

Thanks for replying, I have tried some more things. First there is only 1 version of numbro so that should not be the problem. Second when I try to import numbro/dist/languages.min.js it creates a loop which eventually crashes the application. And lastly I want to know if it is possible to do this format by importing it directly from numbro/languages/nl_NL.js ? This one does not cause an error and when I look at the object it seems like it has everything we need. the currency and the format. If it is not too much trouble could you find a way to make it work with that object?

If that also does not work I want to create a git depository and send it to you privately. This is like the only thing that is not working for us and for my job it is important.

9

I think that this is a great idea. That way we will make sure that it works for you.

10

Alright we are working on gitlab. Could you give me your email addres? I will then invite you as a guest.

11

Please send it to support@handsontable.com

12

I have send an invite the handsOnTable can be found in \src\containers\Table. This is my first project so if you see any other odd things, do not be afraid to criticize it.