I have a mui Data grid. Some data fields in certain columns contain data in Japanese as well. When I try ascending sort , the resultant data is very strange and the japanese data comes in between the English fields. I want to be able to sort all the data according to the English alphabets and then push the remaining Japanese data to the end. How do I do this using the data grid? I have attached the images of the column when ascending sort is clicked. The order I want is as follows
- Alphabetical English data first (A-Z)
- Japanese data
- Null data
My code is as follows
columns.push({
field: 'brewShipDistLocId',
headerName: nowrapHeader(appLanguages.selectDistToShip[lang]),
renderCell: (params) =>
getSelectCustomBodyRender(
this.getBrewShipRestLocOptionMap(params.row.brewShipDistLocId),
params.row.brewShipDistLocId,
),
flex: 1,
});
Data Grid
<div style={{ height: 640, width: '100%' }}>
<DataGrid
sx={{
'& .MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainer': {
display: 'none',
},
}}
rows={this.state.cancelShipFlag ? filter_row_data : serialsList || []}
columns={columns}
rowsPerPageOptions={[25, 50, 100]}
checkboxSelection={this.state.cancelShipFlag ? true : false}
disableSelectionOnClick={false}
components={{
Toolbar: NewToolbar,
}}
/>
</div>
The order that it sorts in when I apply ascending sort is E, T , C , G. Also, there are rows of Japanese data in between. I want those to move to the end.
How is the foreign characters being treated by the comparison algorithm? Can i manually override it?