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[] {