n8n-editor-ui 1.110.0 → 1.111.0

package/dist/assets/{DataStoreDetailsView-B_TSNGAN.js → DataStoreDetailsView-DLuRcsh-.js}

@@ -1,8 +1,8 @@
-import { d as defineComponent, aG as useTemplateRef, b as useRouter, a as useToast, r as ref, x as computed, c as useI18n, a7 as watch, h as createElementBlock, g as openBlock, n as normalizeClass, i as createVNode, j as createBaseVNode, w as withCtx, t as toDisplayString, aH as InlineRename, l as unref, e as createBlock, f as createCommentVNode, gk as PROJECT_DATA_STORES, Y as nextTick, _ as _export_sfc, ef as mergeModels, c1 as toRefs, eg as useModel, o as onMounted, ez as getCurrentInstance, gI as markRaw, c7 as onUnmounted, gJ as mergeDefaults, eW as toRaw, gK as render, c0 as isRef, gL as isReactive, fW as isProxy, b2 as withDirectives, N as N8nIcon, b3 as vShow, aM as N8nActionDropdown, P as useDebounce, y as N8nPopoverReka, e5 as N8nInputLabel, cZ as N8nInput, b8 as withKeys, gM as MAX_COLUMN_NAME_LENGTH, p as N8nText, k as createTextVNode, a9 as Tooltip, e8 as N8nSelect, F as Fragment, A as renderList, e9 as _sfc_main$9, q as N8nButton, aa as _sfc_main$a, gN as COLUMN_NAME_REGEX, bd as DateTime, a8 as resolveComponent, ap as normalizeStyle, ca as useClipboard, bq as onClickOutside, gO as DATA_STORE_HEADER_HEIGHT, gP as DATA_STORE_ROW_HEIGHT, gQ as ADD_ROW_ROW_ID, gR as DEFAULT_ID_COLUMN_NAME, am as useMessage, an as MODAL_CONFIRM, gS as NULL_VALUE, gT as EMPTY_VALUE, eS as orderBy, gU as DATA_STORE_ID_COLUMN_WIDTH, ax as useDocumentTitle, gV as MIN_LOADING_TIME, dK as N8nLoading, dJ as _sfc_main$b, gW as DATA_STORE_VIEW } from "./index-De29TdKc.js";
-import { u as useDataStoreStore, r as reorderItem } from "./dataStore.store-CN-ElCfI.js";
-import { B as Breadcrumbs, _ as __unplugin_components_0 } from "./ProjectBreadcrumb-BI6swolU.js";
-import { _ as _sfc_main$8 } from "./DataStoreActions.vue_vue_type_script_setup_true_lang-BsbILsds.js";
-import { S as SelectedItemsInfo } from "./SelectedItemsInfo-Dc4Okb_S.js";
+import { d as defineComponent, aG as useTemplateRef, b as useRouter, a as useToast, r as ref, x as computed, c as useI18n, a7 as watch, h as createElementBlock, g as openBlock, n as normalizeClass, i as createVNode, j as createBaseVNode, w as withCtx, t as toDisplayString, aH as InlineRename, l as unref, e as createBlock, f as createCommentVNode, gm as PROJECT_DATA_STORES, Y as nextTick, f4 as telemetry, _ as _export_sfc, eh as mergeModels, c1 as toRefs, ei as useModel, o as onMounted, eB as getCurrentInstance, gK as markRaw, c7 as onUnmounted, gL as mergeDefaults, eY as toRaw, gM as render, c0 as isRef, gN as isReactive, fY as isProxy, b2 as withDirectives, N as N8nIcon, b3 as vShow, aM as N8nActionDropdown, bd as DateTime, a8 as resolveComponent, ap as normalizeStyle, P as useDebounce, y as N8nPopoverReka, e7 as N8nInputLabel, c$ as N8nInput, b8 as withKeys, gO as MAX_COLUMN_NAME_LENGTH, p as N8nText, k as createTextVNode, a9 as Tooltip, ea as N8nSelect, F as Fragment, A as renderList, eb as _sfc_main$9, q as N8nButton, aa as _sfc_main$a, gP as COLUMN_NAME_REGEX, gQ as ADD_ROW_ROW_ID, gR as NULL_VALUE, gS as EMPTY_VALUE, ca as useClipboard, bq as onClickOutside, gT as DEFAULT_ID_COLUMN_NAME, eU as orderBy, gU as DATA_STORE_ID_COLUMN_WIDTH, am as useMessage, an as MODAL_CONFIRM, al as useTelemetry, gV as DATA_STORE_HEADER_HEIGHT, gW as DATA_STORE_ROW_HEIGHT, ax as useDocumentTitle, gX as MIN_LOADING_TIME, dM as N8nLoading, dL as _sfc_main$b, gY as DATA_STORE_VIEW } from "./index-DuLlH1tF.js";
+import { u as useDataStoreStore, r as reorderItem } from "./dataStore.store-vaNG0oX7.js";
+import { B as Breadcrumbs, _ as __unplugin_components_0 } from "./ProjectBreadcrumb-OJlbtg71.js";
+import { _ as _sfc_main$8 } from "./DataStoreActions.vue_vue_type_script_setup_true_lang-d31tni9q.js";
+import { S as SelectedItemsInfo } from "./SelectedItemsInfo-C55zD1dl.js";
 const BREADCRUMBS_SEPARATOR = "/";
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "DataStoreBreadcrumbs",
@@ -60,6 +60,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           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
+        });
       } catch (error) {
         editableName.value = props.dataStore.name;
         toast.showError(error, i18n.baseText("dataStore.rename.error"));
@@ -3322,6 +3326,38 @@ function _applyColumnState(beans, params, source) {
   colAnimation?.finish();
   return unmatchedCount === 0;
 }
+function _resetColumnState(beans, source) {
+  const { colModel, autoColSvc, selectionColSvc, eventSvc, gos } = beans;
+  const primaryCols = colModel.getColDefCols();
+  if (!primaryCols?.length) {
+    return;
+  }
+  const primaryColumnTree = colModel.getColDefColTree();
+  const primaryColumns = _getColumnsFromTree(primaryColumnTree);
+  const columnStates = [];
+  let letRowGroupIndex = 1e3;
+  let letPivotIndex = 1e3;
+  const addColState = (col) => {
+    const stateItem = getColumnStateFromColDef(col);
+    if (_missing(stateItem.rowGroupIndex) && stateItem.rowGroup) {
+      stateItem.rowGroupIndex = letRowGroupIndex++;
+    }
+    if (_missing(stateItem.pivotIndex) && stateItem.pivot) {
+      stateItem.pivotIndex = letPivotIndex++;
+    }
+    columnStates.push(stateItem);
+  };
+  autoColSvc?.getColumns()?.forEach(addColState);
+  selectionColSvc?.getColumns()?.forEach(addColState);
+  primaryColumns?.forEach(addColState);
+  _applyColumnState(beans, { state: columnStates }, source);
+  const autoCols = autoColSvc?.getColumns() ?? [];
+  const selectionCols = selectionColSvc?.getColumns() ?? [];
+  const orderedCols = [...selectionCols, ...autoCols, ...primaryCols];
+  const orderedColState = orderedCols.map((col) => ({ colId: col.colId }));
+  _applyColumnState(beans, { state: orderedColState, applyOrder: true }, source);
+  eventSvc.dispatchEvent(_addGridCommonParams(gos, { type: "columnsReset", source }));
+}
 function _compareColumnStatesAndDispatchEvents(beans, source) {
   const { rowGroupColsSvc, pivotColsSvc, valueColsSvc, colModel, sortSvc, eventSvc } = beans;
   const startState = {
@@ -22054,6 +22090,176 @@ var SkeletonCellRendererModule = {
     agSkeletonCellRenderer: SkeletonCellRenderer
   }
 };
+function getColumnDef(beans, key) {
+  const column = beans.colModel.getColDefCol(key);
+  if (column) {
+    return column.getColDef();
+  }
+  return null;
+}
+function getColumnDefs(beans) {
+  return beans.colModel.getColumnDefs();
+}
+function getDisplayNameForColumn(beans, column, location) {
+  return beans.colNames.getDisplayNameForColumn(column, location) || "";
+}
+function getColumn(beans, key) {
+  return beans.colModel.getColDefCol(key);
+}
+function getColumns(beans) {
+  return beans.colModel.getColDefCols();
+}
+function applyColumnState(beans, params) {
+  return _applyColumnState(beans, params, "api");
+}
+function getColumnState(beans) {
+  return _getColumnState(beans);
+}
+function resetColumnState(beans) {
+  _resetColumnState(beans, "api");
+}
+function isPinning(beans) {
+  return beans.visibleCols.isPinningLeft() || beans.visibleCols.isPinningRight();
+}
+function isPinningLeft(beans) {
+  return beans.visibleCols.isPinningLeft();
+}
+function isPinningRight(beans) {
+  return beans.visibleCols.isPinningRight();
+}
+function getDisplayedColAfter(beans, col) {
+  return beans.visibleCols.getColAfter(col);
+}
+function getDisplayedColBefore(beans, col) {
+  return beans.visibleCols.getColBefore(col);
+}
+function setColumnsVisible(beans, keys, visible) {
+  beans.colModel.setColsVisible(keys, visible, "api");
+}
+function setColumnsPinned(beans, keys, pinned) {
+  beans.pinnedCols?.setColsPinned(keys, pinned, "api");
+}
+function getAllGridColumns(beans) {
+  return beans.colModel.getCols();
+}
+function getDisplayedLeftColumns(beans) {
+  return beans.visibleCols.leftCols;
+}
+function getDisplayedCenterColumns(beans) {
+  return beans.visibleCols.centerCols;
+}
+function getDisplayedRightColumns(beans) {
+  return beans.visibleCols.rightCols;
+}
+function getAllDisplayedColumns(beans) {
+  return beans.visibleCols.allCols;
+}
+function getAllDisplayedVirtualColumns(beans) {
+  return beans.colViewport.getViewportColumns();
+}
+function _deepCloneDefinition(object, keysToSkip) {
+  if (!object) {
+    return;
+  }
+  const obj = object;
+  const res = {};
+  Object.keys(obj).forEach((key) => {
+    if (keysToSkip && keysToSkip.indexOf(key) >= 0 || SKIP_JS_BUILTINS.has(key)) {
+      return;
+    }
+    const value = obj[key];
+    const sourceIsSimpleObject = typeof value === "object" && value !== null && value.constructor === Object;
+    if (sourceIsSimpleObject) {
+      res[key] = _deepCloneDefinition(value);
+    } else {
+      res[key] = value;
+    }
+  });
+  return res;
+}
+var ColumnDefFactory = class extends BeanStub {
+  constructor() {
+    super(...arguments);
+    this.beanName = "colDefFactory";
+  }
+  wireBeans(beans) {
+    this.rowGroupColsSvc = beans.rowGroupColsSvc;
+    this.pivotColsSvc = beans.pivotColsSvc;
+  }
+  getColumnDefs(colDefColsList, showingPivotResult, lastOrder, colsList) {
+    const cols = colDefColsList.slice();
+    if (showingPivotResult) {
+      cols.sort((a, b) => lastOrder.indexOf(a) - lastOrder.indexOf(b));
+    } else if (lastOrder) {
+      cols.sort((a, b) => colsList.indexOf(a) - colsList.indexOf(b));
+    }
+    const rowGroupColumns = this.rowGroupColsSvc?.columns;
+    const pivotColumns = this.pivotColsSvc?.columns;
+    return this.buildColumnDefs(cols, rowGroupColumns, pivotColumns);
+  }
+  buildColumnDefs(cols, rowGroupColumns = [], pivotColumns = []) {
+    const res = [];
+    const colGroupDefs = {};
+    cols.forEach((col) => {
+      const colDef = this.createDefFromColumn(col, rowGroupColumns, pivotColumns);
+      let addToResult = true;
+      let childDef = colDef;
+      let pointer = col.getOriginalParent();
+      let lastPointer = null;
+      while (pointer) {
+        let parentDef = null;
+        if (pointer.isPadding()) {
+          pointer = pointer.getOriginalParent();
+          continue;
+        }
+        const existingParentDef = colGroupDefs[pointer.getGroupId()];
+        if (existingParentDef) {
+          existingParentDef.children.push(childDef);
+          addToResult = false;
+          break;
+        }
+        parentDef = this.createDefFromGroup(pointer);
+        if (parentDef) {
+          parentDef.children = [childDef];
+          colGroupDefs[parentDef.groupId] = parentDef;
+          childDef = parentDef;
+          pointer = pointer.getOriginalParent();
+        }
+        if (pointer != null && lastPointer === pointer) {
+          addToResult = false;
+          break;
+        }
+        lastPointer = pointer;
+      }
+      if (addToResult) {
+        res.push(childDef);
+      }
+    });
+    return res;
+  }
+  createDefFromGroup(group) {
+    const defCloned = _deepCloneDefinition(group.getColGroupDef(), ["children"]);
+    if (defCloned) {
+      defCloned.groupId = group.getGroupId();
+    }
+    return defCloned;
+  }
+  createDefFromColumn(col, rowGroupColumns, pivotColumns) {
+    const colDefCloned = _deepCloneDefinition(col.getColDef());
+    colDefCloned.colId = col.getColId();
+    colDefCloned.width = col.getActualWidth();
+    colDefCloned.rowGroup = col.isRowGroupActive();
+    colDefCloned.rowGroupIndex = col.isRowGroupActive() ? rowGroupColumns.indexOf(col) : null;
+    colDefCloned.pivot = col.isPivotActive();
+    colDefCloned.pivotIndex = col.isPivotActive() ? pivotColumns.indexOf(col) : null;
+    colDefCloned.aggFunc = col.isValueActive() ? col.getAggFunc() : null;
+    colDefCloned.hide = col.isVisible() ? void 0 : true;
+    colDefCloned.pinned = col.isPinned() ? col.getPinned() : null;
+    colDefCloned.sort = col.getSort() ? col.getSort() : null;
+    colDefCloned.sortIndex = col.getSortIndex() != null ? col.getSortIndex() : null;
+    return colDefCloned;
+  }
+};
 var ColumnFlexService = class extends BeanStub {
   constructor() {
     super(...arguments);
@@ -22828,6 +23034,34 @@ var ColumnFlexModule = {
   version: VERSION,
   beans: [ColumnFlexService]
 };
+var ColumnApiModule = {
+  moduleName: "ColumnApi",
+  version: VERSION,
+  beans: [ColumnDefFactory],
+  apiFunctions: {
+    getColumnDef,
+    getDisplayNameForColumn,
+    getColumn,
+    getColumns,
+    applyColumnState,
+    getColumnState,
+    resetColumnState,
+    isPinning,
+    isPinningLeft,
+    isPinningRight,
+    getDisplayedColAfter,
+    getDisplayedColBefore,
+    setColumnsVisible,
+    setColumnsPinned,
+    getAllGridColumns,
+    getDisplayedLeftColumns,
+    getDisplayedCenterColumns,
+    getDisplayedRightColumns,
+    getAllDisplayedColumns,
+    getAllDisplayedVirtualColumns,
+    getColumnDefs
+  }
+};
 function _camelCaseToHumanText(camelCase) {
   if (!camelCase || camelCase == null) {
     return null;
@@ -41189,6 +41423,41 @@ const n8nTheme = themeQuartz.withPart(iconSetAlpine).withParams({
   checkboxUncheckedBackgroundColor: "var(--color-background-light-base)",
   checkboxCheckedBackgroundColor: "var(--color-primary)"
 });
+const useDataStorePagination = (options = {}) => {
+  const currentPage = ref(options.initialPage ?? 1);
+  const pageSize = ref(options.initialPageSize ?? 20);
+  const totalItems = ref(0);
+  const pageSizeOptions = options.pageSizeOptions ?? [10, 20, 50];
+  const setTotalItems = (count) => {
+    totalItems.value = count;
+  };
+  const setCurrentPage = async (page) => {
+    currentPage.value = page;
+    if (options.onChange) await options.onChange(currentPage.value, pageSize.value);
+  };
+  const setPageSize = async (size) => {
+    pageSize.value = size;
+    currentPage.value = 1;
+    if (options.onChange) await options.onChange(currentPage.value, pageSize.value);
+  };
+  const ensureItemOnPage = async (itemIndex) => {
+    const itemPage = Math.max(1, Math.ceil(itemIndex / pageSize.value));
+    if (currentPage.value !== itemPage) {
+      currentPage.value = itemPage;
+      if (options.onChange) await options.onChange(currentPage.value, pageSize.value);
+    }
+  };
+  return {
+    currentPage,
+    pageSize,
+    pageSizeOptions,
+    totalItems,
+    setTotalItems,
+    setCurrentPage,
+    setPageSize,
+    ensureItemOnPage
+  };
+};
 const isDataStoreValue = (value) => {
   return value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value instanceof Date;
 };
@@ -41360,7 +41629,81 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { class: "add-column-header-component-wrapper" };
+const _hoisted_1$3 = { class: "datastore-datepicker-wrapper" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "ElDatePickerCellEditor",
+  props: {
+    params: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const pickerRef = ref(null);
+    const dateValue = ref(null);
+    const initialValue = ref(null);
+    const inputWidth = ref(props.params.column.getActualWidth() - 4);
+    onMounted(async () => {
+      const initial = props.params.value;
+      if (initial === null || initial === void 0) {
+        dateValue.value = null;
+      } else if (initial instanceof Date) {
+        const dt = DateTime.fromJSDate(initial);
+        dateValue.value = dt.minus({ minutes: dt.offset }).toJSDate();
+      }
+      initialValue.value = dateValue.value;
+      await nextTick();
+      try {
+        pickerRef.value?.focus?.();
+      } catch {
+      }
+    });
+    function onChange() {
+      props.params.stopEditing();
+    }
+    function onClear() {
+      dateValue.value = null;
+      props.params.stopEditing();
+    }
+    function onKeydown(e) {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        dateValue.value = initialValue.value;
+        props.params.stopEditing();
+      } else if (e.key === "Enter") {
+        e.stopPropagation();
+        props.params.stopEditing();
+      }
+    }
+    __expose({
+      getValue: () => {
+        if (dateValue.value === null) return null;
+        const dt = DateTime.fromJSDate(dateValue.value);
+        return dt.plus({ minutes: dt.offset }).toJSDate();
+      },
+      isPopup: () => true
+    });
+    return (_ctx, _cache) => {
+      const _component_el_date_picker = resolveComponent("el-date-picker");
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        createVNode(_component_el_date_picker, {
+          ref_key: "pickerRef",
+          ref: pickerRef,
+          modelValue: dateValue.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => dateValue.value = $event),
+          type: "datetime",
+          style: normalizeStyle({ width: `${inputWidth.value}px` }),
+          clearable: true,
+          editable: false,
+          teleported: false,
+          placeholder: "",
+          onChange,
+          onClear,
+          onKeydown
+        }, null, 8, ["modelValue", "style"])
+      ]);
+    };
+  }
+});
+const _hoisted_1$2 = { class: "add-column-header-component-wrapper" };
 const _hoisted_2$1 = { class: "add-ds-column-header-popover-content" };
 const _hoisted_3 = { class: "popover-body" };
 const _hoisted_4 = {
@@ -41368,7 +41711,7 @@ const _hoisted_4 = {
   class: "error-message"
 };
 const _hoisted_5 = { class: "add-column-option-content" };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "AddColumnButton",
   props: {
     params: {},
@@ -41441,7 +41784,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         content: unref(i18n).baseText("dataStore.addColumn.label")
       }, {
         default: withCtx(() => [
-          createBaseVNode("div", _hoisted_1$3, [
+          createBaseVNode("div", _hoisted_1$2, [
             createVNode(_component_N8nPopoverReka, {
               id: popoverId.value,
               open: popoverOpen.value,
@@ -41580,7 +41923,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "AddRowButton",
   props: {
     params: {}
@@ -41605,8 +41948,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { class: "n8n-empty-value" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1 = { class: "n8n-empty-value" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "NullEmptyCellRenderer",
   props: {
     params: {}
@@ -41614,84 +41957,652 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", _hoisted_1$2, toDisplayString(props.params.value), 1);
+      return openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(props.params.value), 1);
     };
   }
 });
-const _hoisted_1$1 = { class: "datastore-datepicker-wrapper" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "ElDatePickerCellEditor",
-  props: {
-    params: {}
-  },
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const pickerRef = ref(null);
-    const dateValue = ref(null);
-    const initialValue = ref(null);
-    const inputWidth = ref(props.params.column.getActualWidth() - 4);
-    onMounted(async () => {
-      const initial = props.params.value;
-      if (initial === null || initial === void 0) {
-        dateValue.value = null;
-      } else if (initial instanceof Date) {
-        const dt = DateTime.fromJSDate(initial);
-        dateValue.value = dt.minus({ minutes: dt.offset }).toJSDate();
-      }
-      initialValue.value = dateValue.value;
-      await nextTick();
-      try {
-        pickerRef.value?.focus?.();
-      } catch {
-      }
-    });
-    function onChange() {
-      props.params.stopEditing();
+const getCellClass = (params) => {
+  if (params.data?.id === ADD_ROW_ROW_ID) {
+    return "add-row-cell";
+  }
+  if (params.column.getUserProvidedColDef()?.cellDataType === "boolean") {
+    return "boolean-cell";
+  }
+  return "";
+};
+const createValueGetter = (col) => (params) => {
+  if (params.data?.[col.name] === null || params.data?.[col.name] === void 0) {
+    return null;
+  }
+  if (col.type === "date") {
+    const value = params.data?.[col.name];
+    if (typeof value === "string") {
+      return new Date(value);
     }
-    function onClear() {
-      dateValue.value = null;
-      props.params.stopEditing();
+  }
+  return params.data?.[col.name];
+};
+const createCellRendererSelector = (col) => (params) => {
+  if (params.data?.id === ADD_ROW_ROW_ID || col.id === "add-column") {
+    return {};
+  }
+  let rowValue = params.data?.[col.name];
+  if (rowValue === void 0) {
+    rowValue = null;
+  }
+  if (rowValue === null) {
+    return { component: _sfc_main$2, params: { value: NULL_VALUE } };
+  }
+  if (rowValue === "") {
+    return { component: _sfc_main$2, params: { value: EMPTY_VALUE } };
+  }
+  return void 0;
+};
+const createStringValueSetter = (col, isTextEditorOpen) => (params) => {
+  let originalValue = params.data[col.name];
+  if (originalValue === void 0) {
+    originalValue = null;
+  }
+  let newValue = params.newValue;
+  if (!isDataStoreValue(newValue)) {
+    return false;
+  }
+  if (originalValue === null && newValue === "") {
+    return false;
+  }
+  if (isTextEditorOpen.value && newValue === null) {
+    newValue = "";
+  }
+  params.data[col.name] = newValue;
+  return true;
+};
+const stringCellEditorParams = (params) => ({
+  value: params.value ?? "",
+  maxLength: 999999999
+});
+const dateValueFormatter = (params) => {
+  const value = params.value;
+  if (value === null || value === void 0) return "";
+  return value.toISOString();
+};
+const useDataStoreGridBase = ({
+  gridContainerRef,
+  onDeleteColumn,
+  onAddRowClick,
+  onAddColumn
+}) => {
+  const gridApi = ref(null);
+  const colDefs = ref([]);
+  const isTextEditorOpen = ref(false);
+  const { mapToAGCellType } = useDataStoreTypes();
+  const { copy: copyToClipboard } = useClipboard({ onPaste: onClipboardPaste });
+  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);
     }
-    function onKeydown(e) {
-      if (e.key === "Escape") {
-        e.stopPropagation();
-        dateValue.value = initialValue.value;
-        props.params.stopEditing();
-      } else if (e.key === "Enter") {
-        e.stopPropagation();
-        props.params.stopEditing();
-      }
+  };
+  const setGridData = ({
+    colDefs: colDefs2,
+    rowData
+  }) => {
+    if (colDefs2) {
+      initializedGridApi.value.setGridOption("columnDefs", colDefs2);
     }
-    __expose({
-      getValue: () => {
-        if (dateValue.value === null) return null;
-        const dt = DateTime.fromJSDate(dateValue.value);
-        return dt.plus({ minutes: dt.offset }).toJSDate();
-      },
-      isPopup: () => true
+    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 firstEditableCol = colDefs.value[1];
+    if (!firstEditableCol?.colId) return;
+    initializedGridApi.value.ensureIndexVisible(rowNode.rowIndex);
+    initializedGridApi.value.setFocusedCell(rowNode.rowIndex, firstEditableCol.colId);
+    initializedGridApi.value.startEditingCell({
+      rowIndex: rowNode.rowIndex,
+      colKey: firstEditableCol.colId
     });
-    return (_ctx, _cache) => {
-      const _component_el_date_picker = resolveComponent("el-date-picker");
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
-        createVNode(_component_el_date_picker, {
-          ref_key: "pickerRef",
-          ref: pickerRef,
-          modelValue: dateValue.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => dateValue.value = $event),
-          type: "datetime",
-          style: normalizeStyle({ width: `${inputWidth.value}px` }),
-          clearable: true,
+  };
+  const createColumnDef = (col, extraProps = {}) => {
+    const columnDef = {
+      colId: col.id,
+      field: col.name,
+      headerName: col.name,
+      sortable: true,
+      flex: 1,
+      editable: (params) => params.data?.id !== ADD_ROW_ROW_ID,
+      resizable: true,
+      lockPinned: true,
+      headerComponent: _sfc_main$6,
+      headerComponentParams: { onDelete: onDeleteColumn, allowMenuActions: true },
+      cellEditorPopup: false,
+      cellDataType: mapToAGCellType(col.type),
+      cellClass: getCellClass,
+      valueGetter: createValueGetter(col),
+      cellRendererSelector: createCellRendererSelector(col)
+    };
+    if (col.type === "string") {
+      columnDef.cellEditor = "agLargeTextCellEditor";
+      columnDef.cellEditorPopup = true;
+      columnDef.cellEditorPopupPosition = "over";
+      columnDef.cellEditorParams = stringCellEditorParams;
+      columnDef.valueSetter = createStringValueSetter(col, isTextEditorOpen);
+    } else if (col.type === "date") {
+      columnDef.cellEditorSelector = () => ({
+        component: _sfc_main$5
+      });
+      columnDef.valueFormatter = dateValueFormatter;
+    }
+    return {
+      ...columnDef,
+      ...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 systemDateColumnOptions = {
+      editable: false,
+      suppressMovable: true,
+      lockPinned: true,
+      lockPosition: "right",
+      headerComponentParams: {
+        allowMenuActions: false
+      }
+    };
+    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
+      createColumnDef(
+        {
+          id: DEFAULT_ID_COLUMN_NAME,
+          name: DEFAULT_ID_COLUMN_NAME,
+          type: "string"
+        },
+        {
           editable: false,
-          teleported: false,
-          placeholder: "",
-          onChange,
-          onClear,
-          onKeydown
-        }, null, 8, ["modelValue", "style"])
-      ]);
+          sortable: false,
+          suppressMovable: true,
+          headerComponent: null,
+          lockPosition: true,
+          minWidth: DATA_STORE_ID_COLUMN_WIDTH,
+          maxWidth: DATA_STORE_ID_COLUMN_WIDTH,
+          resizable: false,
+          cellClass: (params) => params.data?.id === ADD_ROW_ROW_ID ? "add-row-cell" : "id-column",
+          cellRendererSelector: (params) => {
+            if (params.value === ADD_ROW_ROW_ID) {
+              return {
+                component: _sfc_main$3,
+                params: { onClick: onAddRowClick }
+              };
+            }
+            return void 0;
+          }
+        }
+      ),
+      // Append other columns
+      ...orderBy(dataStoreColumns, "index").map((col) => createColumnDef(col)),
+      createColumnDef(
+        {
+          index: dataStoreColumns.length + 1,
+          id: "createdAt",
+          name: "createdAt",
+          type: "date"
+        },
+        systemDateColumnOptions
+      ),
+      createColumnDef(
+        {
+          index: dataStoreColumns.length + 2,
+          id: "updatedAt",
+          name: "updatedAt",
+          type: "date"
+        },
+        systemDateColumnOptions
+      ),
+      createColumnDef(
+        {
+          index: dataStoreColumns.length + 3,
+          id: "add-column",
+          name: "Add Column",
+          type: "string"
+        },
+        {
+          editable: false,
+          suppressMovable: true,
+          lockPinned: true,
+          lockPosition: "right",
+          resizable: false,
+          headerComponent: _sfc_main$4,
+          headerComponentParams: { onAddColumn }
+        }
+      )
+    ];
+  };
+  const loadColumns = (dataStoreColumns) => {
+    colDefs.value = getColumnDefinitions(dataStoreColumns);
+    setGridData({ colDefs: colDefs.value });
+  };
+  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 = [
+      ...colDefs.value.slice(0, -1),
+      createColumnDef(column),
+      ...colDefs.value.slice(-1)
+    ];
+    setGridData({ colDefs: colDefs.value });
+  };
+  const moveColumn = (oldIndex, newIndex) => {
+    const fromIndex = oldIndex - 1;
+    const columnToBeMoved = colDefs.value[fromIndex];
+    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);
+    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,
+    createColumnDef,
+    loadColumns,
+    colDefs,
+    deleteColumn,
+    insertColumnAtIndex,
+    addColumn,
+    moveColumn,
+    gridApi: initializedGridApi,
+    handleCopyFocusedCell,
+    onCellClicked,
+    resetLastFocusedCell,
+    currentSortBy,
+    currentSortOrder,
+    onSortChanged: onSortChanged2
+  };
+};
+const useDataStoreSelection = ({
+  gridApi
+}) => {
+  const selectedRowIds = ref(/* @__PURE__ */ new Set());
+  const selectedCount = computed(() => selectedRowIds.value.size);
+  const rowSelection = {
+    mode: "multiRow",
+    enableClickSelection: false,
+    checkboxes: (params) => params.data?.id !== ADD_ROW_ROW_ID,
+    isRowSelectable: (params) => params.data?.id !== ADD_ROW_ROW_ID
+  };
+  const onSelectionChanged = () => {
+    const selectedNodes = gridApi.value.getSelectedNodes();
+    const newSelectedIds = /* @__PURE__ */ new Set();
+    selectedNodes.forEach((node) => {
+      if (typeof node.data?.id === "number") {
+        newSelectedIds.add(node.data.id);
+      }
+    });
+    selectedRowIds.value = newSelectedIds;
+  };
+  const handleClearSelection = () => {
+    selectedRowIds.value = /* @__PURE__ */ new Set();
+    gridApi.value.deselectAll();
+  };
+  return {
+    selectedRowIds,
+    selectedCount,
+    rowSelection,
+    onSelectionChanged,
+    handleClearSelection
+  };
+};
+const useDataStoreOperations = ({
+  colDefs,
+  rowData,
+  deleteGridColumn,
+  addGridColumn,
+  setGridData,
+  insertGridColumnAtIndex,
+  moveGridColumn,
+  dataStoreId,
+  projectId,
+  gridApi,
+  totalItems,
+  setTotalItems,
+  ensureItemOnPage,
+  focusFirstEditableCell,
+  toggleSave,
+  currentPage,
+  pageSize,
+  currentSortBy,
+  currentSortOrder,
+  handleClearSelection,
+  selectedRowIds,
+  handleCopyFocusedCell
+}) => {
+  const i18n = useI18n();
+  const toast = useToast();
+  const message = useMessage();
+  const dataStoreStore = useDataStoreStore();
+  const contentLoading = ref(false);
+  const telemetry2 = useTelemetry();
+  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", {
+        interpolate: { name: columnToDelete.headerName ?? "" }
+      }),
+      i18n.baseText("dataStore.deleteColumn.confirm.title"),
+      {
+        confirmButtonText: i18n.baseText("generic.delete"),
+        cancelButtonText: i18n.baseText("generic.cancel")
+      }
+    );
+    if (promptResponse !== MODAL_CONFIRM) {
+      return;
+    }
+    const columnToDeleteIndex = colDefs.value.findIndex((col) => col.colId === columnId);
+    deleteGridColumn(columnId);
+    const rowDataOldValue = [...rowData.value];
+    rowData.value = rowData.value.map((row) => {
+      const { [columnToDelete.field]: _, ...rest } = row;
+      return rest;
+    });
+    setGridData({ rowData: rowData.value });
+    try {
+      await dataStoreStore.deleteDataStoreColumn(dataStoreId, projectId, columnId);
+      telemetry2.track("User deleted data table column", {
+        column_id: columnId,
+        column_type: columnToDelete.cellDataType,
+        data_table_id: dataStoreId
+      });
+    } catch (error) {
+      toast.showError(error, i18n.baseText("dataStore.deleteColumn.error"));
+      insertGridColumnAtIndex(columnToDelete, columnToDeleteIndex);
+      rowData.value = rowDataOldValue;
+      setGridData({ rowData: rowData.value });
+    }
   }
-});
+  async function onAddColumn(column) {
+    try {
+      const newColumn = await dataStoreStore.addDataStoreColumn(dataStoreId, projectId, column);
+      addGridColumn(newColumn);
+      rowData.value = rowData.value.map((row) => {
+        return { ...row, [newColumn.name]: null };
+      });
+      setGridData({ rowData: rowData.value });
+      telemetry2.track("User added data table column", {
+        column_id: newColumn.id,
+        column_type: newColumn.type,
+        data_table_id: dataStoreId
+      });
+      return true;
+    } catch (error) {
+      toast.showError(error, i18n.baseText("dataStore.addColumn.error"));
+      return false;
+    }
+  }
+  const onColumnMoved = async (moveEvent) => {
+    if (!moveEvent.finished || moveEvent.source !== "uiColumnMoved" || moveEvent.toIndex === void 0 || !moveEvent.column) {
+      return;
+    }
+    const oldIndex = colDefs.value.findIndex((col) => col.colId === moveEvent.column.getColId());
+    const newIndex = moveEvent.toIndex - 2;
+    try {
+      await dataStoreStore.moveDataStoreColumn(
+        dataStoreId,
+        projectId,
+        moveEvent.column.getColId(),
+        newIndex
+      );
+      moveGridColumn(oldIndex, newIndex);
+    } catch (error) {
+      toast.showError(error, i18n.baseText("dataStore.moveColumn.error"));
+      gridApi.value.moveColumnByIndex(moveEvent.toIndex, oldIndex + 1);
+    }
+  };
+  async function onAddRowClick() {
+    try {
+      await ensureItemOnPage(totalItems.value + 1);
+      contentLoading.value = true;
+      toggleSave(true);
+      const insertedRow = await dataStoreStore.insertEmptyRow(dataStoreId, 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
+      });
+    } catch (error) {
+      toast.showError(error, i18n.baseText("dataStore.addRow.error"));
+    } finally {
+      toggleSave(false);
+      contentLoading.value = false;
+    }
+  }
+  const onCellValueChanged = async (params) => {
+    const { data, api, oldValue, colDef } = params;
+    const value = params.data[colDef.field];
+    if (value === void 0 || value === oldValue) {
+      return;
+    }
+    if (typeof data.id !== "number") {
+      throw new Error("Expected row id to be a number");
+    }
+    const fieldName = String(colDef.field);
+    const id = data.id;
+    try {
+      toggleSave(true);
+      await dataStoreStore.updateRow(dataStoreId, projectId, id, {
+        [fieldName]: value
+      });
+      telemetry2.track("User edited data table content", {
+        data_table_id: dataStoreId,
+        column_id: colDef.colId,
+        column_type: colDef.cellDataType
+      });
+    } catch (error) {
+      const validOldValue = isDataStoreValue(oldValue) ? oldValue : null;
+      const revertedData = { ...data, [fieldName]: validOldValue };
+      api.applyTransaction({
+        update: [revertedData]
+      });
+      toast.showError(error, i18n.baseText("dataStore.updateRow.error"));
+    } finally {
+      toggleSave(false);
+    }
+  };
+  async function fetchDataStoreRows() {
+    try {
+      contentLoading.value = true;
+      const fetchedRows = await dataStoreStore.fetchDataStoreContent(
+        dataStoreId,
+        projectId,
+        currentPage.value,
+        pageSize.value,
+        `${currentSortBy.value}:${currentSortOrder.value}`
+      );
+      rowData.value = fetchedRows.data;
+      setTotalItems(fetchedRows.count);
+      setGridData({ rowData: rowData.value, colDefs: colDefs.value });
+      handleClearSelection();
+    } catch (error) {
+      toast.showError(error, i18n.baseText("dataStore.fetchContent.error"));
+    } finally {
+      contentLoading.value = false;
+    }
+  }
+  const handleDeleteSelected = async () => {
+    if (selectedRowIds.value.size === 0) return;
+    const confirmResponse = await message.confirm(
+      i18n.baseText("dataStore.deleteRows.confirmation", {
+        adjustToNumber: selectedRowIds.value.size,
+        interpolate: { count: selectedRowIds.value.size }
+      }),
+      i18n.baseText("dataStore.deleteRows.title"),
+      {
+        confirmButtonText: i18n.baseText("generic.delete"),
+        cancelButtonText: i18n.baseText("generic.cancel")
+      }
+    );
+    if (confirmResponse !== MODAL_CONFIRM) {
+      return;
+    }
+    try {
+      toggleSave(true);
+      const idsToDelete = Array.from(selectedRowIds.value);
+      await dataStoreStore.deleteRows(dataStoreId, projectId, idsToDelete);
+      await fetchDataStoreRows();
+      toast.showToast({
+        title: i18n.baseText("dataStore.deleteRows.success"),
+        message: "",
+        type: "success"
+      });
+      telemetry2.track("User deleted rows in data table", {
+        data_table_id: dataStoreId,
+        deleted_row_count: idsToDelete.length
+      });
+    } catch (error) {
+      toast.showError(error, i18n.baseText("dataStore.deleteRows.error"));
+    } finally {
+      toggleSave(false);
+    }
+  };
+  const onCellKeyDown = async (params) => {
+    if (params.api.getEditingCells().length > 0) {
+      return;
+    }
+    const event = params.event;
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "c") {
+      event.preventDefault();
+      await handleCopyFocusedCell(params);
+      return;
+    }
+    if (event.key !== "Delete" && event.key !== "Backspace" || selectedRowIds.value.size === 0) {
+      return;
+    }
+    event.preventDefault();
+    await handleDeleteSelected();
+  };
+  return {
+    onDeleteColumn,
+    onAddColumn,
+    onColumnMoved,
+    onAddRowClick,
+    contentLoading,
+    onCellValueChanged,
+    fetchDataStoreRows,
+    handleDeleteSelected,
+    onCellKeyDown
+  };
+};
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "DataStoreTable",
   props: {
@@ -41715,572 +42626,71 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       UndoRedoEditModule,
       CellStyleModule,
       PinnedRowModule,
-      ScrollApiModule
+      ScrollApiModule,
+      ColumnApiModule
     ]);
     const props = __props;
     const emit = __emit;
-    const i18n = useI18n();
-    const toast = useToast();
-    const message = useMessage();
-    const { mapToAGCellType } = useDataStoreTypes();
-    const dataStoreStore = useDataStoreStore();
-    const { copy: copyToClipboard } = useClipboard({ onPaste: onClipboardPaste });
-    const gridApi = ref(null);
-    const colDefs = ref([]);
+    const gridContainerRef = useTemplateRef("gridContainerRef");
+    const dataStoreGridBase = useDataStoreGridBase({
+      gridContainerRef,
+      onDeleteColumn: onDeleteColumnFunction,
+      onAddRowClick: onAddRowClickFunction,
+      onAddColumn: onAddColumnFunction
+    });
     const rowData = ref([]);
-    const rowSelection = {
-      mode: "multiRow",
-      enableClickSelection: false,
-      checkboxes: (params) => params.data?.id !== ADD_ROW_ROW_ID,
-      isRowSelectable: (params) => params.data?.id !== ADD_ROW_ROW_ID
-    };
-    const currentSortBy = ref(DEFAULT_ID_COLUMN_NAME);
-    const currentSortOrder = ref("asc");
-    const contentLoading = ref(false);
-    const lastFocusedCell = ref(null);
-    const isTextEditorOpen = ref(false);
-    const gridContainer = useTemplateRef("gridContainer");
-    const pageSizeOptions = [10, 20, 50];
-    const currentPage = ref(1);
-    const pageSize = ref(20);
-    const totalItems = ref(0);
-    const rows = ref([]);
-    const selectedRowIds = ref(/* @__PURE__ */ new Set());
-    const selectedCount = computed(() => selectedRowIds.value.size);
     const hasRecords = computed(() => rowData.value.length > 0);
-    const onGridReady = (params) => {
-      gridApi.value = params.api;
-      if (gridContainer?.value) {
-        params.api.setGridOption("popupParent", gridContainer.value);
-      }
-    };
-    const refreshGridData = () => {
-      if (!gridApi.value) return;
-      gridApi.value.setGridOption("columnDefs", colDefs.value);
-      gridApi.value.setGridOption("rowData", rowData.value);
-      gridApi.value.setGridOption("pinnedBottomRowData", [{ id: ADD_ROW_ROW_ID }]);
-    };
-    const focusFirstEditableCell = (rowId) => {
-      if (!gridApi.value) return;
-      const rowNode = gridApi.value.getRowNode(String(rowId));
-      if (rowNode?.rowIndex === null) return;
-      const firstEditableCol = colDefs.value[1];
-      if (!firstEditableCol?.colId) return;
-      gridApi.value.ensureIndexVisible(rowNode.rowIndex);
-      gridApi.value.setFocusedCell(rowNode.rowIndex, firstEditableCol.colId);
-      gridApi.value.startEditingCell({ rowIndex: rowNode.rowIndex, colKey: firstEditableCol.colId });
-    };
-    const setCurrentPage = async (page) => {
-      currentPage.value = page;
-      await fetchDataStoreContent();
-    };
-    const setPageSize = async (size) => {
-      pageSize.value = size;
-      currentPage.value = 1;
-      await fetchDataStoreContent();
-    };
-    const onDeleteColumn = async (columnId) => {
-      if (!gridApi.value) return;
-      const columnToDelete = colDefs.value.find((col) => col.colId === columnId);
-      if (!columnToDelete) return;
-      const promptResponse = await message.confirm(
-        i18n.baseText("dataStore.deleteColumn.confirm.message", {
-          interpolate: { name: columnToDelete.headerName ?? "" }
-        }),
-        i18n.baseText("dataStore.deleteColumn.confirm.title"),
-        {
-          confirmButtonText: i18n.baseText("generic.delete"),
-          cancelButtonText: i18n.baseText("generic.cancel")
-        }
-      );
-      if (promptResponse !== MODAL_CONFIRM) {
-        return;
-      }
-      const columnToDeleteIndex = colDefs.value.findIndex((col) => col.colId === columnId);
-      colDefs.value = colDefs.value.filter((def) => def.colId !== columnId);
-      const rowDataOldValue = [...rowData.value];
-      rowData.value = rowData.value.map((row) => {
-        const { [columnToDelete.field]: _, ...rest } = row;
-        return rest;
-      });
-      refreshGridData();
-      try {
-        await dataStoreStore.deleteDataStoreColumn(
-          props.dataStore.id,
-          props.dataStore.projectId,
-          columnId
-        );
-      } catch (error) {
-        toast.showError(error, i18n.baseText("dataStore.deleteColumn.error"));
-        colDefs.value.splice(columnToDeleteIndex, 0, columnToDelete);
-        rowData.value = rowDataOldValue;
-        refreshGridData();
-      }
-    };
-    const onAddColumn = async (column) => {
-      try {
-        const newColumn = await dataStoreStore.addDataStoreColumn(
-          props.dataStore.id,
-          props.dataStore.projectId,
-          column
-        );
-        if (!newColumn) {
-          throw new Error(i18n.baseText("generic.unknownError"));
-        }
-        colDefs.value = [
-          ...colDefs.value.slice(0, -1),
-          createColumnDef(newColumn),
-          ...colDefs.value.slice(-1)
-        ];
-        rowData.value = rowData.value.map((row) => {
-          return { ...row, [newColumn.name]: null };
-        });
-        refreshGridData();
-        return true;
-      } catch (error) {
-        toast.showError(error, i18n.baseText("dataStore.addColumn.error"));
-        return false;
-      }
-    };
-    const createColumnDef = (col, extraProps = {}) => {
-      const columnDef = {
-        colId: col.id,
-        field: col.name,
-        headerName: col.name,
-        sortable: true,
-        flex: 1,
-        editable: (params) => params.data?.id !== ADD_ROW_ROW_ID,
-        resizable: true,
-        lockPinned: true,
-        headerComponent: _sfc_main$6,
-        headerComponentParams: { onDelete: onDeleteColumn, allowMenuActions: true },
-        cellEditorPopup: false,
-        cellDataType: mapToAGCellType(col.type),
-        cellClass: (params) => {
-          if (params.data?.id === ADD_ROW_ROW_ID) {
-            return "add-row-cell";
-          }
-          if (params.column.getUserProvidedColDef()?.cellDataType === "boolean") {
-            return "boolean-cell";
-          }
-          return "";
-        },
-        valueGetter: (params) => {
-          if (params.data?.[col.name] === null || params.data?.[col.name] === void 0) {
-            return null;
-          }
-          if (col.type === "date") {
-            const value = params.data?.[col.name];
-            if (typeof value === "string") {
-              return new Date(value);
-            }
-          }
-          return params.data?.[col.name];
-        },
-        cellRendererSelector: (params) => {
-          if (params.data?.id === ADD_ROW_ROW_ID || col.id === "add-column") {
-            return {};
-          }
-          let rowValue = params.data?.[col.name];
-          if (rowValue === void 0) {
-            rowValue = null;
-          }
-          if (rowValue === null) {
-            return { component: _sfc_main$3, params: { value: NULL_VALUE } };
-          }
-          if (rowValue === "") {
-            return { component: _sfc_main$3, params: { value: EMPTY_VALUE } };
-          }
-          return void 0;
-        }
-      };
-      if (col.type === "string") {
-        columnDef.cellEditor = "agLargeTextCellEditor";
-        columnDef.cellEditorPopup = true;
-        columnDef.cellEditorPopupPosition = "over";
-        columnDef.cellEditorParams = (params) => ({
-          value: params.value ?? "",
-          // Rely on the backend to limit the length of the value
-          maxLength: 999999999
-        });
-        columnDef.valueSetter = (params) => {
-          let originalValue = params.data[col.name];
-          if (originalValue === void 0) {
-            originalValue = null;
-          }
-          let newValue = params.newValue;
-          if (!isDataStoreValue(newValue)) {
-            return false;
-          }
-          if (originalValue === null && newValue === "") {
-            return false;
-          }
-          if (isTextEditorOpen.value && newValue === null) {
-            newValue = "";
-          }
-          params.data[col.name] = newValue;
-          return true;
-        };
-      }
-      if (col.type === "date") {
-        columnDef.cellEditorSelector = () => ({
-          component: _sfc_main$2
-        });
-        columnDef.valueFormatter = (params) => {
-          const value = params.value;
-          if (value === null || value === void 0) return "";
-          return value.toISOString();
-        };
-      }
-      return {
-        ...columnDef,
-        ...extraProps
-      };
-    };
-    const onColumnMoved = async (moveEvent) => {
-      if (!moveEvent.finished || moveEvent.source !== "uiColumnMoved" || moveEvent.toIndex === void 0 || !moveEvent.column) {
-        return;
-      }
-      const oldIndex = colDefs.value.findIndex((col) => col.colId === moveEvent.column.getColId());
-      try {
-        await dataStoreStore.moveDataStoreColumn(
-          props.dataStore.id,
-          props.dataStore.projectId,
-          moveEvent.column.getColId(),
-          moveEvent.toIndex - 2
-          // ag grid index start from 1 and also we need to account for the id column
-        );
-        const fromIndex = oldIndex - 1;
-        const toIndex = moveEvent.toIndex - 2;
-        const middleWithIndex = colDefs.value.slice(1, -1).map((col, index) => ({ ...col, index }));
-        const reorderedMiddle = reorderItem(middleWithIndex, fromIndex, toIndex).sort((a, b) => a.index - b.index).map(({ index, ...col }) => col);
-        colDefs.value = [colDefs.value[0], ...reorderedMiddle, colDefs.value[colDefs.value.length - 1]];
-        refreshGridData();
-      } catch (error) {
-        toast.showError(error, i18n.baseText("dataStore.moveColumn.error"));
-        gridApi.value?.moveColumnByIndex(moveEvent.toIndex, oldIndex);
-      }
-    };
-    const onAddRowClick = async () => {
-      try {
-        if (currentPage.value * pageSize.value < totalItems.value + 1) {
-          await setCurrentPage(Math.ceil((totalItems.value + 1) / pageSize.value));
-        }
-        contentLoading.value = true;
-        emit("toggleSave", true);
-        const insertedRow = await dataStoreStore.insertEmptyRow(props.dataStore);
-        const newRow = insertedRow;
-        rowData.value.push(newRow);
-        totalItems.value += 1;
-        refreshGridData();
-        await nextTick();
-        focusFirstEditableCell(newRow.id);
-      } catch (error) {
-        toast.showError(error, i18n.baseText("dataStore.addRow.error"));
-      } finally {
-        emit("toggleSave", false);
-        contentLoading.value = false;
-      }
-    };
-    const initColumnDefinitions = () => {
-      const systemDateColumnOptions = {
-        editable: false,
-        suppressMovable: true,
-        lockPinned: true,
-        lockPosition: "right",
-        headerComponentParams: {
-          allowMenuActions: false
-        }
-      };
-      colDefs.value = [
-        // 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
-        createColumnDef(
-          {
-            id: DEFAULT_ID_COLUMN_NAME,
-            name: DEFAULT_ID_COLUMN_NAME,
-            type: "string"
-          },
-          {
-            editable: false,
-            sortable: false,
-            suppressMovable: true,
-            headerComponent: null,
-            lockPosition: true,
-            minWidth: DATA_STORE_ID_COLUMN_WIDTH,
-            maxWidth: DATA_STORE_ID_COLUMN_WIDTH,
-            resizable: false,
-            cellClass: (params) => params.data?.id === ADD_ROW_ROW_ID ? "add-row-cell" : "id-column",
-            cellRendererSelector: (params) => {
-              if (params.value === ADD_ROW_ROW_ID) {
-                return {
-                  component: _sfc_main$4,
-                  params: { onClick: onAddRowClick }
-                };
-              }
-              return void 0;
-            }
-          }
-        ),
-        // Append other columns
-        ...orderBy(props.dataStore.columns, "index").map((col) => createColumnDef(col)),
-        createColumnDef(
-          {
-            index: props.dataStore.columns.length + 1,
-            id: "createdAt",
-            name: "createdAt",
-            type: "date"
-          },
-          systemDateColumnOptions
-        ),
-        createColumnDef(
-          {
-            index: props.dataStore.columns.length + 2,
-            id: "updatedAt",
-            name: "updatedAt",
-            type: "date"
-          },
-          systemDateColumnOptions
-        ),
-        createColumnDef(
-          {
-            index: props.dataStore.columns.length + 3,
-            id: "add-column",
-            name: "Add Column",
-            type: "string"
-          },
-          {
-            editable: false,
-            suppressMovable: true,
-            lockPinned: true,
-            lockPosition: "right",
-            resizable: false,
-            headerComponent: _sfc_main$5,
-            headerComponentParams: { onAddColumn }
-          }
-        )
-      ];
-    };
-    const onCellValueChanged = async (params) => {
-      const { data, api, oldValue, colDef } = params;
-      const value = params.data[colDef.field];
-      if (value === void 0 || value === oldValue) {
-        return;
-      }
-      if (typeof data.id !== "number") {
-        throw new Error("Expected row id to be a number");
-      }
-      const fieldName = String(colDef.field);
-      const id = data.id;
-      try {
-        emit("toggleSave", true);
-        await dataStoreStore.updateRow(props.dataStore.id, props.dataStore.projectId, id, {
-          [fieldName]: value
-        });
-      } catch (error) {
-        const validOldValue = isDataStoreValue(oldValue) ? oldValue : null;
-        const revertedData = { ...data, [fieldName]: validOldValue };
-        api.applyTransaction({
-          update: [revertedData]
-        });
-        toast.showError(error, i18n.baseText("dataStore.updateRow.error"));
-      } finally {
-        emit("toggleSave", 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 fetchDataStoreContent = async () => {
-      try {
-        contentLoading.value = true;
-        const fetchedRows = await dataStoreStore.fetchDataStoreContent(
-          props.dataStore.id,
-          props.dataStore.projectId,
-          currentPage.value,
-          pageSize.value,
-          `${currentSortBy.value}:${currentSortOrder.value}`
-        );
-        rowData.value = fetchedRows.data;
-        totalItems.value = fetchedRows.count;
-        refreshGridData();
-        handleClearSelection();
-      } catch (error) {
-        toast.showError(error, i18n.baseText("dataStore.fetchContent.error"));
-      } finally {
-        contentLoading.value = false;
-        if (gridApi.value) {
-          gridApi.value.refreshHeader();
-        }
-      }
-    };
-    onClickOutside(gridContainer, () => {
-      resetLastFocusedCell();
-      gridApi.value?.clearFocusedCell();
-    });
-    function onClipboardPaste(data) {
-      if (!gridApi.value) return;
-      const focusedCell = gridApi.value.getFocusedCell();
-      const isEditing2 = gridApi.value.getEditingCells().length > 0;
-      if (!focusedCell || isEditing2) return;
-      const row = gridApi.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 resetLastFocusedCell = () => {
-      lastFocusedCell.value = null;
-    };
-    const initialize = async () => {
-      initColumnDefinitions();
-      await fetchDataStoreContent();
-    };
-    const onSortChanged2 = async (event) => {
-      const oldSortBy = currentSortBy.value;
-      const oldSortOrder = currentSortOrder.value;
-      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";
-      }
-      if (oldSortBy !== currentSortBy.value || oldSortOrder !== currentSortOrder.value) {
-        currentPage.value = 1;
-        await fetchDataStoreContent();
-      }
-    };
-    onMounted(async () => {
-      await initialize();
+    const pagination = useDataStorePagination({ onChange: fetchDataStoreRowsFunction });
+    const selection = useDataStoreSelection({
+      gridApi: dataStoreGridBase.gridApi
+    });
+    const dataStoreOperations = useDataStoreOperations({
+      colDefs: dataStoreGridBase.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,
+      totalItems: pagination.totalItems,
+      setTotalItems: pagination.setTotalItems,
+      ensureItemOnPage: pagination.ensureItemOnPage,
+      focusFirstEditableCell: dataStoreGridBase.focusFirstEditableCell,
+      toggleSave: emit.bind(null, "toggleSave"),
+      currentPage: pagination.currentPage,
+      pageSize: pagination.pageSize,
+      currentSortBy: dataStoreGridBase.currentSortBy,
+      currentSortOrder: dataStoreGridBase.currentSortOrder,
+      handleClearSelection: selection.handleClearSelection,
+      selectedRowIds: selection.selectedRowIds,
+      handleCopyFocusedCell: dataStoreGridBase.handleCopyFocusedCell
+    });
+    async function onDeleteColumnFunction(columnId) {
+      await dataStoreOperations.onDeleteColumn(columnId);
+    }
+    async function onAddColumnFunction(column) {
+      return await dataStoreOperations.onAddColumn(column);
+    }
+    async function onAddRowClickFunction() {
+      await dataStoreOperations.onAddRowClick();
+    }
+    async function fetchDataStoreRowsFunction() {
+      await dataStoreOperations.fetchDataStoreRows();
+    }
+    const initialize = async (params) => {
+      dataStoreGridBase.onGridReady(params);
+      dataStoreGridBase.loadColumns(props.dataStore.columns);
+      await dataStoreOperations.fetchDataStoreRows();
+    };
+    watch([dataStoreGridBase.currentSortBy, dataStoreGridBase.currentSortOrder], async () => {
+      await pagination.setCurrentPage(1);
     });
-    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 onSelectionChanged = () => {
-      if (!gridApi.value) return;
-      const selectedNodes = gridApi.value.getSelectedNodes();
-      const newSelectedIds = /* @__PURE__ */ new Set();
-      selectedNodes.forEach((node) => {
-        if (typeof node.data?.id === "number") {
-          newSelectedIds.add(node.data.id);
-        }
-      });
-      selectedRowIds.value = newSelectedIds;
-    };
-    const onCellKeyDown = async (params) => {
-      if (params.api.getEditingCells().length > 0) {
-        return;
-      }
-      const event = params.event;
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "c") {
-        event.preventDefault();
-        await handleCopyFocusedCell(params);
-        return;
-      }
-      if (event.key !== "Delete" && event.key !== "Backspace" || selectedRowIds.value.size === 0) {
-        return;
-      }
-      event.preventDefault();
-      await handleDeleteSelected();
-    };
-    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 handleDeleteSelected = async () => {
-      if (selectedRowIds.value.size === 0) return;
-      const confirmResponse = await message.confirm(
-        i18n.baseText("dataStore.deleteRows.confirmation", {
-          adjustToNumber: selectedRowIds.value.size,
-          interpolate: { count: selectedRowIds.value.size }
-        }),
-        i18n.baseText("dataStore.deleteRows.title"),
-        {
-          confirmButtonText: i18n.baseText("generic.delete"),
-          cancelButtonText: i18n.baseText("generic.cancel")
-        }
-      );
-      if (confirmResponse !== MODAL_CONFIRM) {
-        return;
-      }
-      try {
-        emit("toggleSave", true);
-        const idsToDelete = Array.from(selectedRowIds.value);
-        await dataStoreStore.deleteRows(props.dataStore.id, props.dataStore.projectId, idsToDelete);
-        rows.value = rows.value.filter((row) => !selectedRowIds.value.has(row.id));
-        rowData.value = rows.value;
-        await fetchDataStoreContent();
-        toast.showToast({
-          title: i18n.baseText("dataStore.deleteRows.success"),
-          message: "",
-          type: "success"
-        });
-      } catch (error) {
-        toast.showError(error, i18n.baseText("dataStore.deleteRows.error"));
-      } finally {
-        emit("toggleSave", false);
-      }
-    };
-    const handleClearSelection = () => {
-      selectedRowIds.value = /* @__PURE__ */ new Set();
-      if (gridApi.value) {
-        gridApi.value.deselectAll();
-      }
-    };
     __expose({
-      addRow: onAddRowClick,
-      addColumn: onAddColumn
+      addRow: dataStoreOperations.onAddRowClick,
+      addColumn: dataStoreOperations.onAddColumn
     });
     return (_ctx, _cache) => {
       const _component_el_pagination = resolveComponent("el-pagination");
@@ -42288,8 +42698,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(_ctx.$style.wrapper)
       }, [
         createBaseVNode("div", {
-          ref_key: "gridContainer",
-          ref: gridContainer,
+          ref_key: "gridContainerRef",
+          ref: gridContainerRef,
           class: normalizeClass([_ctx.$style["grid-container"], { [_ctx.$style["has-records"]]: hasRecords.value }]),
           "data-test-id": "data-store-grid"
         }, [
@@ -42301,48 +42711,48 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             "animate-rows": false,
             theme: unref(n8nTheme),
             "suppress-drag-leave-hides-columns": true,
-            loading: contentLoading.value,
-            "row-selection": rowSelection,
+            loading: unref(dataStoreOperations).contentLoading.value,
+            "row-selection": unref(selection).rowSelection,
             "get-row-id": (params) => String(params.data.id),
             "stop-editing-when-cells-lose-focus": true,
             "undo-redo-cell-editing": true,
             "suppress-multi-sort": true,
-            onGridReady,
-            onCellValueChanged,
-            onColumnMoved,
-            onCellClicked,
-            onCellEditingStarted,
-            onCellEditingStopped,
-            onColumnHeaderClicked: resetLastFocusedCell,
-            onSelectionChanged,
-            onSortChanged: onSortChanged2,
-            onCellKeyDown
-          }, null, 8, ["row-height", "header-height", "theme", "loading", "get-row-id"])
+            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,
+            onSelectionChanged: unref(selection).onSelectionChanged,
+            onSortChanged: unref(dataStoreGridBase).onSortChanged,
+            onCellKeyDown: unref(dataStoreOperations).onCellKeyDown
+          }, null, 8, ["row-height", "header-height", "theme", "loading", "row-selection", "get-row-id", "onCellValueChanged", "onColumnMoved", "onCellClicked", "onCellEditingStarted", "onCellEditingStopped", "onColumnHeaderClicked", "onSelectionChanged", "onSortChanged", "onCellKeyDown"])
         ], 2),
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.footer)
         }, [
           createVNode(_component_el_pagination, {
-            "current-page": currentPage.value,
+            "current-page": unref(pagination).currentPage,
             "onUpdate:currentPage": [
-              _cache[0] || (_cache[0] = ($event) => currentPage.value = $event),
-              setCurrentPage
+              _cache[0] || (_cache[0] = ($event) => unref(pagination).currentPage = $event),
+              unref(pagination).setCurrentPage
             ],
-            "page-size": pageSize.value,
-            "onUpdate:pageSize": _cache[1] || (_cache[1] = ($event) => pageSize.value = $event),
+            "page-size": unref(pagination).pageSize,
+            "onUpdate:pageSize": _cache[1] || (_cache[1] = ($event) => unref(pagination).pageSize = $event),
             "data-test-id": "data-store-content-pagination",
             background: "",
-            total: totalItems.value,
-            "page-sizes": pageSizeOptions,
+            total: unref(pagination).totalItems,
+            "page-sizes": unref(pagination).pageSizeOptions,
             layout: "total, prev, pager, next, sizes",
-            onSizeChange: setPageSize
-          }, null, 8, ["current-page", "page-size", "total"])
+            onSizeChange: unref(pagination).setPageSize
+          }, null, 8, ["current-page", "page-size", "total", "page-sizes", "onUpdate:currentPage", "onSizeChange"])
         ], 2),
         createVNode(SelectedItemsInfo, {
-          "selected-count": selectedCount.value,
-          onDeleteSelected: handleDeleteSelected,
-          onClearSelection: handleClearSelection
-        }, null, 8, ["selected-count"])
+          "selected-count": unref(selection).selectedCount.value,
+          onDeleteSelected: unref(dataStoreOperations).handleDeleteSelected,
+          onClearSelection: unref(selection).handleClearSelection
+        }, null, 8, ["selected-count", "onDeleteSelected", "onClearSelection"])
       ], 2);
     };
   }
@@ -42484,7 +42894,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }, 8, ["onClick"]),
-              createVNode(_sfc_main$5, {
+              createVNode(_sfc_main$4, {
                 "use-text-trigger": true,
                 "popover-id": "ds-details-add-column-popover",
                 params: { onAddColumn }