Mui-datatables: Custom Sort not working properly

[DivyaSalla]

The Sort Order is "asc" for the first two attempts of sorting in a column

I have a requirement where I have to perform alphanumeric sorting.

Ex. If I have column values as 11Test, 22Test, 2Test, 1Test. The asc order sorting should result in 1Test,2Test,11Test,22Test.

The MUI DataTables sorting results in 11Test, 1Test, 22Test and 2Test. So I went for custom sorting.

Expected Behavior

The Sort Order and Sort Symbol should be in sync for the first two tries. The Sort order should be changing for every click

Current Behavior

When I click the column header for the first time, the sort order is asc and the sort symbol is upward arrow. When I click the column header next time, the sort order is asc and the sort symbol is downward arrow. From the third click the sort order and symbol is in sync.

Steps to Reproduce (for bugs)

My Code will look like this:

The Columns and options configured as below:
const columns = ["Column1", "Column 2", "Column 3"];
const options = {
filterType: 'dropdown',
selectableRows: false,
filter: false,
print: false,
download: false,
viewColumns: false,
sort: true,
customSort: (data, colIndex, order) => {
return data.sort((a, b) => {
a = a.data[colIndex] || '';
b = b.data[colIndex] || '';
if (order === 'asc') {
return a.toString().localeCompare(b, undefined, { numeric: true });
} else if (order === 'desc') {
return b.toString().localeCompare(a, undefined, { numeric: true });
}
});
}
};

The Table is configured as below in render()
title={"column details}
data={this.state.datas.map(data => {
return [
data.column1,
data.column2,
data.column3
]
})}
columns={columns}
options={options}
displaySelectAll={false}
/>

1. After Render click on column 1 to sort. The Sort Order will be asc and the Sort Symbol will be upward arrow
2. Click Column 1 again to sort, the Sort Order will be asc and the Sort Symbol will be downward arrow. No change in the sort value

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.3.2 |
| MUI-datatables | 2.0.0-beta-38 |
| React | 16.4.18 |
| browser | Chrome Version 70.0.3538.77 |

[ShaggyKris]

I too am experiencing this issue. I very much enjoy this library, but since I need to sort via data and display React components in the table, I require the use of Custom Sorting. Using MUI-Datatables v2.0.0-beta-39 with @material-ui/core v3.2.0.

[marcomunooz]

I'm facing this exact same issue, have a column with momentjs objects.

Also comming to my mind right now. Wouldn't it be better to have customSort as a columnProp instead of a table prop? I had to write custom sorting for all the other columns when the default was ok.

[Legogris]

Same thing here. Also agreeing with @marco270 that setting sorting on a column basis would be great.

[Legogris]

PR with fix: #292

[gregnb]

This may be resolved now can anyone confirm?

[giovannirosa]

It's working correctly in 2.0.0-beta-43.