Inconsistent Alphanumeric Sorting with ag-grid and String Cells [duplicate]

问题

Im using ag-grid-react to display a table of data from an endpoint. I have a column which contains alphanumeric values which needs to be sortable using a "natural" sort algorithm (i.e. numbers are grouped together, alphanumeric strings are grouped together...)

Below is my column definition. Sorting is enabled on the grid, and when I click the column to sort the grid, everything appears sorted except for some strings which start with a numeral that interrupt the sequence of strings beginning with C.

This happens with ag-grid's default sorting algorithm, regardless of whether or not accentedSort is true or false, and even with a basic custom sort comparator (see below.)

Column Definition:


        field: 'cqttUnitPayItemDescriptionId',
        headerName: 'Description',
        type: 'dropdown',
        editable: true,
        resizable: true,
        valueGetter: (p) => {
            const value = p.data[p.colDef.field];
            const cellDescription = p.data.description;

            // returns a string value for display
            // `items` is an ImmutableJs Map of objects, grouped by index, containing a `description` string property.
            return value >= 0 ? items.getIn([value, 'description']) || cellDescription : value; 
        },
        cellEditorFramework: AgGridCellEditor({ component: AgDropdownEditor, renderProps: innerProps => ({ createable: true, labelProperty: 'description', options: itemsByUnitPayItemId.getIn([innerProps.data.unitPayItemId], Map()).toList(), ...innerProps }) }),
        sortable: true,
        width: 250,
        comparator: StringComparator
    },

Custom Sort Comparator:

export function StringComparator(valueA: string = '', valueB: string = '') {
    const valueALower = valueA.toLowerCase();
    const valueBLower = valueB.toLowerCase();
    return valueALower.localeCompare(valueBLower, 'en', { numeric: true });
}

Visual Example of the Sorting Inconsistencies:

Given the screenshot above: Manual testing of the comparator shows that the string "4' x 8' x 16' (Dragline Mat)" should come before "Construction Crew "Move Around" - Tie-Ins" (i.e. the return value of calling the comparator with those arguments respectively is -1) but clearly the grid thinks otherwise. Could it be I'm missing something regarding the scope of calls to the comparator function?

回答1:

Turns out some of the strings that were being sorted contained a space at the very beginning of the strings, causing them to (properly) be sorted before numerals and alphabetical characters altogether. I've solved this issue by simply appending .trim() to the end of each value being compared in the StringComparator:

export function StringComparator(valueA: string = '', valueB: string = '') {
    const valueALower = valueA.toLowerCase().trim();
    const valueBLower = valueB.toLowerCase().trim();
    return valueALower.localeCompare(valueBLower, 'en', { numeric: true });
}

来源：https://stackoverflow.com/questions/57528061/inconsistent-alphanumeric-sorting-with-ag-grid-and-string-cells

标签

sorting

ecmascript-6

ag-grid