[Bug][Table Visualization] Fix first column sort issue (opensearch-pr…

…oject#2828) Currently, the first column of table vis won't sort. This PR fixes the bug. Issue Resolved: opensearch-project#2827 Signed-off-by: Anan Zhuang <[email protected]> Signed-off-by: Anan Zhuang <[email protected]>
wazuh · Dec 14, 2022 · fe9fb08 · fe9fb08
1 parent 32087bf
commit fe9fb08
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -63,6 +63,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Removes Add Integration button ([#2723](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2723))
 - Change geckodriver version to make consistency ([#2772](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2772))
 - [Multi DataSource] Update default audit log path ([#2793](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2793))
+- [Table Visualization] Fix first column sort issue ([#2828](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2828))
 
 ### 🚞 Infrastructure
 

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
@@ -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]);