[Explore Vis] Fix table visualiztion issues

changelogs/fragments/10754.yml

@@ -0,0 +1,2 @@
+fix:
+- Fix fields order issue ([#10754](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10754))

src/plugins/explore/public/components/visualizations/table/table_vis.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { EuiDataGrid, EuiDataGridCellValueElementProps, EuiDataGridColumn } from '@elastic/eui';
 import { VisColumn, VisFieldType } from '../types';
 import { defaultTableChartStyles, CellTypeConfig, TableChartStyle } from './table_vis_config';
@@ -27,6 +27,7 @@ export const TableVis = React.memo(
   ({ rows, columns, styleOptions, pageSizeOptions, showStyleSelector }: TableVisProps) => {
     const pageSize = styleOptions?.pageSize ?? defaultTableChartStyles.pageSize;
     const [visibleColumns, setVisibleColumns] = useState(() => columns.map(({ column }) => column));
+    const prevFieldNamesRef = useRef<string[]>(columns.map(({ name }) => name));
     const [pagination, setPagination] = useState({ pageIndex: 0, pageSize });
     const [filters, setFilters] = useState<Record<string, FilterConfig>>({});
     const [popoverOpenColumnId, setPopoverOpenColumnId] = useState<string | null>(null);
@@ -100,6 +101,33 @@ export const TableVis = React.memo(
       }
     }, [styleOptions?.showColumnFilter]);
 
+    // Handle column visibility when columns change
+    // If there are no common fields between old and new columns, show all new columns
+    // If there are common fields, preserve existing visible columns and add any new ones
+    useEffect(() => {
+      const currentFieldNames = columns.map(({ name }) => name);
+      const prevFieldNames = prevFieldNamesRef.current;
+      const newColumnIds = columns.map(({ column }) => column);
+
+      const hasCommonFields = currentFieldNames.some((name) => prevFieldNames.includes(name));
+
+      if (!hasCommonFields || prevFieldNames.length === 0) {
+        setVisibleColumns(newColumnIds);
+      } else {
+        setVisibleColumns((prevVisibleColumns) => {
+          const existingVisibleColumns = prevVisibleColumns.filter((colId) =>
+            newColumnIds.includes(colId)
+          );
+          const newColumns = newColumnIds.filter((colId) => !prevVisibleColumns.includes(colId));
+          const result = [...existingVisibleColumns, ...newColumns];
+
+          return result;
+        });
+      }
+
+      prevFieldNamesRef.current = currentFieldNames;
+    }, [columns]);
+
     const filteredRows = useMemo(() => {
       return rows.filter((row) =>
         Object.entries(filters).every(([columnId, config]) => {

src/plugins/explore/public/components/visualizations/visualization_render.tsx

@@ -53,11 +53,13 @@ export const VisualizationRender = ({
   }, [visualizationData?.transformedData]);
 
   const columns = useMemo(() => {
-    return [
+    const allColumns = [
       ...(visualizationData?.numericalColumns ?? []),
       ...(visualizationData?.categoricalColumns ?? []),
       ...(visualizationData?.dateColumns ?? []),
     ];
+
+    return allColumns.sort((a, b) => a.id - b.id);
   }, [
     visualizationData?.numericalColumns,
     visualizationData?.categoricalColumns,