TablePanel: Make sorting case-insensitive

[kaydelaney]

What this PR does / why we need it:
Adds a sort type 'alphanumeric-insensitive' to the Table component and makes it the default for non-numeric fields.

Which issue(s) this PR fixes:
Closes #30476

Special notes for your reviewer:

[hugohaggmark]

LGTM and works as expected!

[hugohaggmark]

Friendly reminder to change title to be change log compatible, add appropriate labels, milestone and backport label so this issue gets shipped in the next patch release.

[leeoniya]

might also consider https://stackoverflow.com/a/51005583

[kaydelaney]

@leeoniya Oh that's very nice, had no idea that existed. Will change to make use of that.

[leeoniya]

sorry, last drive-by comment: caching the locale object outside the sort loop should be faster, too:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator

something like

let myCompare = new Intl.Collator('sv', { sensitivity: 'base' }).compare;

stringsArray.sort(myCompare);

[kaydelaney]

sorry, last drive-by comment: caching the locale object outside the sort loop should be faster, too:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator

something like

let myCompare = new Intl.Collator('sv', { sensitivity: 'base' }).compare;

stringsArray.sort(myCompare);

I saw mention of that Collator thing on MDN, but I'm not sure it'll work with how react-table is set up, since you only provide a comparison function rather than sorting the arrays yourself.

[dhilt]

Hi! We have a fork of Grafana 7.3.2 and I'm fixing the same issue. The fix you are discussing here looks good except typings. The following method

export function sortCaseInsensitive(a: Row<any>, b: Row<any>, id: string) {
  return a.values[id].localeCompare(b.values[id], undefined, { sensitivity: 'base' });
}

allows to pass non-string values which don't have "localeCompare" method. For example, null value, it will cause "SyntaxError: Invalid or unexpected token". This is the case that I faced in our environment.

[kaydelaney]

Hi! We have a fork of Grafana 7.3.2 and I'm fixing the same issue. The fix you are discussing here looks good except typings. The following method

export function sortCaseInsensitive(a: Row<any>, b: Row<any>, id: string) {
  return a.values[id].localeCompare(b.values[id], undefined, { sensitivity: 'base' });
}

allows to pass non-string values which don't have "localeCompare" method. For example, null value, it will cause "SyntaxError: Invalid or unexpected token". This is the case that I faced in our environment.

Thanks for catching this! Pushed a fix