React Table not sorting numbers correctly

Question

React-table is sorting decimals like this:

My guess is that, although I'm receiving numbers from server, react-table handles them as text. So, I modified the accessor like this:

accessor: d => Number(d.Invoice_Weight).toFixed(2)

but I keep getting the sorting wrong.

This is the code for column:

 {
                      Header: () => 
                      <DropDownMenu 
                      header={content[lang].Invoice_Weight}
                      openModal = {this.onOpenSelectColumnsModal}
                      />,
                      id: 'Invoice_Weight',
                      sortable: true,
                      accessor: d => Number(d.Invoice_Weight).toFixed(2),
                      //width: 200,
                      getProps: () => {
                        return {
                          style: {
                            textAlign: 'right'
                          }
                        }
                      },
                      show: Invoice_Weight,
                    },

apokryfos · Accepted Answer · 2019-06-21 14:34:56Z

11

As suggested in other answers the issue is that toFixed returns a string and therefore the sorting will be done using string comparisons. However coercing back to number will not work in this case becase then you will lose trailing 0s which I'm guessing you still need.

Another solution is to use custom sorting:

accessor: d => Number(d.Invoice_Weight).toFixed(2),
sortMethod: (a, b) => Number(a)-Number(b)

You may want to refine sortMethod to handle NaNs and Infinities (if you have them) but that's the general idea

You can use this to coerce the string back to a number but only in the context of sorting without affecting the displayed value

answered Jun 21, 2019 at 14:34

apokryfos

40.9k11 gold badges85 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Sandvik · Accepted Answer · 2019-06-21 14:17:30Z

4

My guess is this is caused by the fact that .toFixed() returns a string, so it is still sorting them as strings. So if you want to round the number and keep it as two decimal places you would have to do something like this:

accessor: d => Number(Number(d.Invoice_Weight).toFixed(2))

So convert it to a number first, round it to a two decimal place string, and then convert it back to a number again.

answered Jun 21, 2019 at 14:17

Chris Sandvik

1,93912 silver badges21 bronze badges

2 Comments

Morgana Over a year ago

Chris, thank you very much! Your answer did solve the problem but the thing is that I lost the zeros (,00) of decimals so I think I'll use apokryfos' solution. Thank you both!

Chris Sandvik Over a year ago

No problem, after reading his answer I realized it is definitely the way to go if you did need to maintain the trailing zeros!

Cognisun Inc · Accepted Answer · 2021-03-02 06:38:16Z

1

Default sorting method of React Table provides sorting by string.so you have to use sortMethod props provided by React Table.

sortMethod: (a, b) => {
   a = Number(a); // Converting into number
   b = Number(b); // Converting into number
   if (a.length === b.length) {
     return a > b ? 1 : -1; // same length condition
   }
   return a.length > b.length ? 1 : -1; // comparing length of string
}

answered Mar 2, 2021 at 6:38

Cognisun Inc

4463 silver badges9 bronze badges

Collectives™ on Stack Overflow

React Table not sorting numbers correctly

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related