From 3b1b0184e72f7be0bc901f3492491c64f37815ff Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 8 Nov 2022 17:18:55 -0800
Subject: [PATCH] [Bug][Table Visualization] Fix first column sort issue
 (#2828) (#2837)

Currently, the first column of table vis won't sort. This PR fixes
the bug.

Issue Resolved:
https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2827

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

Signed-off-by: Anan Zhuang <ananzh@amazon.com>
(cherry picked from commit f12fa98da910bbaea50ca3b52f7b177c1531657b)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../public/components/table_vis_component.tsx        | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/plugins/vis_type_table_new/public/components/table_vis_component.tsx b/src/plugins/vis_type_table_new/public/components/table_vis_component.tsx
index e24784d9eb1a..4a25395703b0 100644
--- a/src/plugins/vis_type_table_new/public/components/table_vis_component.tsx
+++ b/src/plugins/vis_type_table_new/public/components/table_vis_component.tsx
@@ -38,8 +38,10 @@ export const TableVisComponent = ({
   const pagination = usePagination(visConfig, rows.length);
 
   const sortedRows = useMemo(() => {
-    return uiState.sort?.colIndex && uiState.sort.direction
-      ? orderBy(rows, columns[uiState.sort.colIndex]?.id, uiState.sort.direction)
+    return uiState.sort.colIndex !== null &&
+      columns[uiState.sort.colIndex].id &&
+      uiState.sort.direction
+      ? orderBy(rows, columns[uiState.sort.colIndex].id, uiState.sort.direction)
       : rows;
   }, [columns, rows, uiState]);
 
@@ -58,8 +60,10 @@ export const TableVisComponent = ({
   const dataGridColumns = getDataGridColumns(sortedRows, columns, table, event, uiState.width);
 
   const sortedColumns = useMemo(() => {
-    return uiState.sort?.colIndex && uiState.sort.direction
-      ? [{ id: dataGridColumns[uiState.sort.colIndex]?.id, direction: uiState.sort.direction }]
+    return uiState.sort.colIndex !== null &&
+      dataGridColumns[uiState.sort.colIndex].id &&
+      uiState.sort.direction
+      ? [{ id: dataGridColumns[uiState.sort.colIndex].id, direction: uiState.sort.direction }]
       : [];
   }, [dataGridColumns, uiState]);