diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx index 33a7adc255..5fc99c699e 100644 --- a/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx +++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx @@ -6,8 +6,9 @@ * you may not use this file except in compliance with the License. */ +import { computed } from 'mobx'; import { observer, useLocalStore } from 'mobx-react'; -import { useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; import styled from 'reshadow'; import { useTranslate } from '@cloudbeaver/core-localization'; @@ -97,6 +98,9 @@ export const PropertiesTable = observer(function PropertiesTable({ [] ); + const alphabetOrderProperties = useMemo(() => computed(() => properties.slice().sort( + (a, b) => (a?.displayName ?? '').localeCompare(b?.displayName ?? ''))), [properties]); + return styled(useStyles(PROPERTIES_TABLE_STYLES))( @@ -111,7 +115,7 @@ export const PropertiesTable = observer(function PropertiesTable({ - {properties.map(property => ( + {alphabetOrderProperties.get().map(property => (