Prime react dataTable sorting is not working with Dates

Question

Incorrect sorting of dates, How to sort date in the below example, Sorting is working according to day but not month or year. I need sorting according to year first following month and then day.


<DataTable value={item.task}
ref={dt}                                        
selectionMode="single"
globalFilter={globalFilter}
rowClassName={classRow}
selection={selectedProduct} onSelectionChange={e => setSelectedProduct(e.value)}
footer={footer}
removableSort
dataKey="id" paginator={pagination} rows={paginationRows}
onColReorder={onColReorder}
>

{phaseColumns && phaseColumns.map(col=> {
return <Column 
key={col.value} 
columnKey={col.value} 
field={col.value} 
header={col.text} 
sortable  
sortOrder="-1"
/>
})}

</DataTable>

@robert ....yes, inside item.task, i have passed data including date in string "DD/MM/YYYY" format — Mudita Pandey, Jul 20 '21 at 16:00
maybe that is the problem if you have dates in that format it is still a string not a Date. Can you share some data? Or a debug screenshot? — robert, Jul 20 '21 at 17:15

score 0 · Answer 1 · answered Dec 14 '21 at 13:41

I have the same issue. To sort correctly the dates you have to make a new instance of Date object in the data you are adding into the table (this code should work)

 dateTemplate(rowData, field) {
    return rowData[field.field].toLocaleDateString(navigator.language, {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
    })

}

The only thing different in my code is that i specify what dataType has the column, but it dosen't work. If i multi sort by other columns it dose well.

this.state.columns.map((item) => {
                            if (item.datatype == "date" || item.datatype == "datetime") {
                                return (
                                    <Column
                                        key={item.field}
                                        field={item.field}
                                        header={item.header}
                                        body={item.datatype == "date" ? this.dateTemplate : this.dateTimeTemplate}
                                        sortable
                                        filter
                                        filterPlaceholder={item.filterPlaceholder}
                                        filterField={item.field}
                                        sortField={item.field}
                                        style={{width: item.header.length + 1 + "rem"}}
                                        dataType="date"
                                        filterElement={this.dateFilterTemplate}
                                    />
                                );
                            } else if (item.datatype == "number" || item.datatype == "decimal" || item.datatype == "amount") {
                                return(
                                    <Column
                                        key={item.field}
                                        field={item.field}
                                        header={item.header}
                                        sortable
                                        filter
                                        filterPlaceholder={item.filterPlaceholder}
                                        filterField={item.field}
                                        sortField={item.field}
                                        dataType="numeric"
                                        style={{width: item.header.length + 1 + "rem"}}
                                    />
                                );
                            } else {
                                return (
                                    <Column
                                        key={item.field}
                                        field={item.field}
                                        header={item.header}
                                        sortable
                                        filter
                                        filterPlaceholder={item.filterPlaceholder}
                                        filterField={item.field}
                                        sortField={item.field}
                                        dataType="text"
                                        style={{width: item.header.length + 1 + "rem"}}
                                    />
                                );
                            }
                        })

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/30584909) — jiwopene, Dec 14 '21 at 17:29

score 0 · Answer 2 · edited Dec 16 '21 at 21:38

0

I finally got the answer to this issue, you have to use the same instance of the Date object created when reading the data, the library sorters dosen't recognice new instances of the Date object having the same date at the constructor. I recomend to have a list (hash) of the dates that already had been added.

edited Dec 16 '21 at 21:38

Dharman

30,962
25
85
135

answered Dec 16 '21 at 21:32

Agustin Caamaño

1

Prime react dataTable sorting is not working with Dates

2 Answers2