Sort by date in users app
Hi,
I'm trying to sort a column by date in the users app.
The data model that is used in Metronic looks like this:
_models.ts
import {ID, Response} from '../../../../../../_metronic/helpers'
export type User = {
id?: ID
name?: string
avatar?: string
email?: string
position?: string
role?: string
last_login?: string
two_steps?: boolean
joined_day?: string
online?: boolean
initials?: {
label: string
state: string
}
}export type UsersQueryResponse = Response<Array<User>>
export const initialUser: User = {
avatar: 'avatars/300-6.jpg',
position: 'Art Director',
role: 'Administrator',
name: '',
email: '',
}
I'm trying to add an additional field:
export type User = {
id?: ID
created?: Date
name?: string
avatar?: string
email?: string
position?: string
role?: string
last_login?: string
two_steps?: boolean
joined_day?: string
online?: boolean
initials?: {
label: string
state: string
}
And in my columns definition:
{
Header: (props) => (
),
accessor: 'created',
sortType: 'datetime',
Cell: ({...props}) => {props.data[props.row.index].date.toString()}
},
When running this is doesn't sort them by date... it looks like it's sorting by something else, probably a string.
Can you please provide a working example?
Thanks!
Replies (4)
I've got the same issue with a field of type number:
age?: number
Can you please provide an example for this one as well?
Is there a reason you're not using "automatic sorting" (useSortBy) in the users app in Metronic?
Here's an example:
https://github.com/TanStack/table/tree/v7/examples/sorting
Are you using this technique?
https://react-table-v7.tanstack.com/docs/faq#how-can-i-use-the-table-state-to-fetch-new-data
Hi,
Yes in our datatable examples, we are using react-tables. In our Users Managment example we are handling sorting on server side, you can use the same approach and return sorted array by date to your client-side.
You can check our Swagger API example: https://preview.keenthemes.com/theme-api/api/documentation#/
Regards,
Lauris Stepanovs,
Keenthemes Support Team
