Datatable Embeddable Supports Ephemeral Sort

x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx

@@ -215,20 +215,16 @@ export const createGridColumns = (
         showHide: false,
         showMoveLeft: false,
         showMoveRight: false,
-        showSortAsc: isReadOnly
-          ? false
-          : {
-              label: i18n.translate('xpack.lens.table.sort.ascLabel', {
-                defaultMessage: 'Sort ascending',
-              }),
-            },
-        showSortDesc: isReadOnly
-          ? false
-          : {
-              label: i18n.translate('xpack.lens.table.sort.descLabel', {
-                defaultMessage: 'Sort descending',
-              }),
-            },
+        showSortAsc: {
+          label: i18n.translate('xpack.lens.table.sort.ascLabel', {
+            defaultMessage: 'Sort ascending',
+          }),
+        },
+        showSortDesc: {
+          label: i18n.translate('xpack.lens.table.sort.descLabel', {
+            defaultMessage: 'Sort descending',
+          }),
+        },
         additional: additionalActions,
       },
     };

x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx

@@ -103,9 +103,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
 
   const onEditAction = useCallback(
     (data: LensSortAction['data'] | LensResizeAction['data'] | LensToggleAction['data']) => {
-      if (renderMode === 'edit') {
-        dispatchEvent({ name: 'edit', data });
-      }
+      dispatchEvent({ name: 'edit', data });
     },
     [dispatchEvent, renderMode]
   );

x-pack/plugins/lens/public/embeddable/embeddable.tsx

@@ -47,6 +47,7 @@ import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
 import {
   isLensBrushEvent,
   isLensFilterEvent,
+  isLensEditEvent,
   isLensTableRowContextMenuClickEvent,
   LensBrushEvent,
   LensFilterEvent,
@@ -432,7 +433,7 @@ export class Embeddable
     return output;
   }
 
-  handleEvent = (event: ExpressionRendererEvent) => {
+  handleEvent = async (event: ExpressionRendererEvent) => {
     if (!this.deps.getTrigger || this.input.disableTriggers) {
       return;
     }
@@ -468,6 +469,31 @@ export class Embeddable
         this.input.onTableRowClick(event.data as unknown as LensTableRowContextMenuEvent['data']);
       }
     }
+
+    // TODO - inject this from datatable_visualization/visualization
+    const onEditAction = (state, event) => {
+      switch (event.data.action) {
+        case 'sort':
+          return {
+            ...state,
+            sorting: {
+              columnId: event.data.columnId,
+              direction: event.data.direction,
+            },
+          };
+        };
+    };
+
+    if (isLensEditEvent(event)) {
+      if (this.savedVis) {
+        const newSavedVis = JSON.parse(JSON.stringify(this.savedVis));
+        newSavedVis.state.visualization = onEditAction(this.savedVis.state.visualization, event);
+        const { ast, errors } = await this.deps.documentToExpression(newSavedVis);
+        this.errors = errors;
+        this.expression = ast ? toExpression(ast) : null;
+        this.reload();
+      }
+    }
   };
 
   async reload() {