n8n-editor-ui 1.115.1 → 1.116.0

package/dist/assets/{DataStoreDetailsView-DN1DvV53.js → DataTableDetailsView-DZF8g3WP.js}

@@ -1,23 +1,23 @@
-import { d as defineComponent, aH as useTemplateRef, hj as useDataStoreStore, b as useRouter, a as useToast, r as ref, x as computed, c as useI18n, a8 as watch, h as createElementBlock, g as openBlock, n as normalizeClass, i as createVNode, j as createBaseVNode, k as unref, w as withCtx, t as toDisplayString, aI as InlineRename, e as createBlock, f as createCommentVNode, h4 as PROJECT_DATA_STORES, Z as nextTick, fO as telemetry, _ as _export_sfc, eX as mergeModels, cB as toRefs, eY as useModel, o as onMounted, bo as getCurrentInstance, ho as markRaw, bS as onUnmounted, hp as mergeDefaults, fF as toRaw, hq as render, cA as isRef, hr as isReactive, gI as isProxy, hs as DATA_TYPE_ICON_MAP, ht as ResponseError, b4 as withDirectives, N as N8nIcon, b5 as vShow, ab as _sfc_main$a, B as withModifiers, aO as N8nActionDropdown, hu as LOOSE_DATE_REGEX, dL as isFocusableEl, ap as normalizeStyle, gi as ElDatePicker, P as useDebounce, y as N8nPopoverReka, eK as N8nInputLabel, dE as N8nInput, bH as withKeys, hv as MAX_COLUMN_NAME_LENGTH, p as N8nText, l as createTextVNode, aa as N8nTooltip, eN as N8nSelect, F as Fragment, A as renderList, eO as _sfc_main$b, q as N8nButton, hw as COLUMN_NAME_REGEX, hx as ADD_ROW_ROW_ID, hy as NULL_VALUE, hz as EMPTY_VALUE, bO as DateTime, hA as NUMBER_WITH_SPACES_REGEX, hB as NUMBER_THOUSAND_SEPARATOR, hC as NUMBER_DECIMAL_SEPARATOR, cI as useClipboard, b$ as onClickOutside, hD as DEFAULT_ID_COLUMN_NAME, hE as reorderItem, hF as DEFAULT_COLUMN_WIDTH, fB as orderBy, hG as DATA_STORE_ID_COLUMN_WIDTH, am as useMessage, an as MODAL_CONFIRM, al as useTelemetry, hH as DATA_STORE_HEADER_HEIGHT, hI as DATA_STORE_ROW_HEIGHT, gt as ElPagination, ay as useDocumentTitle, hJ as MIN_LOADING_TIME, eo as N8nLoading, em as _sfc_main$c, hK as DATA_STORE_VIEW } from "./index-MTM6BbvW.js";
-import { _ as _sfc_main$9 } from "./DataStoreActions.vue_vue_type_script_setup_true_lang-_Q8OXvzI.js";
-import { B as Breadcrumbs, P as ProjectBreadcrumb } from "./ProjectBreadcrumb-HI65z9tX.js";
-import { S as SelectedItemsInfo } from "./SelectedItemsInfo-Dd3HKZ6z.js";
+import { d as defineComponent, aH as useTemplateRef, hr as useDataTableStore, b as useRouter, a as useToast, r as ref, x as computed, c as useI18n, a8 as watch, h as createElementBlock, g as openBlock, n as normalizeClass, i as createVNode, j as createBaseVNode, k as unref, w as withCtx, t as toDisplayString, aI as InlineRename, e as createBlock, f as createCommentVNode, h8 as PROJECT_DATA_TABLES, Z as nextTick, f8 as telemetry, _ as _export_sfc, eg as mergeModels, bR as toRefs, eh as useModel, o as onMounted, eD as getCurrentInstance, hw as markRaw, bh as onUnmounted, hx as mergeDefaults, e$ as toRaw, hy as render, bQ as isRef, hz as isReactive, gL as isProxy, bZ as useClipboard, bt as onClickOutside, hA as DATA_TYPE_ICON_MAP, b4 as withDirectives, N as N8nIcon, b5 as vShow, ab as _sfc_main$a, B as withModifiers, aO as N8nActionDropdown, hB as LOOSE_DATE_REGEX, c_ as isFocusableEl, ap as normalizeStyle, gl as ElDatePicker, P as useDebounce, y as N8nPopoverReka, e3 as N8nInputLabel, cT as N8nInput, bX as withKeys, hC as MAX_COLUMN_NAME_LENGTH, p as N8nText, l as createTextVNode, aa as N8nTooltip, e6 as N8nSelect, F as Fragment, A as renderList, e7 as _sfc_main$b, q as N8nButton, hD as COLUMN_NAME_REGEX, hE as ADD_ROW_ROW_ID, hF as NULL_VALUE, hG as EMPTY_VALUE, bd as DateTime, hH as NUMBER_WITH_SPACES_REGEX, hI as NUMBER_THOUSAND_SEPARATOR, hJ as NUMBER_DECIMAL_SEPARATOR, hK as DEFAULT_ID_COLUMN_NAME, hL as reorderItem, hM as DEFAULT_COLUMN_WIDTH, eX as orderBy, hN as DATA_TABLE_ID_COLUMN_WIDTH, am as useMessage, an as MODAL_CONFIRM, al as useTelemetry, hO as ResponseError, hP as DATA_TABLE_HEADER_HEIGHT, hQ as DATA_TABLE_ROW_HEIGHT, gw as ElPagination, ay as useDocumentTitle, hR as MIN_LOADING_TIME, dI as N8nLoading, dF as _sfc_main$c, hS as DATA_TABLE_VIEW } from "./index-CW8ZBeS3.js";
+import { _ as _sfc_main$9 } from "./DataTableActions.vue_vue_type_script_setup_true_lang-CPe6URyk.js";
+import { B as Breadcrumbs, P as ProjectBreadcrumb } from "./ProjectBreadcrumb-DzdWVcqt.js";
+import { S as SelectedItemsInfo } from "./SelectedItemsInfo-niTPahiE.js";
 const BREADCRUMBS_SEPARATOR = "/";
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "DataStoreBreadcrumbs",
+  __name: "DataTableBreadcrumbs",
   props: {
-    dataStore: {}
+    dataTable: {}
   },
   setup(__props) {
     const props = __props;
     const renameInput = useTemplateRef("renameInput");
-    const dataStoreStore = useDataStoreStore();
+    const dataTableStore = useDataTableStore();
     const i18n = useI18n();
     const router = useRouter();
     const toast = useToast();
-    const editableName = ref(props.dataStore.name);
+    const editableName = ref(props.dataTable.name);
     const project = computed(() => {
-      return props.dataStore.project ?? null;
+      return props.dataTable.project ?? null;
     });
     const breadcrumbs = computed(() => {
       if (!project.value) {
@@ -25,8 +25,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
       return [
         {
-          id: "datastores",
-          label: i18n.baseText("dataStore.dataStores"),
+          id: "datatables",
+          label: i18n.baseText("dataTable.dataTables"),
           href: `/projects/${project.value.id}/datatables`
         }
       ];
@@ -38,8 +38,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
     const onDelete = async () => {
       await router.push({
-        name: PROJECT_DATA_STORES,
-        params: { projectId: props.dataStore.projectId }
+        name: PROJECT_DATA_TABLES,
+        params: { projectId: props.dataTable.projectId }
       });
     };
     const onRename = async () => {
@@ -50,33 +50,34 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
     const onNameSubmit = async (name) => {
       try {
-        const updated = await dataStoreStore.updateDataStore(
-          props.dataStore.id,
+        const updated = await dataTableStore.updateDataTable(
+          props.dataTable.id,
           name,
-          props.dataStore.projectId
+          props.dataTable.projectId
         );
         if (!updated) {
           throw new Error(i18n.baseText("generic.unknownError"));
         }
         editableName.value = name;
         telemetry.track("User renamed data table", {
-          data_table_id: props.dataStore.id,
-          data_table_project_id: props.dataStore.projectId
+          data_table_id: props.dataTable.id,
+          data_table_project_id: props.dataTable.projectId
         });
       } catch (error) {
-        editableName.value = props.dataStore.name;
-        toast.showError(error, i18n.baseText("dataStore.rename.error"));
+        editableName.value = props.dataTable.name;
+        toast.showError(error, i18n.baseText("dataTable.rename.error"));
       }
     };
     watch(
-      () => props.dataStore.name,
+      () => props.dataTable.name,
       (newName) => {
         editableName.value = newName;
       }
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(_ctx.$style["data-store-breadcrumbs"])
+        class: normalizeClass(_ctx.$style["data-table-breadcrumbs"]),
+        "data-test-id": "data-table-breadcrumbs"
       }, [
         createVNode(unref(Breadcrumbs), {
           items: breadcrumbs.value,
@@ -102,8 +103,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                 _cache[0] || (_cache[0] = ($event) => editableName.value = $event),
                 onNameSubmit
               ],
-              "data-test-id": "datastore-header-name-input",
-              placeholder: unref(i18n).baseText("dataStore.add.input.name.label"),
+              "data-test-id": "data-table-header-name-input",
+              placeholder: unref(i18n).baseText("dataTable.add.input.name.label"),
               class: normalizeClass(_ctx.$style["breadcrumb-current"]),
               "max-length": 30,
               "read-only": false,
@@ -113,30 +114,30 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           _: 1
         }, 8, ["items"]),
         createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style["data-store-actions"])
+          class: normalizeClass(_ctx.$style["data-table-actions"])
         }, [
           createVNode(_sfc_main$9, {
-            "data-store": props.dataStore,
+            "data-table": props.dataTable,
             location: "breadcrumbs",
             onRename,
             onOnDeleted: onDelete
-          }, null, 8, ["data-store"])
+          }, null, 8, ["data-table"])
         ], 2)
       ], 2);
     };
   }
 });
-const separator = "_separator_1n6ua_133";
+const separator = "_separator_9bko0_133";
 const style0$2 = {
-  "data-store-breadcrumbs": "_data-store-breadcrumbs_1n6ua_123",
-  "data-store-actions": "_data-store-actions_1n6ua_128",
+  "data-table-breadcrumbs": "_data-table-breadcrumbs_9bko0_123",
+  "data-table-actions": "_data-table-actions_9bko0_128",
   separator,
-  "breadcrumb-current": "_breadcrumb-current_1n6ua_139"
+  "breadcrumb-current": "_breadcrumb-current_9bko0_139"
 };
 const cssModules$2 = {
   "$style": style0$2
 };
-const DataStoreBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$2]]);
+const DataTableBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$2]]);
 var LocalEventService = class {
   constructor() {
     this.allSyncListeners = /* @__PURE__ */ new Map();
@@ -48729,12 +48730,39 @@ const n8nTheme = themeQuartz.withPart(iconSetAlpine).withParams({
   rowVerticalPaddingScale: 0.8,
   sidePanelBorder: true,
   wrapperBorder: true,
-  headerColumnBorder: { color: "var(--color-foreground-base)" },
+  headerColumnBorder: { color: "var(--color--foreground)" },
   headerColumnBorderHeight: "100%",
-  checkboxUncheckedBackgroundColor: "var(--color-background-light-base)",
-  checkboxCheckedBackgroundColor: "var(--color-primary)"
+  checkboxUncheckedBackgroundColor: "var(--color--background--light-1)",
+  checkboxCheckedBackgroundColor: "var(--color--primary)"
 });
-const useDataStorePagination = (options = {}) => {
+let modulesRegistered = false;
+const registerAgGridModulesOnce = () => {
+  if (modulesRegistered) return;
+  ModuleRegistry.registerModules([
+    ValidationModule,
+    ClientSideRowModelModule,
+    TextEditorModule,
+    LargeTextEditorModule,
+    ColumnAutoSizeModule,
+    CheckboxEditorModule,
+    NumberEditorModule,
+    RowSelectionModule,
+    RenderApiModule,
+    DateEditorModule,
+    ClientSideRowModelApiModule,
+    UndoRedoEditModule,
+    CellStyleModule,
+    PinnedRowModule,
+    ScrollApiModule,
+    ColumnApiModule,
+    TextFilterModule,
+    NumberFilterModule,
+    DateFilterModule,
+    EventApiModule
+  ]);
+  modulesRegistered = true;
+};
+const useDataTablePagination = (options = {}) => {
   const currentPage = ref(options.initialPage ?? 1);
   const pageSize = ref(options.initialPageSize ?? 20);
   const totalItems = ref(0);
@@ -48769,7 +48797,181 @@ const useDataStorePagination = (options = {}) => {
     ensureItemOnPage
   };
 };
-const DATA_STORE_COLUMN_TYPES = ["string", "number", "boolean", "date"];
+const useAgGrid = ({
+  gridContainerRef,
+  defaultSortColumn,
+  pinnedBottomRowId,
+  defaultColDef
+}) => {
+  const gridApi = ref(null);
+  const isTextEditorOpen = ref(false);
+  const currentSortBy = ref(defaultSortColumn);
+  const currentSortOrder = ref("asc");
+  const initializedGridApi = computed(() => {
+    if (!gridApi.value) {
+      throw new Error("Grid API is not initialized");
+    }
+    return gridApi.value;
+  });
+  const onClipboardPaste = (data) => {
+    if (!gridApi.value) return;
+    const focusedCell = initializedGridApi.value.getFocusedCell();
+    const isEditing2 = initializedGridApi.value.getEditingCells().length > 0;
+    if (!focusedCell || isEditing2) return;
+    const row = initializedGridApi.value.getDisplayedRowAtIndex(focusedCell.rowIndex);
+    if (!row) return;
+    const colDef = focusedCell.column.getColDef();
+    if (colDef.cellDataType === "text") {
+      row.setDataValue(focusedCell.column.getColId(), data);
+    } else if (colDef.cellDataType === "number") {
+      if (!Number.isNaN(Number(data))) {
+        row.setDataValue(focusedCell.column.getColId(), Number(data));
+      }
+    } else if (colDef.cellDataType === "date") {
+      if (!Number.isNaN(Date.parse(data))) {
+        row.setDataValue(focusedCell.column.getColId(), new Date(data));
+      }
+    } else if (colDef.cellDataType === "boolean") {
+      if (data.toLowerCase() === "true") {
+        row.setDataValue(focusedCell.column.getColId(), true);
+      } else if (data.toLowerCase() === "false") {
+        row.setDataValue(focusedCell.column.getColId(), false);
+      }
+    }
+  };
+  const { copy: copyToClipboard } = useClipboard({
+    onPaste: onClipboardPaste
+  });
+  const lastFocusedCell = ref(null);
+  const onGridReady = (params) => {
+    gridApi.value = params.api;
+    if (gridContainerRef.value) {
+      params.api.setGridOption("popupParent", gridContainerRef.value);
+    }
+    if (defaultColDef) {
+      params.api.setGridOption("defaultColDef", defaultColDef);
+    }
+  };
+  const setGridData = ({
+    colDefs,
+    rowData
+  }) => {
+    if (colDefs) {
+      initializedGridApi.value.setGridOption("columnDefs", colDefs);
+    }
+    if (rowData) {
+      initializedGridApi.value.setGridOption("rowData", rowData);
+    }
+    {
+      initializedGridApi.value.setGridOption("pinnedBottomRowData", [{ id: pinnedBottomRowId }]);
+    }
+  };
+  const focusFirstEditableCell = (rowId, excludeColumnId) => {
+    const rowNode = initializedGridApi.value.getRowNode(String(rowId));
+    if (rowNode?.rowIndex === null || rowNode?.rowIndex === void 0) return;
+    const rowIndex = rowNode.rowIndex;
+    const displayed = initializedGridApi.value.getAllDisplayedColumns();
+    const firstEditable = displayed.find((col) => {
+      const def = col.getColDef();
+      if (!def) return false;
+      if (excludeColumnId && def.colId === excludeColumnId) return false;
+      return !!def.editable;
+    });
+    if (!firstEditable) return;
+    const columnId = firstEditable.getColId();
+    requestAnimationFrame(() => {
+      initializedGridApi.value.ensureIndexVisible(rowIndex);
+      requestAnimationFrame(() => {
+        initializedGridApi.value.setFocusedCell(rowIndex, columnId);
+        initializedGridApi.value.startEditingCell({
+          rowIndex,
+          colKey: columnId
+        });
+      });
+    });
+  };
+  const onCellEditingStarted = (params) => {
+    if (params.column.getColDef().cellDataType === "text") {
+      isTextEditorOpen.value = true;
+    } else {
+      isTextEditorOpen.value = false;
+    }
+  };
+  const onCellEditingStopped = (params) => {
+    if (params.column.getColDef().cellDataType === "text") {
+      isTextEditorOpen.value = false;
+    }
+  };
+  const handleCopyFocusedCell = async (params) => {
+    const focused = params.api.getFocusedCell();
+    if (!focused) {
+      return;
+    }
+    const row = params.api.getDisplayedRowAtIndex(focused.rowIndex);
+    const colDef = focused.column.getColDef();
+    if (row?.data && colDef.field) {
+      const rawValue = row.data[colDef.field];
+      const text = rawValue === null || rawValue === void 0 ? "" : String(rawValue);
+      await copyToClipboard(text);
+    }
+  };
+  const onCellClicked = (params) => {
+    const clickedCellColumn = params.column.getColId();
+    const clickedCellRow = params.rowIndex;
+    if (clickedCellRow === null || params.api.isEditing({
+      rowIndex: clickedCellRow,
+      column: params.column,
+      rowPinned: null
+    }))
+      return;
+    const wasAlreadyFocused = lastFocusedCell.value && lastFocusedCell.value.rowIndex === clickedCellRow && lastFocusedCell.value.colId === clickedCellColumn;
+    if (wasAlreadyFocused && params.column.getColDef()?.editable) {
+      params.api.startEditingCell({
+        rowIndex: clickedCellRow,
+        colKey: clickedCellColumn
+      });
+    }
+    lastFocusedCell.value = {
+      rowIndex: clickedCellRow,
+      colId: clickedCellColumn
+    };
+  };
+  const resetLastFocusedCell = () => {
+    lastFocusedCell.value = null;
+  };
+  const onSortChanged2 = (event, colDefs) => {
+    const sortedColumn = event.columns?.filter((col) => col.getSort() !== null).pop() ?? null;
+    if (sortedColumn) {
+      const colId = sortedColumn.getColId();
+      const columnDef = colDefs.find((col) => col.colId === colId);
+      currentSortBy.value = columnDef?.field ?? colId;
+      currentSortOrder.value = sortedColumn.getSort() ?? "asc";
+    } else {
+      currentSortBy.value = defaultSortColumn;
+      currentSortOrder.value = "asc";
+    }
+  };
+  onClickOutside(gridContainerRef, () => {
+    resetLastFocusedCell();
+    initializedGridApi.value.clearFocusedCell();
+  });
+  return {
+    gridApi: initializedGridApi,
+    onGridReady,
+    setGridData,
+    focusFirstEditableCell,
+    onCellEditingStarted,
+    onCellEditingStopped,
+    handleCopyFocusedCell,
+    onCellClicked,
+    resetLastFocusedCell,
+    currentSortBy,
+    currentSortOrder,
+    onSortChanged: onSortChanged2,
+    isTextEditorOpen
+  };
+};
+const DATA_TABLE_COLUMN_TYPES = ["string", "number", "boolean", "date"];
 const AG_GRID_CELL_TYPES = [
   "text",
   "number",
@@ -48778,22 +48980,21 @@ const AG_GRID_CELL_TYPES = [
   "dateString",
   "object"
 ];
-const isDataStoreValue = (value) => {
+const isDataTableValue = (value) => {
   return value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value instanceof Date;
 };
 const isAGGridCellType = (value) => {
   return typeof value === "string" && AG_GRID_CELL_TYPES.includes(value);
 };
-const useDataStoreTypes = () => {
+const useDataTableTypes = () => {
   const getIconForType = (type) => DATA_TYPE_ICON_MAP[type];
-  const i18n = useI18n();
   const mapToAGCellType = (colType) => {
     if (colType === "string") {
       return "text";
     }
     return colType;
   };
-  const mapToDataStoreColumnType = (colType) => {
+  const mapToDataTableColumnType = (colType) => {
     if (!isAGGridCellType(colType)) {
       return "string";
     }
@@ -48802,52 +49003,16 @@ const useDataStoreTypes = () => {
     }
     return colType;
   };
-  const getDefaultValueForType = (colType) => {
-    switch (colType) {
-      case "string":
-        return "";
-      case "number":
-        return 0;
-      case "boolean":
-        return false;
-      case "date":
-        return null;
-      default:
-        return null;
-    }
-  };
-  const getAddColumnError = (error) => {
-    const DEFAULT_HTTP_STATUS = 500;
-    const DEFAULT_MESSAGE = i18n.baseText("generic.unknownError");
-    if (error instanceof ResponseError) {
-      return {
-        httpStatus: error.httpStatusCode ?? 500,
-        message: error.message
-      };
-    }
-    if (error instanceof Error) {
-      return {
-        httpStatus: DEFAULT_HTTP_STATUS,
-        message: error.message
-      };
-    }
-    return {
-      httpStatus: DEFAULT_HTTP_STATUS,
-      message: DEFAULT_MESSAGE
-    };
-  };
   return {
     getIconForType,
     mapToAGCellType,
-    mapToDataStoreColumnType,
-    getDefaultValueForType,
-    getAddColumnError
+    mapToDataTableColumnType
   };
 };
-const _hoisted_1$3 = { class: "data-store-column-header-icon-wrapper" };
+const _hoisted_1$3 = { class: "data-table-column-header-icon-wrapper" };
 const _hoisted_2$2 = {
   class: "ag-header-cell-text",
-  "data-test-id": "data-store-column-header-text"
+  "data-test-id": "data-table-column-header-text"
 };
 const _hoisted_3$1 = {
   key: 1,
@@ -48860,7 +49025,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const { getIconForType, mapToDataStoreColumnType } = useDataStoreTypes();
+    const { getIconForType, mapToDataTableColumnType } = useDataTableTypes();
     const i18n = useI18n();
     const isHovered = ref(false);
     const isDropdownOpen = ref(false);
@@ -48911,14 +49076,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       if (!isAGGridCellType(cellDataType)) {
         return null;
       }
-      return getIconForType(mapToDataStoreColumnType(cellDataType));
+      return getIconForType(mapToDataTableColumnType(cellDataType));
     });
     const columnActionItems = [
       {
         id: "delete",
-        label: i18n.baseText("dataStore.deleteColumn.confirm.title"),
+        label: i18n.baseText("dataTable.deleteColumn.confirm.title"),
         icon: "trash-2",
-        customClass: "data-store-column-header-action-item"
+        customClass: "data-table-column-header-action-item"
       }
     ];
     const isSortable = computed(() => {
@@ -48961,8 +49126,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["ag-header-cell-label", "data-store-column-header-wrapper", { sortable: isSortable.value }]),
-        "data-test-id": "data-store-column-header",
+        class: normalizeClass(["ag-header-cell-label", "data-table-column-header-wrapper", { sortable: isSortable.value }]),
+        "data-test-id": "data-table-column-header",
         onMouseenter: onMouseEnter,
         onMouseleave: onMouseLeave,
         onClick: onHeaderClick
@@ -48986,6 +49151,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ])) : createCommentVNode("", true)
         ]),
         withDirectives(createVNode(unref(_sfc_main$a), {
+          "data-test-id": "data-table-column-header-filter-button",
           icon: "funnel",
           type: "tertiary",
           text: "",
@@ -48995,7 +49161,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           [vShow, isFilterButtonVisible.value]
         ]),
         withDirectives(createVNode(unref(N8nActionDropdown), {
-          "data-test-id": "data-store-column-header-actions",
+          "data-test-id": "data-table-column-header-actions",
           items: columnActionItems,
           placement: "bottom-start",
           "activator-icon": "ellipsis",
@@ -49158,10 +49324,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "wrapperRef",
         ref: wrapperRef,
-        class: "datastore-datepicker-wrapper"
+        class: "data-table-datepicker-wrapper"
       }, [
         createVNode(unref(ElDatePicker), {
-          id: "datastore-datepicker",
+          id: "data-table-datepicker",
           ref_key: "pickerRef",
           ref: pickerRef,
           modelValue: dateValueComputed.value,
@@ -49171,7 +49337,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           clearable: true,
           editable: true,
           teleported: false,
-          "popper-class": "ag-custom-component-popup datastore-datepicker-popper",
+          "popper-class": "ag-custom-component-popup data-table-datepicker-popper",
           placeholder: "YYYY-MM-DD (HH:mm:ss)",
           size: "small",
           onChange: unref(onDateChange),
@@ -49224,7 +49390,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "wrapperRef",
         ref: wrapperRef,
-        class: "datastore-date-filter-wrapper"
+        class: "data-table-date-filter-wrapper"
       }, [
         createVNode(unref(ElDatePicker), {
           ref_key: "pickerRef",
@@ -49236,7 +49402,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           editable: true,
           teleported: true,
           placement: "bottom",
-          "popper-class": "ag-custom-component-popup datastore-date-filter-popper",
+          "popper-class": "ag-custom-component-popup data-table-date-filter-popper",
           placeholder: "YYYY-MM-DD (HH:mm:ss)",
           size: "small",
           onChange: unref(onDateChange),
@@ -49268,12 +49434,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const i18n = useI18n();
-    const { getIconForType } = useDataStoreTypes();
+    const { getIconForType } = useDataTableTypes();
     const { debounce } = useDebounce();
     const nameInputRef = ref(null);
     const columnName = ref("");
     const columnType = ref("string");
-    const columnTypes = [...DATA_STORE_COLUMN_TYPES];
+    const columnTypes = [...DATA_TABLE_COLUMN_TYPES];
     const error = ref(null);
     const popoverOpen = ref(false);
     const isSelectOpen = ref(false);
@@ -49294,13 +49460,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         type: columnType.value
       });
       if (!response.success) {
-        let errorMessage = i18n.baseText("dataStore.addColumn.error");
+        let errorMessage = i18n.baseText("dataTable.addColumn.error");
         let errorDescription = response.errorMessage;
         if (response.httpStatus === 409) {
-          errorMessage = i18n.baseText("dataStore.addColumn.alreadyExistsError", {
+          errorMessage = i18n.baseText("dataTable.addColumn.alreadyExistsError", {
             interpolate: { name: columnName.value }
           });
-          errorDescription = response.errorMessage?.includes("system") ? i18n.baseText("dataStore.addColumn.systemColumnDescription") : response.errorMessage?.includes("testing") ? i18n.baseText("dataStore.addColumn.testingColumnDescription") : i18n.baseText("dataStore.addColumn.alreadyExistsDescription");
+          errorDescription = response.errorMessage?.includes("system") ? i18n.baseText("dataTable.addColumn.systemColumnDescription") : response.errorMessage?.includes("testing") ? i18n.baseText("dataTable.addColumn.testingColumnDescription") : i18n.baseText("dataTable.addColumn.alreadyExistsDescription");
         }
         error.value = {
           message: errorMessage,
@@ -49329,8 +49495,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
       if (columnName.value && !COLUMN_NAME_REGEX.test(columnName.value)) {
         error.value = {
-          message: i18n.baseText("dataStore.addColumn.invalidName.error"),
-          description: i18n.baseText("dataStore.addColumn.invalidName.description")
+          message: i18n.baseText("dataTable.addColumn.invalidName.error"),
+          description: i18n.baseText("dataTable.addColumn.invalidName.description")
         };
       }
     };
@@ -49338,7 +49504,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(N8nTooltip), {
         disabled: popoverOpen.value,
-        content: unref(i18n).baseText("dataStore.addColumn.label")
+        content: unref(i18n).baseText("dataTable.addColumn.label")
       }, {
         default: withCtx(() => [
           createBaseVNode("div", _hoisted_1$2, [
@@ -49352,16 +49518,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               trigger: withCtx(() => [
                 props.useTextTrigger ? (openBlock(), createBlock(unref(N8nButton), {
                   key: 0,
-                  "data-test-id": "data-store-add-column-trigger-button",
+                  "data-test-id": "data-table-add-column-trigger-button",
                   type: "tertiary"
                 }, {
                   default: withCtx(() => [
-                    createTextVNode(toDisplayString(unref(i18n).baseText("dataStore.addColumn.label")), 1)
+                    createTextVNode(toDisplayString(unref(i18n).baseText("dataTable.addColumn.label")), 1)
                   ]),
                   _: 1
                 })) : (openBlock(), createBlock(unref(_sfc_main$a), {
                   key: 1,
-                  "data-test-id": "data-store-add-column-trigger-button",
+                  "data-test-id": "data-table-add-column-trigger-button",
                   text: "",
                   icon: "plus",
                   type: "tertiary"
@@ -49371,7 +49537,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 createBaseVNode("div", _hoisted_2$1, [
                   createBaseVNode("div", _hoisted_3, [
                     createVNode(unref(N8nInputLabel), {
-                      label: unref(i18n).baseText("dataStore.addColumn.nameInput.label"),
+                      label: unref(i18n).baseText("dataTable.addColumn.nameInput.label"),
                       required: true,
                       class: normalizeClass(error.value ? "" : "mb-s")
                     }, {
@@ -49381,8 +49547,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                           ref: nameInputRef,
                           modelValue: columnName.value,
                           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => columnName.value = $event),
-                          placeholder: unref(i18n).baseText("dataStore.addColumn.nameInput.placeholder"),
+                          placeholder: unref(i18n).baseText("dataTable.addColumn.nameInput.placeholder"),
                           maxlength: unref(MAX_COLUMN_NAME_LENGTH),
+                          "data-test-id": "add-column-name-input",
                           onKeyup: withKeys(onAddButtonClicked, ["enter"]),
                           onInput: unref(onInput)
                         }, null, 8, ["modelValue", "placeholder", "maxlength", "onInput"]),
@@ -49419,7 +49586,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                       _: 1
                     }, 8, ["label", "class"]),
                     createVNode(unref(N8nInputLabel), {
-                      label: unref(i18n).baseText("dataStore.addColumn.typeInput.label"),
+                      label: unref(i18n).baseText("dataTable.addColumn.typeInput.label"),
                       required: true,
                       class: "type-label"
                     }, {
@@ -49460,7 +49627,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                       _: 1
                     }, 8, ["label"]),
                     createVNode(unref(N8nButton), {
-                      "data-test-id": "data-store-add-column-submit-button",
+                      "data-test-id": "data-table-add-column-submit-button",
                       type: "primary",
                       class: "mt-m",
                       size: "large",
@@ -49468,7 +49635,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                       onClick: onAddButtonClicked
                     }, {
                       default: withCtx(() => [
-                        createTextVNode(toDisplayString(unref(i18n).baseText("dataStore.addColumn.label")), 1)
+                        createTextVNode(toDisplayString(unref(i18n).baseText("dataTable.addColumn.label")), 1)
                       ]),
                       _: 1
                     }, 8, ["disabled"])
@@ -49494,7 +49661,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const props = __props;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(N8nTooltip), {
-        content: unref(i18n).baseText("dataStore.addRow.label")
+        content: unref(i18n).baseText("dataTable.addRow.label")
       }, {
         default: withCtx(() => [
           createVNode(unref(_sfc_main$a), {
@@ -49552,10 +49719,16 @@ const createCellRendererSelector = (col) => (params) => {
     rowValue = null;
   }
   if (rowValue === null) {
-    return { component: _sfc_main$2, params: { value: NULL_VALUE } };
+    return {
+      component: _sfc_main$2,
+      params: { value: NULL_VALUE }
+    };
   }
   if (rowValue === "") {
-    return { component: _sfc_main$2, params: { value: EMPTY_VALUE } };
+    return {
+      component: _sfc_main$2,
+      params: { value: EMPTY_VALUE }
+    };
   }
   return void 0;
 };
@@ -49565,7 +49738,7 @@ const createStringValueSetter = (col, isTextEditorOpen) => (params) => {
     originalValue = null;
   }
   let newValue = params.newValue;
-  if (!isDataStoreValue(newValue)) {
+  if (!isDataTableValue(newValue)) {
     return false;
   }
   if (originalValue === null && newValue === "") {
@@ -49598,61 +49771,61 @@ const numberValueFormatter = (params) => {
 };
 const createNullFilterOption = (i18n) => ({
   displayKey: "null",
-  displayName: i18n.baseText("dataStore.filters.isNull"),
+  displayName: i18n.baseText("dataTable.filters.isNull"),
   predicate: () => true,
   numberOfInputs: 0
 });
 const createNotNullFilterOption = (i18n) => ({
   displayKey: "notNull",
-  displayName: i18n.baseText("dataStore.filters.isNotNull"),
+  displayName: i18n.baseText("dataTable.filters.isNotNull"),
   predicate: () => true,
   numberOfInputs: 0
 });
 const createIsEmptyFilterOption = (i18n) => ({
   displayKey: "isEmpty",
-  displayName: i18n.baseText("dataStore.filters.isEmpty"),
+  displayName: i18n.baseText("dataTable.filters.isEmpty"),
   predicate: () => true,
   numberOfInputs: 0
 });
 const createIsNotEmptyFilterOption = (i18n) => ({
   displayKey: "notEmpty",
-  displayName: i18n.baseText("dataStore.filters.isNotEmpty"),
+  displayName: i18n.baseText("dataTable.filters.isNotEmpty"),
   predicate: () => true,
   numberOfInputs: 0
 });
 const createBetweenFilterOption = (i18n) => ({
   displayKey: "between",
-  displayName: i18n.baseText("dataStore.filters.between"),
+  displayName: i18n.baseText("dataTable.filters.between"),
   predicate: () => true,
   numberOfInputs: 2
 });
 const createGreaterThanFilterOption = (i18n) => ({
   displayKey: "greaterThan",
-  displayName: i18n.baseText("dataStore.filters.greaterThan"),
+  displayName: i18n.baseText("dataTable.filters.greaterThan"),
   predicate: () => true,
   numberOfInputs: 1
 });
 const createGreaterThanOrEqualFilterOption = (i18n) => ({
   displayKey: "greaterThanOrEqual",
-  displayName: i18n.baseText("dataStore.filters.greaterThanOrEqual"),
+  displayName: i18n.baseText("dataTable.filters.greaterThanOrEqual"),
   predicate: () => true,
   numberOfInputs: 1
 });
 const createLessThanFilterOption = (i18n) => ({
   displayKey: "lessThan",
-  displayName: i18n.baseText("dataStore.filters.lessThan"),
+  displayName: i18n.baseText("dataTable.filters.lessThan"),
   predicate: () => true,
   numberOfInputs: 1
 });
 const createLessThanOrEqualFilterOption = (i18n) => ({
   displayKey: "lessThanOrEqual",
-  displayName: i18n.baseText("dataStore.filters.lessThanOrEqual"),
+  displayName: i18n.baseText("dataTable.filters.lessThanOrEqual"),
   predicate: () => true,
   numberOfInputs: 1
 });
 const createInRangeFilterOption = (i18n) => ({
   displayKey: "inRange",
-  displayName: i18n.baseText("dataStore.filters.between"),
+  displayName: i18n.baseText("dataTable.filters.between"),
   predicate: () => true,
   numberOfInputs: 2
 });
@@ -49691,93 +49864,92 @@ const getBooleanColumnFilterOptions = (i18n) => [
   "empty",
   {
     displayKey: "true",
-    displayName: i18n.baseText("dataStore.filters.true"),
+    displayName: i18n.baseText("dataTable.filters.true"),
     numberOfInputs: 0,
     predicate: () => true
   },
   {
     displayKey: "false",
-    displayName: i18n.baseText("dataStore.filters.false"),
+    displayName: i18n.baseText("dataTable.filters.false"),
     numberOfInputs: 0,
     predicate: () => true
   },
   createNullFilterOption(i18n),
   createNotNullFilterOption(i18n)
 ];
-const useDataStoreGridBase = ({
-  gridContainerRef,
+const SPECIAL_COLUMNS = [DEFAULT_ID_COLUMN_NAME, "add-column", "ag-Grid-SelectionColumn"];
+const MAX_CONDITIONS = 1;
+const GRID_FILTER_CONFIG = {
+  defaultColDef: {
+    filter: true,
+    filterParams: {
+      maxNumConditions: MAX_CONDITIONS,
+      buttons: ["reset"]
+    }
+  },
+  excludedColumns: SPECIAL_COLUMNS
+};
+const TEXT_TYPE_TO_BACKEND_MAP = {
+  contains: "ilike",
+  equals: "eq",
+  notEqual: "neq",
+  startsWith: "ilike",
+  endsWith: "ilike",
+  isEmpty: "eq",
+  notEmpty: "neq",
+  null: "eq",
+  notNull: "neq",
+  true: "eq",
+  false: "eq"
+};
+const NUMBER_DATE_TYPE_TO_BACKEND_MAP = {
+  equals: "eq",
+  notEqual: "neq",
+  lessThan: "lt",
+  lessThanOrEqual: "lte",
+  greaterThan: "gt",
+  greaterThanOrEqual: "gte",
+  null: "eq",
+  notNull: "neq"
+};
+function mapTextTypeToBackend(type) {
+  const condition = TEXT_TYPE_TO_BACKEND_MAP[type];
+  if (!condition) {
+    throw new Error(`Unknown text type: ${type}`);
+  }
+  return condition;
+}
+function mapNumberDateTypeToBackend(type) {
+  const condition = NUMBER_DATE_TYPE_TO_BACKEND_MAP[type];
+  if (!condition) {
+    throw new Error(`Unknown number/date type: ${type}`);
+  }
+  return condition;
+}
+const useDataTableColumns = ({
   onDeleteColumn,
   onAddRowClick,
-  onAddColumn
+  onAddColumn,
+  isTextEditorOpen
 }) => {
-  const gridApi = ref(null);
   const colDefs = ref([]);
-  const isTextEditorOpen = ref(false);
-  const { mapToAGCellType } = useDataStoreTypes();
-  const { copy: copyToClipboard } = useClipboard({ onPaste: onClipboardPaste });
+  const { mapToAGCellType } = useDataTableTypes();
   const i18n = useI18n();
-  const currentSortBy = ref(DEFAULT_ID_COLUMN_NAME);
-  const currentSortOrder = ref("asc");
-  const lastFocusedCell = ref(null);
-  const initializedGridApi = computed(() => {
-    if (!gridApi.value) {
-      throw new Error("Grid API is not initialized");
-    }
-    return gridApi.value;
-  });
-  const onGridReady = (params) => {
-    gridApi.value = params.api;
-    if (gridContainerRef.value) {
-      params.api.setGridOption("popupParent", gridContainerRef.value);
-    }
-  };
-  const setGridData = ({
-    colDefs: colDefs2,
-    rowData
-  }) => {
-    if (colDefs2) {
-      initializedGridApi.value.setGridOption("columnDefs", colDefs2);
-    }
-    if (rowData) {
-      initializedGridApi.value.setGridOption("rowData", rowData);
-    }
-    initializedGridApi.value.setGridOption("pinnedBottomRowData", [{ id: ADD_ROW_ROW_ID }]);
-  };
-  const focusFirstEditableCell = (rowId) => {
-    const rowNode = initializedGridApi.value.getRowNode(String(rowId));
-    if (rowNode?.rowIndex === null) return;
-    const rowIndex = rowNode.rowIndex;
-    const displayed = initializedGridApi.value.getAllDisplayedColumns();
-    const firstEditable = displayed.find((col) => {
-      const def = col.getColDef();
-      if (!def) return false;
-      if (def.colId === DEFAULT_ID_COLUMN_NAME) return false;
-      return !!def.editable;
-    });
-    if (!firstEditable) return;
-    const columnId = firstEditable.getColId();
-    requestAnimationFrame(() => {
-      initializedGridApi.value.ensureIndexVisible(rowIndex);
-      requestAnimationFrame(() => {
-        initializedGridApi.value.setFocusedCell(rowIndex, columnId);
-        initializedGridApi.value.startEditingCell({
-          rowIndex,
-          colKey: columnId
-        });
-      });
-    });
-  };
   const createColumnDef = (col, extraProps = {}) => {
     const columnDef = {
       colId: col.id,
       field: col.name,
+      filter: !GRID_FILTER_CONFIG.excludedColumns.includes(col.id),
       headerName: col.name,
       sortable: true,
       editable: (params) => params.data?.id !== ADD_ROW_ROW_ID,
       resizable: true,
       lockPinned: true,
       headerComponent: _sfc_main$7,
-      headerComponentParams: { onDelete: onDeleteColumn, allowMenuActions: true },
+      headerComponentParams: {
+        onDelete: onDeleteColumn,
+        allowMenuActions: true
+      },
       cellEditorPopup: false,
       cellDataType: mapToAGCellType(col.type),
       cellClass: getCellClass,
@@ -49819,19 +49991,7 @@ const useDataStoreGridBase = ({
       ...extraProps
     };
   };
-  const onCellEditingStarted = (params) => {
-    if (params.column.getColDef().cellDataType === "text") {
-      isTextEditorOpen.value = true;
-    } else {
-      isTextEditorOpen.value = false;
-    }
-  };
-  const onCellEditingStopped = (params) => {
-    if (params.column.getColDef().cellDataType === "text") {
-      isTextEditorOpen.value = false;
-    }
-  };
-  const getColumnDefinitions = (dataStoreColumns) => {
+  const getColumnDefinitions = (dataTableColumns) => {
     const systemDateColumnOptions = {
       editable: false,
       suppressMovable: true,
@@ -49845,8 +50005,8 @@ const useDataStoreGridBase = ({
       width: DEFAULT_COLUMN_WIDTH
     };
     return [
-      // Always add the ID column, it's not returned by the back-end but all data stores have it
-      // We use it as a placeholder for new datastores
+      // Always add the ID column, it's not returned by the back-end but all data tables have it
+      // We use it as a placeholder for new data tables
       createColumnDef(
         {
           id: DEFAULT_ID_COLUMN_NAME,
@@ -49856,11 +50016,10 @@ const useDataStoreGridBase = ({
         {
           editable: false,
           sortable: true,
-          filter: false,
           suppressMovable: true,
           lockPosition: true,
-          minWidth: DATA_STORE_ID_COLUMN_WIDTH,
-          maxWidth: DATA_STORE_ID_COLUMN_WIDTH,
+          minWidth: DATA_TABLE_ID_COLUMN_WIDTH,
+          maxWidth: DATA_TABLE_ID_COLUMN_WIDTH,
           resizable: false,
           headerClass: "system-column",
           headerComponentParams: {
@@ -49880,10 +50039,10 @@ const useDataStoreGridBase = ({
         }
       ),
       // Append other columns
-      ...orderBy(dataStoreColumns, "index").map((col) => createColumnDef(col)),
+      ...orderBy(dataTableColumns, "index").map((col) => createColumnDef(col)),
       createColumnDef(
         {
-          index: dataStoreColumns.length + 1,
+          index: dataTableColumns.length + 1,
           id: "createdAt",
           name: "createdAt",
           type: "date"
@@ -49892,7 +50051,7 @@ const useDataStoreGridBase = ({
       ),
       createColumnDef(
         {
-          index: dataStoreColumns.length + 2,
+          index: dataTableColumns.length + 2,
           id: "updatedAt",
           name: "updatedAt",
           type: "date"
@@ -49901,7 +50060,7 @@ const useDataStoreGridBase = ({
       ),
       createColumnDef(
         {
-          index: dataStoreColumns.length + 3,
+          index: dataTableColumns.length + 3,
           id: "add-column",
           name: "Add Column",
           type: "string"
@@ -49919,17 +50078,14 @@ const useDataStoreGridBase = ({
       )
     ];
   };
-  const loadColumns = (dataStoreColumns) => {
-    colDefs.value = getColumnDefinitions(dataStoreColumns);
-    setGridData({ colDefs: colDefs.value });
+  const loadColumns = (dataTableColumns) => {
+    colDefs.value = getColumnDefinitions(dataTableColumns);
   };
   const deleteColumn = (columnId) => {
     colDefs.value = colDefs.value.filter((col) => col.colId !== columnId);
-    setGridData({ colDefs: colDefs.value });
   };
   const insertColumnAtIndex = (column, index) => {
     colDefs.value.splice(index, 0, column);
-    setGridData({ colDefs: colDefs.value });
   };
   const addColumn = (column) => {
     colDefs.value = [
@@ -49937,7 +50093,6 @@ const useDataStoreGridBase = ({
       createColumnDef(column),
       ...colDefs.value.slice(-1)
     ];
-    setGridData({ colDefs: colDefs.value });
   };
   const moveColumn = (oldIndex, newIndex) => {
     const fromIndex = oldIndex - 1;
@@ -49945,107 +50100,21 @@ const useDataStoreGridBase = ({
     if (!columnToBeMoved) {
       return;
     }
-    const middleWithIndex = colDefs.value.slice(1, -1).map((col, index) => ({ ...col, index }));
-    const reorderedMiddle = reorderItem(middleWithIndex, fromIndex, newIndex).sort((a, b) => a.index - b.index).map(({ index, ...col }) => col);
+    const middleWithIndex = colDefs.value.slice(1, -1).map((col, idx) => ({ column: col, index: idx }));
+    const reorderedMiddle = reorderItem(middleWithIndex, fromIndex, newIndex).sort((a, b) => a.index - b.index).map(({ column }) => column);
     colDefs.value = [colDefs.value[0], ...reorderedMiddle, colDefs.value[colDefs.value.length - 1]];
   };
-  const handleCopyFocusedCell = async (params) => {
-    const focused = params.api.getFocusedCell();
-    if (!focused) {
-      return;
-    }
-    const row = params.api.getDisplayedRowAtIndex(focused.rowIndex);
-    const colDef = focused.column.getColDef();
-    if (row?.data && colDef.field) {
-      const rawValue = row.data[colDef.field];
-      const text = rawValue === null || rawValue === void 0 ? "" : String(rawValue);
-      await copyToClipboard(text);
-    }
-  };
-  function onClipboardPaste(data) {
-    const focusedCell = initializedGridApi.value.getFocusedCell();
-    const isEditing2 = initializedGridApi.value.getEditingCells().length > 0;
-    if (!focusedCell || isEditing2) return;
-    const row = initializedGridApi.value.getDisplayedRowAtIndex(focusedCell.rowIndex);
-    if (!row) return;
-    const colDef = focusedCell.column.getColDef();
-    if (colDef.cellDataType === "text") {
-      row.setDataValue(focusedCell.column.getColId(), data);
-    } else if (colDef.cellDataType === "number") {
-      if (!Number.isNaN(Number(data))) {
-        row.setDataValue(focusedCell.column.getColId(), Number(data));
-      }
-    } else if (colDef.cellDataType === "date") {
-      if (!Number.isNaN(Date.parse(data))) {
-        row.setDataValue(focusedCell.column.getColId(), new Date(data));
-      }
-    } else if (colDef.cellDataType === "boolean") {
-      if (data === "true") {
-        row.setDataValue(focusedCell.column.getColId(), true);
-      } else if (data === "false") {
-        row.setDataValue(focusedCell.column.getColId(), false);
-      }
-    }
-  }
-  const onCellClicked = (params) => {
-    const clickedCellColumn = params.column.getColId();
-    const clickedCellRow = params.rowIndex;
-    if (clickedCellRow === null || params.api.isEditing({ rowIndex: clickedCellRow, column: params.column, rowPinned: null }))
-      return;
-    const wasAlreadyFocused = lastFocusedCell.value && lastFocusedCell.value.rowIndex === clickedCellRow && lastFocusedCell.value.colId === clickedCellColumn;
-    if (wasAlreadyFocused && params.column.getColDef()?.editable) {
-      params.api.startEditingCell({
-        rowIndex: clickedCellRow,
-        colKey: clickedCellColumn
-      });
-    }
-    lastFocusedCell.value = {
-      rowIndex: clickedCellRow,
-      colId: clickedCellColumn
-    };
-  };
-  const resetLastFocusedCell = () => {
-    lastFocusedCell.value = null;
-  };
-  const onSortChanged2 = async (event) => {
-    const sortedColumn = event.columns?.filter((col) => col.getSort() !== null).pop() ?? null;
-    if (sortedColumn) {
-      const colId = sortedColumn.getColId();
-      const columnDef = colDefs.value.find((col) => col.colId === colId);
-      currentSortBy.value = columnDef?.field || colId;
-      currentSortOrder.value = sortedColumn.getSort() ?? "asc";
-    } else {
-      currentSortBy.value = DEFAULT_ID_COLUMN_NAME;
-      currentSortOrder.value = "asc";
-    }
-  };
-  onClickOutside(gridContainerRef, () => {
-    resetLastFocusedCell();
-    initializedGridApi.value.clearFocusedCell();
-  });
   return {
-    onGridReady,
-    setGridData,
-    focusFirstEditableCell,
-    onCellEditingStarted,
-    onCellEditingStopped,
+    colDefs,
     createColumnDef,
     loadColumns,
-    colDefs,
     deleteColumn,
     insertColumnAtIndex,
     addColumn,
-    moveColumn,
-    gridApi: initializedGridApi,
-    handleCopyFocusedCell,
-    onCellClicked,
-    resetLastFocusedCell,
-    currentSortBy,
-    currentSortOrder,
-    onSortChanged: onSortChanged2
+    moveColumn
   };
 };
-const useDataStoreSelection = ({
+const useDataTableSelection = ({
   gridApi
 }) => {
   const selectedRowIds = ref(/* @__PURE__ */ new Set());
@@ -50078,7 +50147,7 @@ const useDataStoreSelection = ({
     handleClearSelection
   };
 };
-const useDataStoreOperations = ({
+const useDataTableOperations = ({
   colDefs,
   rowData,
   deleteGridColumn,
@@ -50086,7 +50155,7 @@ const useDataStoreOperations = ({
   setGridData,
   insertGridColumnAtIndex,
   moveGridColumn,
-  dataStoreId,
+  dataTableId,
   projectId,
   gridApi,
   totalItems,
@@ -50106,18 +50175,38 @@ const useDataStoreOperations = ({
   const i18n = useI18n();
   const toast = useToast();
   const message = useMessage();
-  const dataStoreStore = useDataStoreStore();
+  const dataTableStore = useDataTableStore();
   const contentLoading = ref(false);
   const telemetry2 = useTelemetry();
-  const dataStoreTypes = useDataStoreTypes();
+  const dataTableTypes = useDataTableTypes();
+  const getAddColumnError = (error) => {
+    const DEFAULT_HTTP_STATUS = 500;
+    const DEFAULT_MESSAGE = i18n.baseText("generic.unknownError");
+    if (error instanceof ResponseError) {
+      return {
+        httpStatus: error.httpStatusCode ?? 500,
+        message: error.message
+      };
+    }
+    if (error instanceof Error) {
+      return {
+        httpStatus: DEFAULT_HTTP_STATUS,
+        message: error.message
+      };
+    }
+    return {
+      httpStatus: DEFAULT_HTTP_STATUS,
+      message: DEFAULT_MESSAGE
+    };
+  };
   async function onDeleteColumn(columnId) {
     const columnToDelete = colDefs.value.find((col) => col.colId === columnId);
     if (!columnToDelete) return;
     const promptResponse = await message.confirm(
-      i18n.baseText("dataStore.deleteColumn.confirm.message", {
+      i18n.baseText("dataTable.deleteColumn.confirm.message", {
         interpolate: { name: columnToDelete.headerName ?? "" }
       }),
-      i18n.baseText("dataStore.deleteColumn.confirm.title"),
+      i18n.baseText("dataTable.deleteColumn.confirm.title"),
       {
         confirmButtonText: i18n.baseText("generic.delete"),
         cancelButtonText: i18n.baseText("generic.cancel")
@@ -50133,37 +50222,37 @@ const useDataStoreOperations = ({
       const { [columnToDelete.field]: _, ...rest } = row;
       return rest;
     });
-    setGridData({ rowData: rowData.value });
+    setGridData({ colDefs: colDefs.value, rowData: rowData.value });
     try {
-      await dataStoreStore.deleteDataStoreColumn(dataStoreId, projectId, columnId);
+      await dataTableStore.deleteDataTableColumn(dataTableId, projectId, columnId);
       telemetry2.track("User deleted data table column", {
         column_id: columnId,
         column_type: columnToDelete.cellDataType,
-        data_table_id: dataStoreId
+        data_table_id: dataTableId
       });
     } catch (error) {
-      toast.showError(error, i18n.baseText("dataStore.deleteColumn.error"));
+      toast.showError(error, i18n.baseText("dataTable.deleteColumn.error"));
       insertGridColumnAtIndex(columnToDelete, columnToDeleteIndex);
       rowData.value = rowDataOldValue;
-      setGridData({ rowData: rowData.value });
+      setGridData({ colDefs: colDefs.value, rowData: rowData.value });
     }
   }
   async function onAddColumn(column) {
     try {
-      const newColumn = await dataStoreStore.addDataStoreColumn(dataStoreId, projectId, column);
+      const newColumn = await dataTableStore.addDataTableColumn(dataTableId, projectId, column);
       addGridColumn(newColumn);
       rowData.value = rowData.value.map((row) => {
         return { ...row, [newColumn.name]: null };
       });
-      setGridData({ rowData: rowData.value });
+      setGridData({ colDefs: colDefs.value, rowData: rowData.value });
       telemetry2.track("User added data table column", {
         column_id: newColumn.id,
         column_type: newColumn.type,
-        data_table_id: dataStoreId
+        data_table_id: dataTableId
       });
       return { success: true, httpStatus: 200 };
     } catch (error) {
-      const addColumnError = dataStoreTypes.getAddColumnError(error);
+      const addColumnError = getAddColumnError(error);
       return {
         success: false,
         httpStatus: addColumnError.httpStatus,
@@ -50178,15 +50267,15 @@ const useDataStoreOperations = ({
     const oldIndex = colDefs.value.findIndex((col) => col.colId === moveEvent.column.getColId());
     const newIndex = moveEvent.toIndex - 2;
     try {
-      await dataStoreStore.moveDataStoreColumn(
-        dataStoreId,
+      await dataTableStore.moveDataTableColumn(
+        dataTableId,
         projectId,
         moveEvent.column.getColId(),
         newIndex
       );
       moveGridColumn(oldIndex, newIndex);
     } catch (error) {
-      toast.showError(error, i18n.baseText("dataStore.moveColumn.error"));
+      toast.showError(error, i18n.baseText("dataTable.moveColumn.error"));
       gridApi.value.moveColumnByIndex(moveEvent.toIndex, oldIndex + 1);
     }
   };
@@ -50195,17 +50284,17 @@ const useDataStoreOperations = ({
       await ensureItemOnPage(totalItems.value + 1);
       contentLoading.value = true;
       toggleSave(true);
-      const insertedRow = await dataStoreStore.insertEmptyRow(dataStoreId, projectId);
+      const insertedRow = await dataTableStore.insertEmptyRow(dataTableId, projectId);
       const newRow = insertedRow;
       rowData.value.push(newRow);
       setTotalItems(totalItems.value + 1);
       setGridData({ rowData: rowData.value });
       focusFirstEditableCell(newRow.id);
       telemetry2.track("User added row to data table", {
-        data_table_id: dataStoreId
+        data_table_id: dataTableId
       });
     } catch (error) {
-      toast.showError(error, i18n.baseText("dataStore.addRow.error"));
+      toast.showError(error, i18n.baseText("dataTable.addRow.error"));
     } finally {
       toggleSave(false);
       contentLoading.value = false;
@@ -50216,7 +50305,7 @@ const useDataStoreOperations = ({
     const fieldName = String(colDef.field ?? "");
     if (!fieldName) return;
     const value = params.data[fieldName];
-    const cellType = isAGGridCellType(colDef.cellDataType) ? dataStoreTypes.mapToDataStoreColumnType(colDef.cellDataType) : void 0;
+    const cellType = isAGGridCellType(colDef.cellDataType) ? dataTableTypes.mapToDataTableColumnType(colDef.cellDataType) : void 0;
     if (value === void 0 || areValuesEqual(oldValue, value, cellType)) {
       return;
     }
@@ -50226,30 +50315,33 @@ const useDataStoreOperations = ({
     const id = data.id;
     try {
       toggleSave(true);
-      await dataStoreStore.updateRow(dataStoreId, projectId, id, {
+      await dataTableStore.updateRow(dataTableId, projectId, id, {
         [fieldName]: value
       });
       telemetry2.track("User edited data table content", {
-        data_table_id: dataStoreId,
+        data_table_id: dataTableId,
         column_id: colDef.colId,
         column_type: colDef.cellDataType
       });
     } catch (error) {
-      const validOldValue = isDataStoreValue(oldValue) ? oldValue : null;
-      const revertedData = { ...data, [fieldName]: validOldValue };
+      const validOldValue = isDataTableValue(oldValue) ? oldValue : null;
+      const revertedData = {
+        ...data,
+        [fieldName]: validOldValue
+      };
       api.applyTransaction({
         update: [revertedData]
       });
-      toast.showError(error, i18n.baseText("dataStore.updateRow.error"));
+      toast.showError(error, i18n.baseText("dataTable.updateRow.error"));
     } finally {
       toggleSave(false);
     }
   };
-  async function fetchDataStoreRows() {
+  async function fetchDataTableRows() {
     try {
       contentLoading.value = true;
-      const fetchedRows = await dataStoreStore.fetchDataStoreContent(
-        dataStoreId,
+      const fetchedRows = await dataTableStore.fetchDataTableContent(
+        dataTableId,
         projectId,
         currentPage.value,
         pageSize.value,
@@ -50261,7 +50353,7 @@ const useDataStoreOperations = ({
       setGridData({ rowData: rowData.value });
       handleClearSelection();
     } catch (error) {
-      toast.showError(error, i18n.baseText("dataStore.fetchContent.error"));
+      toast.showError(error, i18n.baseText("dataTable.fetchContent.error"));
     } finally {
       contentLoading.value = false;
     }
@@ -50269,11 +50361,11 @@ const useDataStoreOperations = ({
   const handleDeleteSelected = async () => {
     if (selectedRowIds.value.size === 0) return;
     const confirmResponse = await message.confirm(
-      i18n.baseText("dataStore.deleteRows.confirmation", {
+      i18n.baseText("dataTable.deleteRows.confirmation", {
         adjustToNumber: selectedRowIds.value.size,
         interpolate: { count: selectedRowIds.value.size }
       }),
-      i18n.baseText("dataStore.deleteRows.title"),
+      i18n.baseText("dataTable.deleteRows.title"),
       {
         confirmButtonText: i18n.baseText("generic.delete"),
         cancelButtonText: i18n.baseText("generic.cancel")
@@ -50285,14 +50377,14 @@ const useDataStoreOperations = ({
     try {
       toggleSave(true);
       const idsToDelete = Array.from(selectedRowIds.value);
-      await dataStoreStore.deleteRows(dataStoreId, projectId, idsToDelete);
-      await fetchDataStoreRows();
+      await dataTableStore.deleteRows(dataTableId, projectId, idsToDelete);
+      await fetchDataTableRows();
       telemetry2.track("User deleted rows in data table", {
-        data_table_id: dataStoreId,
+        data_table_id: dataTableId,
         deleted_row_count: idsToDelete.length
       });
     } catch (error) {
-      toast.showError(error, i18n.baseText("dataStore.deleteRows.error"));
+      toast.showError(error, i18n.baseText("dataTable.deleteRows.error"));
     } finally {
       toggleSave(false);
     }
@@ -50327,60 +50419,11 @@ const useDataStoreOperations = ({
     onAddRowClick,
     contentLoading,
     onCellValueChanged,
-    fetchDataStoreRows,
+    fetchDataTableRows,
     handleDeleteSelected,
     onCellKeyDown
   };
 };
-const SPECIAL_COLUMNS = ["add-column", "ag-Grid-SelectionColumn"];
-const isSpecialColumn = (value) => typeof value === "string" && SPECIAL_COLUMNS.includes(value);
-const MAX_CONDITIONS = 1;
-const GRID_FILTER_CONFIG = {
-  defaultColDef: {
-    filter: true,
-    filterParams: {
-      maxNumConditions: MAX_CONDITIONS,
-      buttons: ["reset"]
-    }
-  }
-};
-const TEXT_TYPE_TO_BACKEND_MAP = {
-  contains: "ilike",
-  equals: "eq",
-  notEqual: "neq",
-  startsWith: "ilike",
-  endsWith: "ilike",
-  isEmpty: "eq",
-  notEmpty: "neq",
-  null: "eq",
-  notNull: "neq",
-  true: "eq",
-  false: "eq"
-};
-const NUMBER_DATE_TYPE_TO_BACKEND_MAP = {
-  equals: "eq",
-  notEqual: "neq",
-  lessThan: "lt",
-  lessThanOrEqual: "lte",
-  greaterThan: "gt",
-  greaterThanOrEqual: "gte",
-  null: "eq",
-  notNull: "neq"
-};
-function mapTextTypeToBackend(type) {
-  const condition = TEXT_TYPE_TO_BACKEND_MAP[type];
-  if (!condition) {
-    throw new Error(`Unknown text type: ${type}`);
-  }
-  return condition;
-}
-function mapNumberDateTypeToBackend(type) {
-  const condition = NUMBER_DATE_TYPE_TO_BACKEND_MAP[type];
-  if (!condition) {
-    throw new Error(`Unknown number/date type: ${type}`);
-  }
-  return condition;
-}
 function processTextFilter(filter, colField) {
   let value = filter.filter ?? null;
   if (typeof filter.filter === "string") {
@@ -50464,25 +50507,11 @@ function processDateFilter(filter, colField) {
   }
   return filters;
 }
-const useDataStoreColumnFilters = ({
+const useDataTableColumnFilters = ({
   gridApi,
-  colDefs,
-  setGridData
+  colDefs
 }) => {
   const currentFilterJSON = ref(void 0);
-  const initializeFilters = () => {
-    gridApi.value.setGridOption("defaultColDef", GRID_FILTER_CONFIG.defaultColDef);
-    const updated = colDefs.value.map((def) => {
-      const colId = def.colId ?? def.field;
-      if (!colId) return def;
-      if (isSpecialColumn(colId)) {
-        return { ...def, filter: false };
-      }
-      return def;
-    });
-    colDefs.value = updated;
-    setGridData({ colDefs: updated });
-  };
   function convertAgModelToBackend(model, defs) {
     const allFilters = [];
     const colIdToField = /* @__PURE__ */ new Map();
@@ -50516,58 +50545,40 @@ const useDataStoreColumnFilters = ({
   };
   const hasActiveFilters = computed(() => Boolean(currentFilterJSON.value));
   return {
-    initializeFilters,
     onFilterChanged: onFilterChanged2,
     currentFilterJSON,
     hasActiveFilters
   };
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "DataStoreTable",
+  __name: "DataTableTable",
   props: {
-    dataStore: {}
+    dataTable: {}
   },
   emits: ["toggleSave"],
   setup(__props, { expose: __expose, emit: __emit }) {
-    ModuleRegistry.registerModules([
-      ValidationModule,
-      // This module allows us to see AG Grid errors in browser console
-      ClientSideRowModelModule,
-      TextEditorModule,
-      LargeTextEditorModule,
-      ColumnAutoSizeModule,
-      CheckboxEditorModule,
-      NumberEditorModule,
-      RowSelectionModule,
-      RenderApiModule,
-      DateEditorModule,
-      ClientSideRowModelApiModule,
-      UndoRedoEditModule,
-      CellStyleModule,
-      PinnedRowModule,
-      ScrollApiModule,
-      ColumnApiModule,
-      TextFilterModule,
-      NumberFilterModule,
-      DateFilterModule,
-      EventApiModule
-    ]);
+    registerAgGridModulesOnce();
     const props = __props;
     const emit = __emit;
     const gridContainerRef = useTemplateRef("gridContainerRef");
     const i18n = useI18n();
-    const dataStoreGridBase = useDataStoreGridBase({
+    const rowData = ref([]);
+    const hasRecords = computed(() => rowData.value.length > 0);
+    const agGrid = useAgGrid({
       gridContainerRef,
+      defaultSortColumn: DEFAULT_ID_COLUMN_NAME,
+      pinnedBottomRowId: ADD_ROW_ROW_ID,
+      defaultColDef: GRID_FILTER_CONFIG.defaultColDef
+    });
+    const dataTableColumns = useDataTableColumns({
       onDeleteColumn: onDeleteColumnFunction,
       onAddRowClick: onAddRowClickFunction,
-      onAddColumn: onAddColumnFunction
+      onAddColumn: onAddColumnFunction,
+      isTextEditorOpen: agGrid.isTextEditorOpen
     });
-    const rowData = ref([]);
-    const hasRecords = computed(() => rowData.value.length > 0);
-    const { initializeFilters, onFilterChanged: onFilterChanged2, currentFilterJSON } = useDataStoreColumnFilters({
-      gridApi: dataStoreGridBase.gridApi,
-      colDefs: dataStoreGridBase.colDefs,
-      setGridData: dataStoreGridBase.setGridData
+    const { onFilterChanged: onFilterChanged2, currentFilterJSON } = useDataTableColumnFilters({
+      gridApi: agGrid.gridApi,
+      colDefs: dataTableColumns.colDefs
     });
     const {
       currentPage,
@@ -50578,63 +50589,63 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       setTotalItems,
       setCurrentPage,
       setPageSize
-    } = useDataStorePagination({ onChange: fetchDataStoreRowsFunction });
-    const selection = useDataStoreSelection({
-      gridApi: dataStoreGridBase.gridApi
+    } = useDataTablePagination({ onChange: fetchDataTableRowsFunction });
+    const selection = useDataTableSelection({
+      gridApi: agGrid.gridApi
     });
-    const dataStoreOperations = useDataStoreOperations({
-      colDefs: dataStoreGridBase.colDefs,
+    const dataTableOperations = useDataTableOperations({
+      colDefs: dataTableColumns.colDefs,
       rowData,
-      deleteGridColumn: dataStoreGridBase.deleteColumn,
-      setGridData: dataStoreGridBase.setGridData,
-      insertGridColumnAtIndex: dataStoreGridBase.insertColumnAtIndex,
-      dataStoreId: props.dataStore.id,
-      projectId: props.dataStore.projectId,
-      addGridColumn: dataStoreGridBase.addColumn,
-      moveGridColumn: dataStoreGridBase.moveColumn,
-      gridApi: dataStoreGridBase.gridApi,
+      deleteGridColumn: dataTableColumns.deleteColumn,
+      setGridData: agGrid.setGridData,
+      insertGridColumnAtIndex: dataTableColumns.insertColumnAtIndex,
+      dataTableId: props.dataTable.id,
+      projectId: props.dataTable.projectId,
+      addGridColumn: dataTableColumns.addColumn,
+      moveGridColumn: dataTableColumns.moveColumn,
+      gridApi: agGrid.gridApi,
       totalItems,
       setTotalItems,
       ensureItemOnPage,
-      focusFirstEditableCell: dataStoreGridBase.focusFirstEditableCell,
+      focusFirstEditableCell: agGrid.focusFirstEditableCell,
       toggleSave: emit.bind(null, "toggleSave"),
       currentPage,
       pageSize,
-      currentSortBy: dataStoreGridBase.currentSortBy,
-      currentSortOrder: dataStoreGridBase.currentSortOrder,
+      currentSortBy: agGrid.currentSortBy,
+      currentSortOrder: agGrid.currentSortOrder,
       handleClearSelection: selection.handleClearSelection,
       selectedRowIds: selection.selectedRowIds,
-      handleCopyFocusedCell: dataStoreGridBase.handleCopyFocusedCell,
+      handleCopyFocusedCell: agGrid.handleCopyFocusedCell,
       currentFilterJSON
     });
     async function onDeleteColumnFunction(columnId) {
-      await dataStoreOperations.onDeleteColumn(columnId);
+      await dataTableOperations.onDeleteColumn(columnId);
     }
     async function onAddColumnFunction(column) {
-      return await dataStoreOperations.onAddColumn(column);
+      return await dataTableOperations.onAddColumn(column);
     }
     async function onAddRowClickFunction() {
-      await dataStoreOperations.onAddRowClick();
+      await dataTableOperations.onAddRowClick();
     }
-    async function fetchDataStoreRowsFunction() {
-      await dataStoreOperations.fetchDataStoreRows();
+    async function fetchDataTableRowsFunction() {
+      await dataTableOperations.fetchDataTableRows();
     }
     const initialize = async (params) => {
-      dataStoreGridBase.onGridReady(params);
-      dataStoreGridBase.loadColumns(props.dataStore.columns);
-      await dataStoreOperations.fetchDataStoreRows();
-      initializeFilters();
+      agGrid.onGridReady(params);
+      dataTableColumns.loadColumns(props.dataTable.columns);
+      agGrid.setGridData({ colDefs: dataTableColumns.colDefs.value });
+      await dataTableOperations.fetchDataTableRows();
     };
-    const customNoRowsOverlay = `<div class="no-rows-overlay ag-overlay-no-rows-center" data-test-id="data-store-no-rows-overlay">${i18n.baseText("dataStore.noRows")}</div>`;
-    watch([dataStoreGridBase.currentSortBy, dataStoreGridBase.currentSortOrder], async () => {
+    const customNoRowsOverlay = `<div class="no-rows-overlay ag-overlay-no-rows-center" data-test-id="data-table-no-rows-overlay">${i18n.baseText("dataTable.noRows")}</div>`;
+    watch([agGrid.currentSortBy, agGrid.currentSortOrder], async () => {
       await setCurrentPage(1);
     });
     watch(currentFilterJSON, async () => {
       await setCurrentPage(1);
     });
     __expose({
-      addRow: dataStoreOperations.onAddRowClick,
-      addColumn: dataStoreOperations.onAddColumn
+      addRow: dataTableOperations.onAddRowClick,
+      addColumn: dataTableOperations.onAddColumn
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -50644,17 +50655,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ref_key: "gridContainerRef",
           ref: gridContainerRef,
           class: normalizeClass([_ctx.$style["grid-container"], { [_ctx.$style["has-records"]]: hasRecords.value }]),
-          "data-test-id": "data-store-grid"
+          "data-test-id": "data-table-grid"
         }, [
           createVNode(unref(Be), {
             style: { "width": "100%" },
             "dom-layout": "autoHeight",
-            "row-height": unref(DATA_STORE_ROW_HEIGHT),
-            "header-height": unref(DATA_STORE_HEADER_HEIGHT),
+            "row-height": unref(DATA_TABLE_ROW_HEIGHT),
+            "header-height": unref(DATA_TABLE_HEADER_HEIGHT),
             "animate-rows": false,
             theme: unref(n8nTheme),
             "suppress-drag-leave-hides-columns": true,
-            loading: unref(dataStoreOperations).contentLoading.value,
+            loading: unref(dataTableOperations).contentLoading.value,
             "row-selection": unref(selection).rowSelection,
             "get-row-id": (params) => String(params.data.id),
             "stop-editing-when-cells-lose-focus": true,
@@ -50662,65 +50673,65 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             "suppress-multi-sort": true,
             "overlay-no-rows-template": customNoRowsOverlay,
             onGridReady: initialize,
-            onCellValueChanged: unref(dataStoreOperations).onCellValueChanged,
-            onColumnMoved: unref(dataStoreOperations).onColumnMoved,
-            onCellClicked: unref(dataStoreGridBase).onCellClicked,
-            onCellEditingStarted: unref(dataStoreGridBase).onCellEditingStarted,
-            onCellEditingStopped: unref(dataStoreGridBase).onCellEditingStopped,
-            onColumnHeaderClicked: unref(dataStoreGridBase).resetLastFocusedCell,
+            onCellValueChanged: unref(dataTableOperations).onCellValueChanged,
+            onColumnMoved: unref(dataTableOperations).onColumnMoved,
+            onCellClicked: unref(agGrid).onCellClicked,
+            onCellEditingStarted: unref(agGrid).onCellEditingStarted,
+            onCellEditingStopped: unref(agGrid).onCellEditingStopped,
+            onColumnHeaderClicked: unref(agGrid).resetLastFocusedCell,
             onSelectionChanged: unref(selection).onSelectionChanged,
-            onSortChanged: unref(dataStoreGridBase).onSortChanged,
-            onCellKeyDown: unref(dataStoreOperations).onCellKeyDown,
+            onSortChanged: _cache[0] || (_cache[0] = (e) => unref(agGrid).onSortChanged(e, unref(dataTableColumns).colDefs.value)),
+            onCellKeyDown: unref(dataTableOperations).onCellKeyDown,
             onFilterChanged: unref(onFilterChanged2)
-          }, null, 8, ["row-height", "header-height", "theme", "loading", "row-selection", "get-row-id", "onCellValueChanged", "onColumnMoved", "onCellClicked", "onCellEditingStarted", "onCellEditingStopped", "onColumnHeaderClicked", "onSelectionChanged", "onSortChanged", "onCellKeyDown", "onFilterChanged"]),
+          }, null, 8, ["row-height", "header-height", "theme", "loading", "row-selection", "get-row-id", "onCellValueChanged", "onColumnMoved", "onCellClicked", "onCellEditingStarted", "onCellEditingStopped", "onColumnHeaderClicked", "onSelectionChanged", "onCellKeyDown", "onFilterChanged"]),
           createBaseVNode("div", {
             class: normalizeClass(_ctx.$style.footer)
           }, [
             createVNode(unref(ElPagination), {
               "current-page": unref(currentPage),
               "onUpdate:currentPage": [
-                _cache[0] || (_cache[0] = ($event) => isRef(currentPage) ? currentPage.value = $event : null),
+                _cache[1] || (_cache[1] = ($event) => isRef(currentPage) ? currentPage.value = $event : null),
                 unref(setCurrentPage)
               ],
               "page-size": unref(pageSize),
-              "onUpdate:pageSize": _cache[1] || (_cache[1] = ($event) => isRef(pageSize) ? pageSize.value = $event : null),
-              "data-test-id": "data-store-content-pagination",
+              "onUpdate:pageSize": _cache[2] || (_cache[2] = ($event) => isRef(pageSize) ? pageSize.value = $event : null),
+              "data-test-id": "data-table-content-pagination",
               background: "",
               total: unref(totalItems),
               "page-sizes": unref(pageSizeOptions),
               layout: "total, prev, pager, next, sizes",
-              onSizeChange: _cache[2] || (_cache[2] = (val) => unref(setPageSize)(val))
+              onSizeChange: _cache[3] || (_cache[3] = (val) => unref(setPageSize)(val))
             }, null, 8, ["current-page", "page-size", "total", "page-sizes", "onUpdate:currentPage"])
           ], 2)
         ], 2),
         createVNode(SelectedItemsInfo, {
           "selected-count": unref(selection).selectedCount.value,
-          onDeleteSelected: unref(dataStoreOperations).handleDeleteSelected,
+          onDeleteSelected: unref(dataTableOperations).handleDeleteSelected,
           onClearSelection: unref(selection).handleClearSelection
         }, null, 8, ["selected-count", "onDeleteSelected", "onClearSelection"])
       ], 2);
     };
   }
 });
-const wrapper = "_wrapper_1aa24_123";
-const footer = "_footer_1aa24_279";
+const wrapper = "_wrapper_a9qvr_123";
+const footer = "_footer_a9qvr_279";
 const style0$1 = {
   wrapper,
-  "has-records": "_has-records_1aa24_244",
-  "grid-container": "_grid-container_1aa24_269",
+  "has-records": "_has-records_a9qvr_244",
+  "grid-container": "_grid-container_a9qvr_269",
   footer
 };
 const cssModules$1 = {
   "$style": style0$1
 };
-const DataStoreTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
+const DataTableTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
 const _hoisted_1 = {
   key: 0,
-  "data-test-id": "data-store-details-loading"
+  "data-test-id": "data-table-details-loading"
 };
 const _hoisted_2 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "DataStoreDetailsView",
+  __name: "DataTableDetailsView",
   props: {
     id: {},
     projectId: {}
@@ -50731,28 +50742,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const i18n = useI18n();
     const router = useRouter();
     const documentTitle = useDocumentTitle();
-    const dataStoreStore = useDataStoreStore();
+    const dataTableStore = useDataTableStore();
     const loading = ref(false);
     const saving2 = ref(false);
-    const dataStore = ref(null);
-    const dataStoreTableRef = ref();
+    const dataTable = ref(null);
+    const dataTableTableRef = ref();
     const { debounce } = useDebounce();
     const showErrorAndGoBackToList = async (error) => {
       if (!(error instanceof Error)) {
-        error = new Error(String(i18n.baseText("dataStore.getDetails.error")));
+        error = new Error(String(i18n.baseText("dataTable.getDetails.error")));
       }
-      toast.showError(error, i18n.baseText("dataStore.getDetails.error"));
-      await router.push({ name: DATA_STORE_VIEW, params: { projectId: props.projectId } });
+      toast.showError(error, i18n.baseText("dataTable.getDetails.error"));
+      await router.push({ name: DATA_TABLE_VIEW, params: { projectId: props.projectId } });
     };
     const initialize = async () => {
       loading.value = true;
       try {
-        const response = await dataStoreStore.fetchOrFindDataStore(props.id, props.projectId);
+        const response = await dataTableStore.fetchOrFindDataTable(props.id, props.projectId);
         if (response) {
-          dataStore.value = response;
-          documentTitle.set(`${i18n.baseText("dataStore.dataStores")} > ${response.name}`);
+          dataTable.value = response;
+          documentTitle.set(`${i18n.baseText("dataTable.dataTables")} > ${response.name}`);
         } else {
-          await showErrorAndGoBackToList(new Error(i18n.baseText("dataStore.notFound")));
+          await showErrorAndGoBackToList(new Error(i18n.baseText("dataTable.notFound")));
         }
       } catch (error) {
         await showErrorAndGoBackToList(error);
@@ -50780,21 +50791,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const onAddColumn = async (column) => {
-      if (!dataStoreTableRef.value) {
+      if (!dataTableTableRef.value) {
         return {
           success: false,
-          errorMessage: i18n.baseText("dataStore.error.tableNotInitialized")
+          errorMessage: i18n.baseText("dataTable.error.tableNotInitialized")
         };
       }
-      return await dataStoreTableRef.value.addColumn(column);
+      return await dataTableTableRef.value.addColumn(column);
     };
     onMounted(async () => {
-      documentTitle.set(i18n.baseText("dataStore.dataStores"));
+      documentTitle.set(i18n.baseText("dataTable.dataTables"));
       await initialize();
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(_ctx.$style["data-store-details-view"])
+        class: normalizeClass(_ctx.$style["data-table-details-view"]),
+        "data-test-id": "data-table-details-view"
       }, [
         loading.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
           createVNode(unref(N8nLoading), {
@@ -50810,11 +50822,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             rows: 10,
             "shrink-last": false
           })
-        ])) : dataStore.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        ])) : dataTable.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
           createBaseVNode("div", {
             class: normalizeClass(_ctx.$style.header)
           }, [
-            createVNode(DataStoreBreadcrumbs, { "data-store": dataStore.value }, null, 8, ["data-store"]),
+            createVNode(DataTableBreadcrumbs, { "data-table": dataTable.value }, null, 8, ["data-table"]),
             saving2.value ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(_ctx.$style.saving)
@@ -50831,10 +50843,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: normalizeClass(_ctx.$style.actions)
             }, [
               createVNode(unref(N8nButton), {
-                onClick: dataStoreTableRef.value?.addRow
+                "data-test-id": "data-table-header-add-row-button",
+                onClick: dataTableTableRef.value?.addRow
               }, {
                 default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18n).baseText("dataStore.addRow.label")), 1)
+                  createTextVNode(toDisplayString(unref(i18n).baseText("dataTable.addRow.label")), 1)
                 ]),
                 _: 1
               }, 8, ["onClick"]),
@@ -50848,24 +50861,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createBaseVNode("div", {
             class: normalizeClass(_ctx.$style.content)
           }, [
-            createVNode(DataStoreTable, {
-              ref_key: "dataStoreTableRef",
-              ref: dataStoreTableRef,
-              "data-store": dataStore.value,
+            createVNode(DataTableTable, {
+              ref_key: "dataTableTableRef",
+              ref: dataTableTableRef,
+              "data-table": dataTable.value,
               onToggleSave
-            }, null, 8, ["data-store"])
+            }, null, 8, ["data-table"])
           ], 2)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const header = "_header_a2zz6_132";
-const saving = "_saving_a2zz6_147";
-const actions = "_actions_a2zz6_154";
+const header = "_header_1sxsb_132";
+const saving = "_saving_1sxsb_147";
+const actions = "_actions_1sxsb_154";
 const style0 = {
-  "data-store-details-view": "_data-store-details-view_a2zz6_123",
-  "header-loading": "_header-loading_a2zz6_132",
+  "data-table-details-view": "_data-table-details-view_1sxsb_123",
+  "header-loading": "_header-loading_1sxsb_132",
   header,
   saving,
   actions
@@ -50873,7 +50886,7 @@ const style0 = {
 const cssModules = {
   "$style": style0
 };
-const DataStoreDetailsView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+const DataTableDetailsView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
 export {
-  DataStoreDetailsView as default
+  DataTableDetailsView as default
 };