React Table неправильно сортирует числа - PullRequest
Новая
       10

React Table неправильно сортирует числа

2 голосов
/ 21 июня 2019

React-таблица сортирует десятичные числа следующим образом:

enter image description here

Я предполагаю, что, хотя я получаю числа с сервера, реагирует на таблицуобрабатывает их как текст.Итак, я изменил метод доступа следующим образом: 

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

, но я продолжаю неправильно сортировать.

Это код для столбца: 

 {
                      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,
                    },

Ответы [ 2 ]

3 голосов
/ 21 июня 2019

Полагаю, это связано с тем, что .toFixed() возвращает строку, поэтому она все еще сортирует их как строки. Поэтому, если вы хотите округлить число до двух десятичных разрядов, вам нужно сделать что-то вроде этого: 

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

Поэтому сначала преобразуйте его в число, округлите до строки с двумя десятичными знаками, а затем снова преобразуйте в число.

2 голосов
/ 21 июня 2019

Как указано в других ответах, проблема заключается в том, что toFixed возвращает строку, и поэтому сортировка будет выполняться с использованием сравнения строк. Однако принуждение к номеру в этом случае не сработает, потому что тогда вы потеряете трейлинг 0 с, который, я полагаю, вам все еще нужен.

Другое решение - использовать пользовательскую сортировку: 

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

Возможно, вы захотите усовершенствовать sortMethod для обработки NaN и бесконечностей (если они у вас есть), но это общая идея

Вы можете использовать это, чтобы привести строку обратно к числу, но только в контексте сортировки, не влияя на отображаемое значение

...