Topic: DataTable Sort/Render
Daniel Stahl free asked 4 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
}
]
Jakub Chmura staff answered 4 years ago
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 useMath.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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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