Material-table: Sorting on a field with render property is not working

[rbkumar88]

Hi,

Is there any way to get this working. Say I have a render property but still sort it using the field property. I have a date field in "2018-10-24T23:25:39.129Z" format, which I want to convert it to a new Date("2018-10-24T23:25:39.129Z").toString() .Currently I have used a render with a dummy div and just the converted date inside it, and sorting doesn't work on that too. So ,in short, I want to do sorting based on my ISO format but still render it using the new format.

thanks

[mbrn]

Hi @rbkumar88,

Can you share your columnDefinition?

[rbkumar88]

Sorting doesn't work on either of these.

1. This one just add styles.

{title: "Status", field: "status", render: rowData => {
                                    const color = rowData.status === "SUCCESS" ? "#4CAF50" : "#f44336"
                                    return (
                                        <div style={{ width: "100%", backgroundColor: "#ddd", height: 20 }}>
                                            <div
                                                style={{
                                                    textAlign: "center",
                                                    color: "white",
                                                    backgroundColor: color,
                                                    height: 20,
                                                }}
                                            >
                                                {rowData.status}
                                            </div>
                                        </div>
                                    );
                                }},

1. This one just converts to new Date()

                            {title: "Time", field: "timestamp" ,render: rowData => {
                                    const convertedDate = new Date(rowData.timestamp).toString();
                                    return (
                                        <div>
                                            {convertedDate}
                                        </div>
                                    );
                                }},

[mbrn]

@rbkumar88,

When you cover your datetime string with div tag, every row return a React element that could not be compared or sorted. We may take a sort function on column definition to sort this kind of data.

For your case you can remove div tags and return only string value of datetime as:

 {title: "Time", field: "timestamp" ,render: rowData => {
                                    const convertedDate = new Date(rowData.timestamp).toString();
                                    return convertedDate;
                                }}, 

[rbkumar88]

Thanks. How about the first case. Sorting still doesn't work on that.

[mbrn]

As i told, I will add a custom sort feature for next release. Star repo and wait for it about 3-4 days.

[mbrn]

Hi @rbkumar88,

You can use version 1.1.1. Search and sort algorithms runs on field value of column instead of render result.

[MGMehdi]

Sorting still don't work