CODEWITHSUNDEEP
reactjsreact-bootstrap-table
Shinta
Shinta

Reputation: 35

How do you numerically sort react bootstrap column

I have a couple of columns Product ID (dataField: id), Product Name (dataField: name). I enabled sorting (sort:true) on both columns. Product ID contains a link to the product's details page. When user clicks on the Product Name header, it sorts the value correctly. However, when user clicks on Product ID header, it sorts it incorrectly - sample values are 7001, 20001, 7211, 7459. It looks like it's sorting like a string instead of numerical.

I tried using sortFunc and sortValue for Product ID column. My code is as below. However, a.id and b.id are both showing as "underfined". Below is also my column definitions.

I'm fairly new to react and bootstrap, so please help me understand why the values are undefined.

Thank you for your help. 

function numericSort(a, b, order) {
        console.log("order " + order);
        console.log("a.id " + a.id);
        console.log("b.id " + b.id);

        if (order === 'desc') {
            console.log(" Number(b.id) - Number(a.id) " + Number(b.id) - Number(a.id));

            return Number(b.id) - Number(a.id);
        } else {
            console.log(" Number(a.id) - Number(b.id) " + Number(a.id) - Number(b.id));

            return Number(a.id) - Number(b.id);
        }
    }


const [columns, setColumns] = React.useState([
        {       
            dataField: 'id',
            text: 'Product ID',
            sort: true,
            filter: textFilter({placeholder:' '}),          
            headerStyle: {fontSize: '12px', display:'underline', whiteSpace:'nowrap'},
            formatter: linkFormatter,
            sortFunc: numericSort, 
            sortValue: numericSort
          },
          {
            dataField: 'prodName',
            text: 'Product Name',
            sort: true,
            headerStyle: {fontSize: '12px',     textalign: 'center', margin:'1000px', whiteSpace:'nowrap'},
            filter: textFilter({placeholder:' '})
          }
    ]);

Upvotes: 0

Views: 1029

Answers (2)

Shinta
Shinta

Reputation: 35

Here is what I ended up doing. I was going to set sortFunc to a function, but defining it on the column definition works just as well. 

sortFunc: (a, b, order, dataField, rowA, rowB) => {
if (order === 'asc') {
return Number(b) - Number(a);
}
return Number(a) - Number(b); // desc
}, 
sortValue:  (a, b, order, dataField, rowA, rowB) => {
if (order === 'asc') {
return Number(b) - Number(a);
}
return Number(a) - Number(b); // desc
}

Upvotes: 1

JediMarley
JediMarley

Reputation: 68

No idea why the id fields are coming in as strings, maybe this has to do with them being in the link tag. Your next step would be to console log the a and b variables from your numeric sort function and see if they are undefined. If they aren't undefined try console.logging Object.keys(a) which will list the available properties of the variable which should hopefully include the id prop.

You're also going to get errors in your other two console logs, the ones inside the if else statements. You need to wrap your math statement in parenthesis since your the + is simply to add the result to the string, not to mathematically add the string and the number. console.log(" Number(b.id) - Number(a.id) " + (Number(b.id) - Number(a.id)));

I don't know how you have this code setup but I suggest using react-create-app since it'll create a quick react app and will allow you to see the base syntax for react apps and components. I spun up a table from react-bootstrap-table to help give you this answer and have sorting working (even with string long id's) correctly, let me know if this helps!

Upvotes: 0

Related Questions