From eba72a0a18605377f06e485f54d8072255900915 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D1=80=D1=82=D1=91=D0=BC=20=D0=9C=D1=83=D1=84=D0=B0?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=BB=D0=BE=D0=B2?=
 <67755036+artemmufazalov@users.noreply.github.com>
Date: Wed, 27 Nov 2024 15:26:42 +0300
Subject: [PATCH] feat(QueryResultTable): display row number (#1714)

---
 src/components/QueryResultTable/QueryResultTable.tsx | 5 +++++
 src/styles/mixins.scss                               | 1 +
 2 files changed, 6 insertions(+)

diff --git a/src/components/QueryResultTable/QueryResultTable.tsx b/src/components/QueryResultTable/QueryResultTable.tsx
index 3df85866f..3623e959a 100644
--- a/src/components/QueryResultTable/QueryResultTable.tsx
+++ b/src/components/QueryResultTable/QueryResultTable.tsx
@@ -21,6 +21,7 @@ const TABLE_SETTINGS: Settings = {
     ...DEFAULT_TABLE_SETTINGS,
     stripedRows: true,
     sortable: false,
+    displayIndices: true,
 };
 
 export const b = cn('ydb-query-result-table');
@@ -69,6 +70,9 @@ const prepareGenericColumns = (data: KeyValueRow[]) => {
 
 const getRowIndex = (_: unknown, index: number) => index;
 
+// Display row number in format 1-10 instead of 0-9
+const getVisibleRowIndex = (_: unknown, index: number) => index + 1;
+
 interface QueryResultTableProps
     extends Omit<ResizeableDataTableProps<KeyValueRow>, 'data' | 'columns'> {
     data?: KeyValueRow[];
@@ -100,6 +104,7 @@ export const QueryResultTable = (props: QueryResultTableProps) => {
             settings={TABLE_SETTINGS}
             // prevent accessing row.id in case it is present but is not the PK (i.e. may repeat)
             rowKey={getRowIndex}
+            visibleRowIndex={getVisibleRowIndex}
             {...restProps}
         />
     );
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index 141e05df8..0f729606f 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -83,6 +83,7 @@
     max-width: 600px;
 
     cursor: pointer;
+    vertical-align: middle;
     white-space: nowrap;
     text-overflow: ellipsis;
 }