Sorting Numbers in Datatable

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Sorting Numbers in Datatable

Noah Lee asked 6 years ago

Expected behavior Numbers can be sorted in MDBDatatable

Actual behavior Sorting places 1,000 < 999 or 1000 < 999. i.e. sorting columns with numbers only matches the first number shown and does not continue further regardless of the format of the number

Resources (screenshots, code snippets etc.) Documentation here https://mdbootstrap.com/docs/react/tables/sort/ shows a table where salaries are sorted correctly.

Is it the case that numbers can only be sorted properly if there is a $ sign at the front?

Jakub Mandra staff premium answered 6 years ago

Hi,

DataTable should sort numbers normally, you have to set up the data in proper format.

Do not use string for numbers. Examlple:

import React from 'react';
import { MDBDataTable } from 'mdbreact';

const DatatablePage = () => {
  const data = {
    columns: [
      {
        label: 'Name',
        field: 'name',
        sort: 'asc',
        width: 150
      },
      {
        label: 'Position',
        field: 'position',
        sort: 'asc',
        width: 270
      },
      {
        label: 'Office',
        field: 'office',
        sort: 'asc',
        width: 200
      },
      {
        label: 'Age',
        field: 'age',
        sort: 'asc',
        width: 100
      },
      {
        label: 'Start date',
        field: 'date',
        sort: 'asc',
        width: 150
      },
      {
        label: 'Salary',
        field: 'salary',
        sort: 'asc',
        width: 100
      }
    ],
    rows: [
      {
        name: 'Tiger Nixon',
        position: 'System Architect',
        office: 'Edinburgh',
        age: 1000,
        date: '2011/04/25',
        salary: '$320'
      },
      {
        name: 'Garrett Winters',
        position: 'Accountant',
        office: 'Tokyo',
        age: 999,
        date: '2011/07/25',
        salary: '$170'
      },
      {
        name: 'Ashton Cox',
        position: 'Junior Technical Author',
        office: 'San Francisco',
        age: 10,
        date: '2009/01/12',
        salary: '$86'
      },
      {
        name: 'Cedric Kelly',
        position: 'Senior Javascript Developer',
        office: 'Edinburgh',
        age: 22,
        date: '2012/03/29',
        salary: '$433'
      },
      {
        name: 'Airi Satou',
        position: 'Accountant',
        office: 'Tokyo',
        age: 21,
        date: '2008/11/28',
        salary: '$162'
      },
    ]
  };

  return (
    <MDBDataTable
      striped
      bordered
      small
      data={data}
    />
  );
}

export default DatatablePage;

I think it should be considered in the documentation. Thanks for report.

Best,

Jakub

Jakub Mandra staff premium answered 6 years ago

Hi,

DataTable should sort numbers normally, you have to set up the data in proper format.

Do not use string for numbers. Examlple:

import React from 'react';
import { MDBDataTable } from 'mdbreact';

const DatatablePage = () => {
  const data = {
    columns: [
      {
        label: 'Name',
        field: 'name',
        sort: 'asc',
        width: 150
      },
      {
        label: 'Position',
        field: 'position',
        sort: 'asc',
        width: 270
      },
      {
        label: 'Office',
        field: 'office',
        sort: 'asc',
        width: 200
      },
      {
        label: 'Age',
        field: 'age',
        sort: 'asc',
        width: 100
      },
      {
        label: 'Start date',
        field: 'date',
        sort: 'asc',
        width: 150
      },
      {
        label: 'Salary',
        field: 'salary',
        sort: 'asc',
        width: 100
      }
    ],
    rows: [
      {
        name: 'Tiger Nixon',
        position: 'System Architect',
        office: 'Edinburgh',
        age: 1000,
        date: '2011/04/25',
        salary: '$320'
      },
      {
        name: 'Garrett Winters',
        position: 'Accountant',
        office: 'Tokyo',
        age: 999,
        date: '2011/07/25',
        salary: '$170'
      },
      {
        name: 'Ashton Cox',
        position: 'Junior Technical Author',
        office: 'San Francisco',
        age: 10,
        date: '2009/01/12',
        salary: '$86'
      },
      {
        name: 'Cedric Kelly',
        position: 'Senior Javascript Developer',
        office: 'Edinburgh',
        age: 22,
        date: '2012/03/29',
        salary: '$433'
      },
      {
        name: 'Airi Satou',
        position: 'Accountant',
        office: 'Tokyo',
        age: 21,
        date: '2008/11/28',
        salary: '$162'
      },
    ]
  };

  return (
    <MDBDataTable
      striped
      bordered
      small
      data={data}
    />
  );
}

export default DatatablePage;

I think it should be considered in the documentation. Thanks for report.

Best,

Jakub

Slavoljub Mihajlovic commented 6 years ago

Can you help me @Jakub Mandra? I wrote current status in below message

Thanks, Slavoljub

Slavoljub Mihajlovic answered 6 years ago

@Jakub Mandra

I prepared data like $123,456.78 , $12,000 So the Salary was formatted with comma for every thousands and added currency symbol at the front But sorting is not working properly Can you help me how I can do it ?

Thanks, Slavoljub

Jakub Mandra staff premium commented 6 years ago

As I mentioned in my first answer for this post: DataTable should sort numbers normally, you have to set up the data in the proper format (Number).

So you should use 123456,78, 12000.

In one of the next versions, the datatable should accept data like search and searchValue -> the search will be displayed and searchValue will be used for sorting and filtering. But it's just the concept form, for now, you have to use what I have described.

Best,

Jakub

Jeffrey.Hendrikse commented 5 years ago

Hello,

Has there been any progress on implementing this feature? it would be very nice to be able to sort formatted numbers.

Kind regards, Jeffrey

Konrad Stępień staff commented 5 years ago

Hi @Jeffrey.Hendrikse,

Not yet, but work in progress. We have to take a look at the component and sorting system. Sorry for problems, and please wait for new updates.

Best, Konrad.

Uttam Dutta answered 4 years ago

Hi Jakub,

As you have mentioned.

================

In one of the next versions, the datatable should accept data like search and searchValue -> the search will be displayed and searchValue will be used for sorting and filtering. But it's just the concept form, for now, you have to use what I have described.

Is there any update on this?

Piotr Glejzer staff commented 4 years ago

We will update this in the next versions. I don't why this still no resolved. I added the task to check it.

Denzil answered 4 years ago

Any updates on this one? The component is quite useless without proper number formatting sorting.

Caelan Marks answered 4 years ago

+1 for this feature, I want to be able to sort percentages 200.1% > 99.9% and the sort is not sufficient as is. To add, this doesn't work with floats either so it's pretty useless for sorting anything with decimal places.

Denzil answered 4 years ago

Any news? Will be a game changer, can't use the component for now :(

Piotr Glejzer staff commented 4 years ago

we are working now on a new version of MDBReact so this will probably show in this version soon.

Denzil commented 4 years ago

Thanks, looking forward. I hope a new version will be built on hooks? :)

Piotr Glejzer staff commented 4 years ago

The new version MDBReact with Bootstrap 5 will be built on hooks :)

But updated MDBReact with Bootstrap 5 will be still in classes.

Denzil answered 4 years ago

Any updates on this one?

Krzysztof Wilk staff commented 4 years ago

Hi!

Yes, now elements with the "$" sign should be sorted correctly. :)

Best regards
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.11.1
  • Device: Macbook Air
  • Browser: Firefox
  • OS: MacOS Mojave
  • Provided sample code: No
  • Provided link: Yes
About author
Noah Lee
5Support score
1Questions 0Answers
0Snippets likes 0Snippets