diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx index 90d876d242eb..aadb8f9aec07 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx @@ -44,6 +44,7 @@ import SelectPageSize, { import SimplePagination from './components/Pagination'; import useSticky from './hooks/useSticky'; import { PAGE_SIZE_OPTIONS } from '../consts'; +import { sortAlphanumericCaseInsensitive } from './utils/sortAlphanumericCaseInsensitive'; export interface DataTableProps extends TableOptions { tableClassName?: string; @@ -68,6 +69,10 @@ export interface RenderHTMLCellProps extends HTMLProps { cellContent: ReactNode; } +const sortTypes = { + alphanumeric: sortAlphanumericCaseInsensitive, +}; + // Be sure to pass our updateMyData and the skipReset option export default function DataTable({ tableClassName, @@ -174,6 +179,7 @@ export default function DataTable({ initialState, getTableSize: defaultGetTableSize, globalFilter: defaultGlobalFilter, + sortTypes, ...moreUseTableOptions, }, ...tableHooks, diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/utils/sortAlphanumericCaseInsensitive.ts b/superset-frontend/plugins/plugin-chart-table/src/DataTable/utils/sortAlphanumericCaseInsensitive.ts new file mode 100644 index 000000000000..789e0cef7f75 --- /dev/null +++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/utils/sortAlphanumericCaseInsensitive.ts @@ -0,0 +1,37 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Row } from 'react-table'; + +export const sortAlphanumericCaseInsensitive = ( + rowA: Row, + rowB: Row, + columnId: string, +) => { + const valueA = rowA.values[columnId]; + const valueB = rowB.values[columnId]; + + if (!valueA || typeof valueA !== 'string') { + return -1; + } + if (!valueB || typeof valueB !== 'string') { + return 1; + } + return valueA.localeCompare(valueB) > 0 ? 1 : -1; +}; diff --git a/superset-frontend/plugins/plugin-chart-table/test/sortAlphanumericCaseInsensitive.test.ts b/superset-frontend/plugins/plugin-chart-table/test/sortAlphanumericCaseInsensitive.test.ts new file mode 100644 index 000000000000..4ba35ba602d5 --- /dev/null +++ b/superset-frontend/plugins/plugin-chart-table/test/sortAlphanumericCaseInsensitive.test.ts @@ -0,0 +1,135 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { sortAlphanumericCaseInsensitive } from '../src/DataTable/utils/sortAlphanumericCaseInsensitive'; + +const testData = [ + { + values: { + col: 'test value', + }, + }, + { + values: { + col: 'a lowercase test value', + }, + }, + { + values: { + col: '5', + }, + }, + { + values: { + col: NaN, + }, + }, + { + values: { + col: '1234', + }, + }, + { + values: { + col: Infinity, + }, + }, + { + values: { + col: '.!# value starting with non-letter characters', + }, + }, + { + values: { + col: 'An uppercase test value', + }, + }, + { + values: { + col: undefined, + }, + }, + { + values: { + col: null, + }, + }, +]; + +describe('sortAlphanumericCaseInsensitive', () => { + it('Sort rows', () => { + const sorted = [...testData].sort((a, b) => + // @ts-ignore + sortAlphanumericCaseInsensitive(a, b, 'col'), + ); + + expect(sorted).toEqual([ + { + values: { + col: null, + }, + }, + { + values: { + col: undefined, + }, + }, + { + values: { + col: Infinity, + }, + }, + { + values: { + col: NaN, + }, + }, + { + values: { + col: '.!# value starting with non-letter characters', + }, + }, + { + values: { + col: '1234', + }, + }, + { + values: { + col: '5', + }, + }, + { + values: { + col: 'a lowercase test value', + }, + }, + { + values: { + col: 'An uppercase test value', + }, + }, + { + values: { + col: 'test value', + }, + }, + ]); + }); +});