diff --git a/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.scss b/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.scss index 6a819980e1..0257bb68b4 100644 --- a/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.scss +++ b/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.scss @@ -62,4 +62,19 @@ &__more-badge { margin-left: var(--g-spacing-1); } + &__key-icon { + position: absolute; + top: 3.5px; + + margin-left: var(--g-spacing-half); + + vertical-align: baseline; + } + &__id-wrapper { + position: relative; + + display: inline-block; + + padding-right: var(--g-spacing-1); + } } diff --git a/src/containers/Tenant/Schema/SchemaViewer/columns.tsx b/src/containers/Tenant/Schema/SchemaViewer/columns.tsx index ec87df93e3..7b403c6207 100644 --- a/src/containers/Tenant/Schema/SchemaViewer/columns.tsx +++ b/src/containers/Tenant/Schema/SchemaViewer/columns.tsx @@ -1,10 +1,14 @@ import DataTable from '@gravity-ui/react-data-table'; +import {Icon} from '@gravity-ui/uikit'; import {getColumnWidth} from '../../../../utils/getColumnWidth'; import i18n from './i18n'; +import {b} from './shared'; import type {SchemaColumn, SchemaData} from './types'; +import KeyIcon from '@gravity-ui/icons/svgs/key.svg'; + export const SCHEMA_COLUMNS_WIDTH_LS_KEY = 'schemaTableColumnsWidth'; const SCHEMA_TABLE_COLUMS_IDS = { @@ -26,7 +30,16 @@ const idColumn: SchemaColumn = { return i18n('column-title.id'); }, width: 60, - render: ({row}) => row.id, + align: DataTable.RIGHT, + render: ({row}) => { + const keyIcon = ; + return ( + + {row.id} + {row.keyColumnIndex === undefined || row.keyColumnIndex === -1 ? null : keyIcon} + + ); + }, }; const nameColumn: SchemaColumn = { name: SCHEMA_TABLE_COLUMS_IDS.name, diff --git a/src/containers/Tenant/Schema/SchemaViewer/prepareData.ts b/src/containers/Tenant/Schema/SchemaViewer/prepareData.ts index 8b1b34391e..93607742f4 100644 --- a/src/containers/Tenant/Schema/SchemaViewer/prepareData.ts +++ b/src/containers/Tenant/Schema/SchemaViewer/prepareData.ts @@ -70,10 +70,8 @@ function prepareRowTableSchema(data: TTableDescription = {}): SchemaData[] { columnCodec, }; }); - const keyColumns = preparedColumns?.filter((column) => column.keyColumnIndex !== -1) || []; - const otherColumns = preparedColumns?.filter((column) => column.keyColumnIndex === -1) || []; - return [...keyColumns, ...otherColumns]; + return preparedColumns ?? []; } function prepareExternalTableSchema(data: TExternalTableDescription = {}): SchemaData[] {