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) => (
<ResultCustomHeader tableProps={props} title='Created Date' className='min-w-125px' />
),
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 (5)
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
Thanks!
React Dev Vacancy
