root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 243 Packages Projects Releases Wiki Activity

TablePanel: Makes sorting case-insensitive (#32435) 

* UI/Table: Make sorting case-insensitive
Closes #30476
This commit is contained in:
kay delaney 2021-04-07 14:28:51 +01:00 committed by GitHub
parent acc8e78c24
commit 6c16ecf65f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/Table/Table.tsx
View File

@ -14,7 +14,7 @@ import {
useTable, useTable,
} from 'react-table'; } from 'react-table';
import { FixedSizeList } from 'react-window'; import { FixedSizeList } from 'react-window';
import { getColumns } from './utils'; import { getColumns, sortCaseInsensitive } from './utils';
import { useTheme } from '../../themes'; import { useTheme } from '../../themes';
import { import {
TableColumnResizeActionCallback, TableColumnResizeActionCallback,
@ -151,6 +151,9 @@ export const Table: FC<Props> = memo((props: Props) => {
disableResizing: !resizable, disableResizing: !resizable,
stateReducer: stateReducer, stateReducer: stateReducer,
initialState: getInitialState(initialSortBy, memoizedColumns), initialState: getInitialState(initialSortBy, memoizedColumns),
sortTypes: {
'alphanumeric-insensitive': sortCaseInsensitive,
},
}), }),
[initialSortBy, memoizedColumns, memoizedData, resizable, stateReducer] [initialSortBy, memoizedColumns, memoizedData, resizable, stateReducer]
); );

6
packages/grafana-ui/src/components/Table/utils.ts
View File

@ -63,7 +63,7 @@ export function getColumns(data: DataFrame, availableWidth: number, columnMinWid
case FieldType.time: case FieldType.time:
return 'basic'; return 'basic';
default: default:
return 'alphanumeric'; return 'alphanumeric-insensitive';
} }
}; };
@ -204,3 +204,7 @@ export function getFilteredOptions(options: SelectableValue[], filterValues?: Se
return options.filter((option) => filterValues.some((filtered) => filtered.value === option.value)); return options.filter((option) => filterValues.some((filtered) => filtered.value === option.value));
} }
export function sortCaseInsensitive(a: Row<any>, b: Row<any>, id: string) {
return String(a.values[id]).localeCompare(String(b.values[id]), undefined, { sensitivity: 'base' });
}