[Explore Vis] Add customized column order support for table visualization (#10898)

* Fix issue about column order

Signed-off-by: Luna Liu <[email protected]>

* Changeset file for PR #10898 created/updated

* Fix issue

Signed-off-by: Luna Liu <[email protected]>

* Fix issue

Signed-off-by: Luna Liu <[email protected]>

* fix table_vis_config.test.ts

Signed-off-by: Justin Kim <[email protected]>

* Fix issue

Signed-off-by: Luna Liu <[email protected]>

---------

Signed-off-by: Luna Liu <[email protected]>
Signed-off-by: Justin Kim <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Justin Kim <[email protected]>

Author: 3 people

changelogs/fragments/10898.yml

@@ -0,0 +1,2 @@
+feat:
+- Add customized column order toggle for table visualization ([#10898](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10898))

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, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { EuiDataGrid, EuiDataGridCellValueElementProps, EuiDataGridColumn } from '@elastic/eui';
 import { VisColumn, VisFieldType } from '../types';
 import { defaultTableChartStyles, CellTypeConfig, TableChartStyle } from './table_vis_config';
@@ -21,15 +21,108 @@ interface TableVisProps {
   styleOptions?: TableChartStyle;
   pageSizeOptions?: number[];
   showStyleSelector?: boolean;
+  onStyleChange?: (updatedStyle: Partial<TableChartStyle>) => void;
+  disableActions?: boolean;
 }
 
 export const TableVis = React.memo(
-  ({ rows, columns, styleOptions, pageSizeOptions, showStyleSelector }: TableVisProps) => {
-    const sortedColumns = useMemo(() => [...columns].sort((a, b) => a.id - b.id), [columns]);
+  ({
+    rows,
+    columns,
+    styleOptions,
+    pageSizeOptions,
+    showStyleSelector,
+    onStyleChange,
+    disableActions,
+  }: TableVisProps) => {
+    const sortedColumns = useMemo(() => {
+      const baseColumns = [...columns].sort((a, b) => a.id - b.id);
+
+      // If user has a saved column order, use it
+      if (styleOptions?.visibleColumns && styleOptions.visibleColumns.length > 0) {
+        const userOrder = styleOptions.visibleColumns;
+        const orderedColumns: VisColumn[] = [];
+
+        // First, add columns in user-specified order
+        userOrder.forEach((columnName) => {
+          const foundColumn = baseColumns.find((col) => col.name === columnName);
+          if (foundColumn) {
+            orderedColumns.push(foundColumn);
+          }
+        });
+
+        // Then add any new columns that weren't in the saved order
+        baseColumns.forEach((col) => {
+          if (!userOrder.includes(col.name)) {
+            orderedColumns.push(col);
+          }
+        });
+
+        return orderedColumns;
+      }
+
+      return baseColumns;
+    }, [columns, styleOptions?.visibleColumns]);
+
     const [visibleColumns, setVisibleColumns] = useState(() =>
       sortedColumns.map(({ column }) => column)
     );
 
+    // Update visibleColumns when sortedColumns changes, preserving user's visibility choices
+    useEffect(() => {
+      // Apply hiddenColumns from saved configuration if available
+      const hiddenColumns = styleOptions?.hiddenColumns || [];
+      const visibleColumnsFromConfig = sortedColumns.filter(
+        (col) => !hiddenColumns.includes(col.name)
+      );
+
+      setVisibleColumns(visibleColumnsFromConfig.map((col) => col.column));
+    }, [sortedColumns, styleOptions?.hiddenColumns]);
+
+    // Handle user column order changes - directly save any reorder/hide operations
+    const handleColumnVisibilityChange = useCallback(
+      (updatedVisibleColumns: string[]) => {
+        const previousVisibleColumns = visibleColumns;
+        setVisibleColumns(updatedVisibleColumns);
+
+        // Always save user changes when onStyleChange is available
+        if (onStyleChange) {
+          const allColumns = sortedColumns.map((col) => col.column);
+
+          // Check if this is a reordering or visibility change
+          const isReordering =
+            updatedVisibleColumns.length === previousVisibleColumns.length &&
+            updatedVisibleColumns.every((col) => previousVisibleColumns.includes(col));
+
+          // Calculate hidden columns
+          const newHiddenColumns = allColumns.filter((col) => !updatedVisibleColumns.includes(col));
+
+          if (isReordering) {
+            // This is a reordering operation - update column order
+            const finalUserOrder: string[] = [];
+
+            finalUserOrder.push(...updatedVisibleColumns);
+
+            onStyleChange({
+              visibleColumns: finalUserOrder
+                .map((id) => sortedColumns.find((col) => col.column === id)?.name ?? '')
+                .filter(Boolean),
+            });
+          } else {
+            // This is a visibility change - save hidden columns and update order if needed
+            const updates: Partial<TableChartStyle> = {
+              hiddenColumns: newHiddenColumns
+                .map((id) => sortedColumns.find((col) => col.column === id)?.name ?? '')
+                .filter(Boolean),
+            };
+
+            onStyleChange(updates);
+          }
+        }
+      },
+      [onStyleChange, visibleColumns, sortedColumns]
+    );
+
     const pageSize = styleOptions?.pageSize ?? defaultTableChartStyles.pageSize;
     const [pagination, setPagination] = useState({ pageIndex: 0, pageSize });
     const [filters, setFilters] = useState<Record<string, FilterConfig>>({});
@@ -69,6 +162,7 @@ export const TableVis = React.memo(
       return sortedColumns.map((col) => ({
         id: col.column,
         displayAsText: col.name,
+        actions: disableActions ? false : undefined,
         display: (
           <TableColumnHeader
             col={col}
@@ -88,6 +182,7 @@ export const TableVis = React.memo(
       filters,
       columnUniques,
       setFilters,
+      disableActions,
     ]);
 
     const onChangeItemsPerPage = useCallback((newPageSize: number) => {
@@ -240,7 +335,7 @@ export const TableVis = React.memo(
           className="tableVis__dataGrid"
           aria-label="Table visualization"
           columns={dataGridColumns}
-          columnVisibility={{ visibleColumns, setVisibleColumns }}
+          columnVisibility={{ visibleColumns, setVisibleColumns: handleColumnVisibilityChange }}
           rowCount={filteredRows.length}
           pagination={{
             ...pagination,
@@ -252,7 +347,8 @@ export const TableVis = React.memo(
           renderFooterCellValue={styleOptions?.showFooter ? renderFooterCellValue : undefined}
           toolbarVisibility={{
             showFullScreenSelector: false,
-            showStyleSelector: showStyleSelector ?? true,
+            showStyleSelector: disableActions ? false : showStyleSelector ?? true,
+            showColumnSelector: disableActions ? false : true,
           }}
           gridStyle={{ rowHover: 'highlight' }}
           leadingControlColumns={[]}

src/plugins/explore/public/components/visualizations/table/table_vis_config.test.ts

@@ -52,13 +52,15 @@ describe('table_vis_config', () => {
       expect(defaults).toEqual({
         pageSize: 10,
         globalAlignment: 'left',
+        hiddenColumns: [],
         showColumnFilter: false,
         showFooter: false,
         footerCalculations: [],
         cellTypes: [],
         thresholds: [],
         baseColor: '#000000',
         dataLinks: [],
+        visibleColumns: [],
       });
     });
   });

src/plugins/explore/public/components/visualizations/table/table_vis_config.ts

@@ -30,6 +30,8 @@ export interface TableChartStyleOptions {
   thresholds?: Threshold[];
   baseColor?: string;
   dataLinks?: DataLink[];
+  visibleColumns?: string[];
+  hiddenColumns?: string[];
 }
 
 export type TableChartStyle = Required<TableChartStyleOptions>;
@@ -44,6 +46,8 @@ export const defaultTableChartStyles: TableChartStyle = {
   thresholds: [],
   baseColor: '#000000',
   dataLinks: [],
+  visibleColumns: [],
+  hiddenColumns: [],
 };
 
 export const createTableConfig = (): VisualizationType<'table'> => ({

src/plugins/explore/public/components/visualizations/visualization_builder.ts

@@ -394,6 +394,7 @@ export class VisualizationBuilder {
       searchContext,
       ExpressionRenderer,
       onSelectTimeRange,
+      onStyleChange: this.updateStyles.bind(this),
     });
   }
 

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

@@ -26,6 +26,7 @@ interface Props {
   searchContext?: ExecutionContextSearch;
   ExpressionRenderer?: ExpressionsStart['ReactExpressionRenderer'];
   onSelectTimeRange?: (timeRange?: TimeRange) => void;
+  onStyleChange?: (updatedStyle: Partial<TableChartStyle>) => void;
 }
 
 const defaultStyleOptions: TableChartStyle = {
@@ -45,6 +46,7 @@ export const VisualizationRender = ({
   searchContext,
   ExpressionRenderer,
   onSelectTimeRange,
+  onStyleChange,
 }: Props) => {
   const visualizationData = useObservable(data$);
   const visConfig = useObservable(config$);
@@ -124,7 +126,13 @@ export const VisualizationRender = ({
 
   if (visConfig?.type === 'table') {
     return (
-      <TableVis styleOptions={visConfig.styles as TableChartStyle} rows={rows} columns={columns} />
+      <TableVis
+        styleOptions={visConfig.styles as TableChartStyle}
+        rows={rows}
+        columns={columns}
+        onStyleChange={onStyleChange}
+        disableActions={false}
+      />
     );
   }
 
@@ -139,6 +147,7 @@ export const VisualizationRender = ({
         styleOptions={defaultStyleOptions}
         pageSizeOptions={PAGE_SIZE_OPTIONS}
         showStyleSelector={false}
+        disableActions={false}
       />
     );
   }

src/plugins/explore/public/embeddable/explore_embeddable_component.tsx

@@ -112,6 +112,7 @@ export const ExploreEmbeddableComponent = ({ searchProps }: ExploreEmbeddablePro
           columns={searchProps.tableData?.columns ?? []}
           rows={searchProps.tableData?.rows ?? []}
           styleOptions={searchProps.styleOptions as TableChartStyle}
+          disableActions={true}
         />
       );
     }