DataTable Sort/Render

Topic: DataTable Sort/Render

Daniel Stahl asked 5 years ago

I tried searching, but couldn't find anything. Is it possible for a column to be sorted on one piece of data, but render something different? Or is there a simpler solution. Can I implement my own comparator?

e.g. My data is:

(
{'amount': 1000, 'render': 'PLN 1,000.00'}, 
{'amount': 200, 'render': 'PLN 200.00'}, 
{'amount': 2000, 'render': 'PLN 2,000.00'}
)

If I sort this on amount, it sorts properly: 200; 1000; 2000. If I try to sort on render, obviously it sorts as text: 1,000; 2,000; 200. (Even if I just wanted to sort like this, it doesn't work how I would expect since the comma must come before numbers in order). What I would like is something like one of these three options:

columns = [
    {
        data: 'amount', <--sorts on this
        render: function(data, x, row) {
            return obj['render']
        } 
    }
]

columns = [
    {
        data: 'render',
        sort_data: function(data, row) {
            return row['amount'] <--sorts on this
        },
    }
]

columns = [
    {
        data: 'render',
        sort_data: 'amount' <--sorts on this
    }
]

Add comment

Jakub Chmura staff premium answered 5 years ago

0 0 Best answer

HI @Daniel Stahl,

You can use searchvalue prop to achieve what you want. Please follow my example:

In column Sorting by specific value, I create few cells with a unique ID.
I add a prop searchvalue to every of this cell, and I use Math.random function to add a specific value to it.
As you see you can sort now by searchvalue, and every cell is a just placeholder to it.

You can do the same thing's with your table.

import React from 'react';
import {
  MDBDataTable,
  MDBContainer,
  MDBRow,
  MDBCol,
  MDBCard,
  MDBCardBody
} from 'mdbreact';

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

  const badgesData = {
    columns: [
      {
        label: 'Sorting by specific value',
        field: 'badge'
      },
      ...data().columns
    ],
    rows: [
      ...data().rows.map((row, id) => ({
        ...row,
        badge: (
          <span
            searchvalue={
              Math.floor(Math.random() * 10) * Math.floor(Math.random() * 10)
            }
            key={id}
          >
            It's just a placeholder with initial id value:
            {id}
          </span>
        )
      }))
    ]
  };

  return (
    <MDBContainer className='mt-3'>
      <MDBRow className='py-3'>
        <MDBCol md='12'>
          <MDBCard>
            <MDBCardBody>
              <MDBDataTable
                striped
                bordered
                hover
                entriesOptions={[5, 20, 25]}
                entries={5}
                pagesAmount={4}
                data={badgesData}
                sortRows={['badge']}
              />
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
};

export default DatatablePage;

Best, Kuba

Add comment

Write

Create snippet

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.0
Device: Desktop
Browser: Chrome
OS: 10.14.6
Provided sample code: No
Provided link: No

Daniel Stahl

10Support score
2Questions 0Answers

0Snippets likes 0Snippets