AG Grid: Customized sorting order in column

Dash Python
1

Hi! I have a column in a dsah AG grid which contains strings like:

items = ["A1", "A10", "A12", "A23", "A4", "A9", "A2"]

And I want to sort them using the numbers following the letter at the beginning. There is always only one letter before the numbers. In python I can do the following:

items = ["A1", "A10", "A12", "A23", "A4", "A9", "A2"]
print(sorted(items, key=lambda x: int(x[1:])))

>>> ['A1', 'A2', 'A4', 'A9', 'A10', 'A12', 'A23']

but I have not found the way to implement such customization with dash AG grid.

I feel like the textMatcher parameter of javascript AG grid (found here) could do that, but I am not sure this parameter is available in the dash version, and I am not really familiar with javascript so help would be greatly appreciated!

I have thought about using valueGetter and valueFormatter. While that would probably allow me to filter with agNumberColumnFilter ignoring the first character, I believe that would also change the representation of my data in the table, removing the first character.

Thanks!

2

Hello @tcharland13,

You are looking for the comparator inside the columnDef, something like this might work:

dagfuncs.comparator = (valueA, valueB, nodeA, nodeB, isDescending) => {
            if (parseInt(valueA) == parseInt(valueB)) return 0;
            return (parseInt(valueA) > parseInt(valueB)) ? 1 : -1;
        }

Then use it like this: "comparator" : {"function": "comparator"}

Info on JS functions with dash:

3

Thanks!
I somehow missed that part of the documentation.
I made it work but I had to modify a little bit your code since parseInt returns NaN with a mix of letters and numbers. This worked:

dagfuncs.comparator = (valueA, valueB, nodeA, nodeB, isDescending) => {
    const numberA = parseInt(valueA.slice(1));
    const numberB = parseInt(valueB.slice(1));
    if (numberA === numberB) return 0;
    return (numberA > numberB) ? 1 : -1;
}
1 Like
4

You will run into issues if you ever get different leading letters, you’ll have to figure that out.

You could use a character code from the first character and then add it to other half.

5

Let me know if this works:

function addCharactersNumbers(string) {
    alpha = Regex.Replace(string, "[^A-z]","")
    returnNumber = parseFloat(Regex.Replace(string, "[^0-9]",""))
    for (var y=0; y<alpha.length; y++) {
        returnNumber += alpha[y].charCodeAt(0)
    }
    return returnNumber
}

dagfuncs.comparator = (valueA, valueB, nodeA, nodeB, isDescending) => {
    const numberA = addCharactersNumbers(valueA);
    const numberB = addCharactersNumbers(valueB);
    if (numberA === numberB) return 0;
    return (numberA > numberB) ? 1 : -1;
}
6

This code doesn’t seem to work. But I feel like my method is sufficient since I know for a fact that this column will only contain the same leading character.
Thanks!

1 Like
7

Might be important to mention that this function does not work as soon as there a some null values in the column. In this case, the sorting arrow disappear and sorting in impossible, unless filtering is done to remove the empty values.

A solution to this seems to be to add if (valueA === null || valueB === null) return 1; in the function to deal with this case.

However, this seems to make the rows with empty values for this column disappear from the table, instead of being put at the end, like I would have expected with the return value of 1.

@jinnyzor Do you have any idea as to why this happens? Or any other fix?

8

Hmm, give this a shot:

dagfuncs.comparator = (valueA, valueB, nodeA, nodeB, isDescending) => {
    if (!valueA) { return -1};
    if (!valueB) { return 1};
    const numberA = parseInt(valueA.slice(1));
    const numberB = parseInt(valueB.slice(1));
    if (numberA === numberB) return 0;
    return (numberA > numberB) ? 1 : -1;
}
1 Like
9

It works, thanks! The blank cells appear at the beginning in ascending order.

1 Like