Do not reset `table.columns` when some column is deleted (#45509)

* Do not reset `table.columns` when some column is deleted

* Do not reset `table.columns` when some column is deleted

* Fix

* Fix

* Make API calls more obvious

e2e/test/scenarios/visualizations-tabular/visualizations-tabular-reproductions.cy.spec.js

@@ -27,6 +27,7 @@ import {
   summarize,
   visualize,
   tableInteractive,
+  createNativeQuestion,
 } from "e2e/support/helpers";
 
 const { ORDERS, ORDERS_ID, PEOPLE, PEOPLE_ID, PRODUCTS, PRODUCTS_ID } =
@@ -954,6 +955,66 @@ describe.skip("issue 25415", () => {
   });
 });
 
+describe("issue 7884", () => {
+  const oldSourceQuestionDetails = {
+    native: {
+      query: "SELECT 1 AS C1, 2 AS C2, 3 AS C3",
+    },
+  };
+
+  const newSourceQuestionDetails = {
+    native: {
+      query: "SELECT 1 AS C1, 3 AS C3",
+    },
+  };
+
+  const getNestedQuestionDetails = sourceQuestionId => ({
+    query: {
+      "source-table": `card__${sourceQuestionId}`,
+    },
+    display: "table",
+    visualization_settings: {
+      "table.columns": [
+        { name: "C3", enabled: true },
+        { name: "C1", enabled: true },
+        { name: "C2", enabled: true },
+      ],
+    },
+  });
+
+  beforeEach(() => {
+    restore();
+    cy.signInAsNormalUser();
+  });
+
+  it("should not reset the column order after one of the columns is removed from data source (metabase#7884)", () => {
+    createNativeQuestion(oldSourceQuestionDetails).then(
+      ({ body: sourceQuestion }) =>
+        createQuestion(getNestedQuestionDetails(sourceQuestion.id)).then(
+          ({ body: nestedQuestion }) => {
+            cy.request("PUT", `/api/card/${sourceQuestion.id}`, {
+              ...sourceQuestion,
+              dataset_query: {
+                ...sourceQuestion.dataset_query,
+                native: newSourceQuestionDetails.native,
+              },
+            });
+            visitQuestion(nestedQuestion.id);
+          },
+        ),
+    );
+
+    cy.log("verify column order in the table");
+    cy.findAllByTestId("header-cell").eq(0).should("contain.text", "C3");
+    cy.findAllByTestId("header-cell").eq(1).should("contain.text", "C1");
+
+    cy.log("verify column order in viz settings");
+    cy.findByTestId("viz-settings-button").click();
+    getDraggableElements().eq(0).should("contain.text", "C3");
+    getDraggableElements().eq(1).should("contain.text", "C1");
+  });
+});
+
 describe("issue 45481", () => {
   beforeEach(() => {
     restore();

frontend/src/metabase/visualizations/lib/settings/column.js

@@ -532,38 +532,23 @@ export const buildTableColumnSettings = ({
     getHidden: (series, vizSettings) => vizSettings["table.pivot"],
     getValue: ([{ data }], vizSettings) => {
       const { cols } = data;
-
-      function isValid(columnSettings) {
-        const columnIndexes = findColumnIndexesForColumnSettings(
-          cols,
-          columnSettings.filter(({ enabled }) => enabled),
-        );
-        return columnIndexes.every(columnIndex => columnIndex >= 0);
-      }
-
-      function getValue(columnSettings) {
-        const settingIndexes = findColumnSettingIndexesForColumns(
-          cols,
-          columnSettings,
-        );
-
-        return [
-          ...columnSettings,
-          ...cols
-            .filter((_, columnIndex) => settingIndexes[columnIndex] < 0)
-            .map(column => ({
-              name: column.name,
-              enabled: getIsColumnVisible(column),
-            })),
-        ];
-      }
-
-      const columnSettings = vizSettings["table.columns"];
-      if (!columnSettings || !isValid(columnSettings)) {
-        return getValue([]);
-      } else {
-        return getValue(columnSettings);
-      }
+      const settings = vizSettings["table.columns"] ?? [];
+      const columnIndexes = findColumnIndexesForColumnSettings(cols, settings);
+      const settingIndexes = findColumnSettingIndexesForColumns(cols, settings);
+
+      return [
+        // retain settings with matching columns only
+        ...settings.filter(
+          (_, settingIndex) => columnIndexes[settingIndex] >= 0,
+        ),
+        // add columns that do not have matching settings to the end
+        ...cols
+          .filter((_, columnIndex) => settingIndexes[columnIndex] < 0)
+          .map(column => ({
+            name: column.name,
+            enabled: getIsColumnVisible(column),
+          })),
+      ];
     },
     getProps: (series, settings) => {
       const [