Default Ascending Sort using MUI data grid not working properly

Viewed 21

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

  1. Alphabetical English data first (A-Z)
  2. Japanese data
  3. 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?

0 Answers
Related