Sorting number with comma in react-bootstrap-table2

Question

Using react-bootstrap-table2, When trying to filter large numbers with commas (12,000) it doesn't work. Is it possible to filter numbers with commas?

example

Cheers!

yeah, I'm trying to sort the columns. When it's converted to a string to achieve the comma it doesn't work. I was hoping there was a simple solution built into the plugin react-bootstrap-table. — Gearóid, Nov 12 '18 at 10:23

score 2 · Accepted Answer · answered Nov 09 '18 at 20:18

2

Without seeing your code it is hard to say. But perhaps each cell data in your table is a string, not a number, which could cause sorting weirdness. I had same issue before. Sort it by number, then populate your table cells with the formatted string version of the number after sort, if that makes sense.

answered Nov 09 '18 at 20:18

mediaguru

1,807
18
24

Thanks, Yeah that makes sense. I was hoping the react-bootstrap-table plugin would have a setting that takes care this. – Gearóid Nov 12 '18 at 10:20

score 0 · Answer 2 · edited Oct 02 '20 at 16:33

Let's assume that:

your field name is "estimation"
thousands separator is ' (apostrophe)
decimal separator is , (comma)

You can write your sort function (sortFunc) as follows:

{
    dataField: 'estimation',
    text: 'Estimation',
    sort: true,
    sortFunc: (a, b, order, dataField, rowA, rowB) => {
    const numA = parseFloat(a.replace('\'', '').replace(',', '.'));
    const numB = parseFloat(b.replace('\'', '').replace(',', '.'));
    if (order === "asc") {
        return numB - numA;
    }
    return numA - numB;
}

score 0 · Answer 3 · answered May 28 '21 at 07:02

I solved this problem, here is my Bootstrap Table sort function。

 sortFunc: (a, b, order) => {
    const numA = parseFloat(a.replace(/\,/g,''), 10)
    const numB = parseFloat(b.replace(/\,/g,''), 10)
    if (order === "asc") {
        return numB - numA;
    }
    return numA - numB;
  }

score -1 · Answer 4 · edited Oct 02 '20 at 13:12

import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit";
import paginationFactory from "react-bootstrap-table2-paginator";

First please check number or non-number.

If your array inside number return number else is non-number :

yourDataArray.map(function (item, x) {
  item._Number_of_stocks = parseInt(item.Number_of_stocks);
});

Sort function in here:

sortFunc: (a, b, order, dataField, rowA, rowB) => {
  if (order === "asc") {
    return (
      isNaN(rowB._Number_of_stocks) - !isNaN(rowB._Number_of_stocks)
    );
  }
  return !isNaN(rowB._Number_of_stocks) - isNaN(rowB._Number_of_stocks);
},

See: https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/docs/columns.md

Sorting number with comma in react-bootstrap-table2

4 Answers4