n8n-editor-ui 1.109.2 → 1.110.1

package/dist/assets/{DataStoreDetailsView-BzaPADj6.js → DataStoreDetailsView-BZ7cLl6L.js}

@@ -1,9 +1,10 @@
-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, gb as PROJECT_DATA_STORES, Y as nextTick, _ as _export_sfc, e8 as mergeModels, c0 as toRefs, e9 as useModel, o as onMounted, es as getCurrentInstance, gz as markRaw, c6 as onUnmounted, gA as mergeDefaults, eP as toRaw, gB as render, b$ as isRef, gC as isReactive, fO as isProxy, P as useDebounce, y as N8nPopoverReka, d_ as N8nInputLabel, cT as N8nInput, b8 as withKeys, gD as MAX_COLUMN_NAME_LENGTH, p as N8nText, k as createTextVNode, a9 as Tooltip, N as N8nIcon, e1 as N8nSelect, F as Fragment, A as renderList, e2 as _sfc_main$7, q as N8nButton, aa as _sfc_main$8, gE as COLUMN_NAME_REGEX, b2 as withDirectives, b3 as vShow, aM as N8nActionDropdown, bp as onClickOutside, a8 as resolveComponent, am as useMessage, an as MODAL_CONFIRM, gF as NULL_VALUE, gG as EMPTY_VALUE, eL as orderBy, gH as DEFAULT_ID_COLUMN_NAME, ax as useDocumentTitle, gI as MIN_LOADING_TIME, dD as N8nLoading, dC as _sfc_main$9, gJ as DATA_STORE_VIEW } from "./index-CeNA_ukL.js";
-import { u as useDataStoreStore } from "./dataStore.store-XMarLJy8.js";
-import { B as Breadcrumbs, _ as __unplugin_components_0 } from "./ProjectBreadcrumb-CcYMzyYS.js";
-import { _ as _sfc_main$6 } from "./DataStoreActions.vue_vue_type_script_setup_true_lang-DLTdZ7Ze.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, 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--OJ5nhDf.js";
+import { u as useDataStoreStore, r as reorderItem } from "./dataStore.store-HuymAG46.js";
+import { B as Breadcrumbs, _ as __unplugin_components_0 } from "./ProjectBreadcrumb-BxMwihEP.js";
+import { _ as _sfc_main$8 } from "./DataStoreActions.vue_vue_type_script_setup_true_lang-Dug6Q9SH.js";
+import { S as SelectedItemsInfo } from "./SelectedItemsInfo-64VntNmH.js";
 const BREADCRUMBS_SEPARATOR = "/";
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "DataStoreBreadcrumbs",
   props: {
     dataStore: {}
@@ -80,6 +81,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         createVNode(_component_n8n_breadcrumbs, {
           items: breadcrumbs.value,
           separator: BREADCRUMBS_SEPARATOR,
+          "highlight-last-item": false,
           onItemSelected: onItemClicked
         }, {
           prepend: withCtx(() => [
@@ -113,7 +115,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style["data-store-actions"])
         }, [
-          createVNode(_sfc_main$6, {
+          createVNode(_sfc_main$8, {
             "data-store": props.dataStore,
             location: "breadcrumbs",
             onRename,
@@ -125,16 +127,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 const separator = "_separator_12h50_132";
-const style0$3 = {
+const style0$2 = {
   "data-store-breadcrumbs": "_data-store-breadcrumbs_12h50_123",
   "data-store-actions": "_data-store-actions_12h50_128",
   separator,
   "breadcrumb-current": "_breadcrumb-current_12h50_138"
 };
-const cssModules$3 = {
-  "$style": style0$3
+const cssModules$2 = {
+  "$style": style0$2
 };
-const DataStoreBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$3]]);
+const DataStoreBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$2]]);
 var LocalEventService = class {
   constructor() {
     this.allSyncListeners = /* @__PURE__ */ new Map();
@@ -1466,6 +1468,9 @@ function _isColumnsSortingCoupledToGroup(gos) {
   const autoGroupColumnDef = gos.get("autoGroupColumnDef");
   return !autoGroupColumnDef?.comparator && !gos.get("treeData");
 }
+function _getGrandTotalRow(gos) {
+  return gos.get("grandTotalRow");
+}
 function _isGroupUseEntireRow(gos, pivotMode) {
   if (pivotMode) {
     return false;
@@ -8496,6 +8501,18 @@ function _createGlobalRowEvent(rowNode, gos, type) {
     rowPinned: rowNode.rowPinned
   });
 }
+var IGNORED_SIBLING_PROPERTIES = /* @__PURE__ */ new Set(["__localEventService", "__objectId", "sticky", "__autoHeights", "__checkAutoHeightsDebounced", "childStore"]);
+function _createRowNodeSibling(rowNode, beans) {
+  const sibling = new RowNode(beans);
+  Object.keys(rowNode).forEach((key) => {
+    if (IGNORED_SIBLING_PROPERTIES.has(key)) {
+      return;
+    }
+    sibling[key] = rowNode[key];
+  });
+  sibling.oldRowTop = null;
+  return sibling;
+}
 var FILTER_HANDLER_MAP = {
   agSetColumnFilter: "agSetColumnFilterHandler",
   agMultiColumnFilter: "agMultiColumnFilterHandler",
@@ -9346,6 +9363,49 @@ var ViewportSizeFeature = class extends BeanStub {
     this.beans.colViewport.setScrollPosition(scrollWidth, scrollPosition);
   }
 };
+function processClassRules(expressionSvc, previousClassRules, classRules, params, onApplicableClass, onNotApplicableClass) {
+  if (classRules == null && previousClassRules == null) {
+    return;
+  }
+  const classesToApply = {};
+  const classesToRemove = {};
+  const forEachSingleClass = (className, callback) => {
+    className.split(" ").forEach((singleClass) => {
+      if (singleClass.trim() == "")
+        return;
+      callback(singleClass);
+    });
+  };
+  if (classRules) {
+    const classNames = Object.keys(classRules);
+    for (let i = 0; i < classNames.length; i++) {
+      const className = classNames[i];
+      const rule = classRules[className];
+      let resultOfRule;
+      if (typeof rule === "string") {
+        resultOfRule = expressionSvc ? expressionSvc.evaluate(rule, params) : true;
+      } else if (typeof rule === "function") {
+        resultOfRule = rule(params);
+      }
+      forEachSingleClass(className, (singleClass) => {
+        resultOfRule ? classesToApply[singleClass] = true : classesToRemove[singleClass] = true;
+      });
+    }
+  }
+  if (previousClassRules && onNotApplicableClass) {
+    Object.keys(previousClassRules).forEach(
+      (className) => forEachSingleClass(className, (singleClass) => {
+        if (!classesToApply[singleClass]) {
+          classesToRemove[singleClass] = true;
+        }
+      })
+    );
+  }
+  if (onNotApplicableClass) {
+    Object.keys(classesToRemove).forEach(onNotApplicableClass);
+  }
+  Object.keys(classesToApply).forEach(onApplicableClass);
+}
 function calculateRowLevel(rowNode) {
   if (rowNode.group) {
     return rowNode.level;
@@ -14531,6 +14591,710 @@ var CheckboxCellRenderer = class extends Component {
     }
   }
 };
+var PinnedRows = class {
+  constructor(beans, floating) {
+    this.beans = beans;
+    this.floating = floating;
+    this.all = /* @__PURE__ */ new Set();
+    this.visible = /* @__PURE__ */ new Set();
+    this.order = [];
+    this.queued = /* @__PURE__ */ new Set();
+  }
+  size() {
+    return this.visible.size;
+  }
+  add(node) {
+    const { all, visible, order } = this;
+    if (all.has(node))
+      return;
+    all.add(node);
+    visible.add(node);
+    order.push(node);
+    this.sort();
+  }
+  delete(item) {
+    this.all.delete(item);
+    this.visible.delete(item);
+    this.queued.delete(item.id);
+    _removeFromArray(this.order, item);
+  }
+  has(item) {
+    return this.visible.has(item);
+  }
+  forEach(fn) {
+    this.order.forEach(fn);
+  }
+  getByIndex(i) {
+    return this.order[i];
+  }
+  getById(id) {
+    for (const node of this.visible) {
+      if (node.id == id)
+        return node;
+    }
+  }
+  clear() {
+    const { all, visible, order, queued } = this;
+    all.clear();
+    queued.clear();
+    visible.clear();
+    order.length = 0;
+  }
+  sort() {
+    const { sortSvc, rowNodeSorter, gos } = this.beans;
+    const sortOptions = sortSvc?.getSortOptions() ?? [];
+    const grandTotalNode = _removeGrandTotalRow(this.order);
+    this.order.sort((a, b) => (a.pinnedSibling?.rowIndex ?? 0) - (b.pinnedSibling?.rowIndex ?? 0));
+    this.order = rowNodeSorter?.doFullSort(this.order, sortOptions) ?? this.order;
+    if (!grandTotalNode)
+      return;
+    const grandTotalRow = _getGrandTotalRow(gos);
+    if (grandTotalRow === "bottom" || grandTotalRow === "pinnedBottom") {
+      this.order.push(grandTotalNode);
+    } else {
+      this.order.unshift(grandTotalNode);
+    }
+  }
+  hide(shouldHide) {
+    const { all, visible } = this;
+    all.forEach((node) => shouldHide(node) ? visible.delete(node) : visible.add(node));
+    this.order = Array.from(visible);
+    this.sort();
+  }
+  queue(id) {
+    this.queued.add(id);
+  }
+  unqueue(id) {
+    this.queued.delete(id);
+  }
+  forEachQueued(fn) {
+    this.queued.forEach(fn);
+  }
+};
+function _isDisplayedAfterFilterCSRM(node) {
+  if (node.level === -1)
+    return true;
+  const parent = node.parent;
+  if (parent?.childrenAfterSort?.some((child) => child == node)) {
+    return _isDisplayedAfterFilterCSRM(parent);
+  }
+  return false;
+}
+function _shouldHidePinnedRows(beans, node) {
+  const { gos, rowModel, filterManager } = beans;
+  if (_isServerSideRowModel(gos)) {
+    return !rowModel.getRowNode(node.id);
+  }
+  if (filterManager?.isAnyFilterPresent()) {
+    return !_isDisplayedAfterFilterCSRM(node);
+  }
+  if (gos.get("pivotMode")) {
+    return !node.group;
+  }
+  return false;
+}
+function _isNodeGrandTotal(node) {
+  return !!node.footer && node.level === -1;
+}
+function _isPinnedNodeGrandTotal(node) {
+  return !!node.pinnedSibling && _isNodeGrandTotal(node.pinnedSibling);
+}
+function _removeGrandTotalRow(order) {
+  const index = order.findIndex(_isPinnedNodeGrandTotal);
+  if (index > -1) {
+    return order.splice(index, 1)?.[0];
+  }
+}
+var ManualPinnedRowModel = class extends BeanStub {
+  postConstruct() {
+    const { gos, beans } = this;
+    this.top = new PinnedRows(beans, "top");
+    this.bottom = new PinnedRows(beans, "bottom");
+    const shouldHide = (node) => _shouldHidePinnedRows(beans, node.pinnedSibling);
+    const runIsRowPinned = () => {
+      const isRowPinned = gos.get("isRowPinned");
+      if (isRowPinned && gos.get("enableRowPinning")) {
+        beans.rowModel.forEachNode((node) => this.pinRow(node, isRowPinned(node)), true);
+      }
+      this.refreshRowPositions();
+      this.dispatchRowPinnedEvents();
+    };
+    this.addManagedEventListeners({
+      gridStylesChanged: this.onGridStylesChanges.bind(this),
+      modelUpdated: ({ keepRenderedRows }) => {
+        this.tryToEmptyQueues();
+        this.pinGrandTotalRow();
+        this.forContainers((container) => container.hide(shouldHide));
+        this.refreshRowPositions();
+        if (!keepRenderedRows) {
+          this.dispatchRowPinnedEvents();
+        }
+      },
+      columnRowGroupChanged: () => {
+        this.forContainers(removeGroupRows);
+        this.refreshRowPositions();
+      },
+      rowNodeDataChanged: ({ node }) => {
+        const isRowPinnable = gos.get("isRowPinnable");
+        const pinnable = isRowPinnable?.(node) ?? true;
+        if (!pinnable) {
+          this.pinRow(node, null);
+        }
+      },
+      firstDataRendered: runIsRowPinned
+    });
+    this.addManagedPropertyListener("pivotMode", () => {
+      this.forContainers((container) => container.hide(shouldHide));
+      this.dispatchRowPinnedEvents();
+    });
+    this.addManagedPropertyListener("grandTotalRow", ({ currentValue }) => {
+      this._grandTotalPinned = currentValue === "pinnedBottom" ? "bottom" : currentValue === "pinnedTop" ? "top" : null;
+    });
+    this.addManagedPropertyListener("isRowPinned", runIsRowPinned);
+  }
+  destroy() {
+    this.reset(false);
+    super.destroy();
+  }
+  reset(dispatch = true) {
+    this.forContainers((container) => {
+      const nodesToUnpin = [];
+      container.forEach((n) => nodesToUnpin.push(n));
+      nodesToUnpin.forEach((n) => this.pinRow(n, null));
+      container.clear();
+    });
+    if (dispatch) {
+      this.dispatchRowPinnedEvents();
+    }
+  }
+  pinRow(rowNode, float, column) {
+    if (rowNode.footer && rowNode.level > -1)
+      return;
+    if (rowNode.footer && rowNode.level === -1) {
+      this._grandTotalPinned = float;
+      refreshCSRM(this.beans);
+      return;
+    }
+    const currentFloat = rowNode.rowPinned ?? rowNode.pinnedSibling?.rowPinned;
+    const switching = currentFloat != null && float != null && float != currentFloat;
+    if (switching) {
+      const pinned = rowNode.rowPinned ? rowNode : rowNode.pinnedSibling;
+      const source = rowNode.rowPinned ? rowNode.pinnedSibling : rowNode;
+      this.pinRow(pinned, null, column);
+      this.pinRow(source, float, column);
+      return;
+    }
+    const spannedRows = column && getSpannedRows(this.beans, rowNode, column);
+    if (spannedRows) {
+      spannedRows.forEach((node) => this.pinRow(node, float));
+      return;
+    }
+    if (float == null) {
+      const node = rowNode.rowPinned ? rowNode : rowNode.pinnedSibling;
+      const found = this.findPinnedRowNode(node);
+      if (!found)
+        return;
+      found.delete(node);
+      const source = node.pinnedSibling;
+      _destroyRowNodeSibling(node);
+      this.refreshRowPositions(float);
+      this.dispatchRowPinnedEvents(source);
+    } else {
+      const sibling = _createPinnedSibling(this.beans, rowNode, float);
+      const container = this.getContainer(float);
+      container.add(sibling);
+      if (_shouldHidePinnedRows(this.beans, rowNode)) {
+        container.hide((node) => _shouldHidePinnedRows(this.beans, node.pinnedSibling));
+      }
+      this.refreshRowPositions(float);
+      this.dispatchRowPinnedEvents(rowNode);
+    }
+  }
+  isManual() {
+    return true;
+  }
+  isEmpty(floating) {
+    return this.getContainer(floating).size() === 0;
+  }
+  isRowsToRender(floating) {
+    return !this.isEmpty(floating);
+  }
+  ensureRowHeightsValid() {
+    let anyChange = false;
+    let rowTop = 0;
+    const updateRowHeight = (rowNode) => {
+      if (rowNode.rowHeightEstimated) {
+        const rowHeight = _getRowHeightForNode(this.beans, rowNode);
+        rowNode.setRowTop(rowTop);
+        rowNode.setRowHeight(rowHeight.height);
+        rowTop += rowHeight.height;
+        anyChange = true;
+      }
+    };
+    this.bottom.forEach(updateRowHeight);
+    rowTop = 0;
+    this.top.forEach(updateRowHeight);
+    this.eventSvc.dispatchEvent({
+      type: "pinnedHeightChanged"
+    });
+    return anyChange;
+  }
+  getPinnedTopTotalHeight() {
+    return getTotalHeight(this.top);
+  }
+  getPinnedBottomTotalHeight() {
+    return getTotalHeight(this.bottom);
+  }
+  getPinnedTopRowCount() {
+    return this.top.size();
+  }
+  getPinnedBottomRowCount() {
+    return this.bottom.size();
+  }
+  getPinnedTopRow(index) {
+    return this.top.getByIndex(index);
+  }
+  getPinnedBottomRow(index) {
+    return this.bottom.getByIndex(index);
+  }
+  getPinnedRowById(id, floating) {
+    return this.getContainer(floating).getById(id);
+  }
+  forEachPinnedRow(floating, callback) {
+    this.getContainer(floating).forEach(callback);
+  }
+  getPinnedState() {
+    const buildState = (floating) => {
+      const list = [];
+      this.forEachPinnedRow(floating, (node) => list.push(node.pinnedSibling.id));
+      return list;
+    };
+    return {
+      top: buildState("top"),
+      bottom: buildState("bottom")
+    };
+  }
+  setPinnedState(state) {
+    this.forContainers((pinned, floating) => {
+      for (const id of state[floating]) {
+        const node = this.beans.rowModel.getRowNode(id);
+        if (node) {
+          this.pinRow(node, floating);
+        } else {
+          pinned.queue(id);
+        }
+      }
+    });
+  }
+  getGrandTotalPinned() {
+    return this._grandTotalPinned;
+  }
+  setGrandTotalPinned(value) {
+    this._grandTotalPinned = value;
+  }
+  tryToEmptyQueues() {
+    this.forContainers((pinned, container) => {
+      const nodesToPin = /* @__PURE__ */ new Set();
+      pinned.forEachQueued((id) => {
+        const node = this.beans.rowModel.getRowNode(id);
+        if (node) {
+          nodesToPin.add(node);
+        }
+      });
+      for (const node of nodesToPin) {
+        pinned.unqueue(node.id);
+        this.pinRow(node, container);
+      }
+    });
+  }
+  pinGrandTotalRow() {
+    const { gos, beans, _grandTotalPinned: float } = this;
+    const rowModel = beans.rowModel;
+    if (!_isClientSideRowModel(gos))
+      return;
+    const sibling = rowModel.rootNode?.sibling;
+    if (!sibling)
+      return;
+    const pinnedSibling = sibling.pinnedSibling;
+    const container = pinnedSibling && this.findPinnedRowNode(pinnedSibling);
+    if (!float) {
+      if (!container)
+        return;
+      container.delete(pinnedSibling);
+      _destroyRowNodeSibling(pinnedSibling);
+    } else {
+      if (container && container.floating !== float) {
+        container.delete(pinnedSibling);
+        _destroyRowNodeSibling(pinnedSibling);
+      }
+      if (!container || container.floating !== float) {
+        const newPinnedSibling = _createPinnedSibling(beans, sibling, float);
+        this.getContainer(float).add(newPinnedSibling);
+      }
+    }
+  }
+  onGridStylesChanges(e) {
+    if (e.rowHeightChanged) {
+      this.forContainers(
+        (container) => container.forEach((rowNode) => rowNode.setRowHeight(rowNode.rowHeight, true))
+      );
+    }
+  }
+  getContainer(floating) {
+    return floating === "top" ? this.top : this.bottom;
+  }
+  findPinnedRowNode(node) {
+    if (this.top.has(node))
+      return this.top;
+    if (this.bottom.has(node))
+      return this.bottom;
+  }
+  refreshRowPositions(floating) {
+    const refreshAll = (pinned) => refreshRowPositions(this.beans, pinned);
+    return floating == null ? this.forContainers(refreshAll) : refreshAll(this.getContainer(floating));
+  }
+  forContainers(fn) {
+    fn(this.top, "top");
+    fn(this.bottom, "bottom");
+  }
+  dispatchRowPinnedEvents(node) {
+    this.eventSvc.dispatchEvent({ type: "pinnedRowsChanged" });
+    node?.dispatchRowEvent("rowPinned");
+  }
+};
+function refreshRowPositions(beans, container) {
+  let rowTop = 0;
+  container.forEach((node, index) => {
+    node.setRowTop(rowTop);
+    if (node.rowHeightEstimated || node.rowHeight == null) {
+      node.setRowHeight(_getRowHeightForNode(beans, node).height);
+    }
+    node.setRowIndex(index);
+    rowTop += node.rowHeight;
+  });
+}
+function _createPinnedSibling(beans, rowNode, floating) {
+  if (rowNode.pinnedSibling) {
+    return rowNode.pinnedSibling;
+  }
+  const sibling = _createRowNodeSibling(rowNode, beans);
+  sibling.setRowTop(null);
+  sibling.setRowIndex(null);
+  sibling.rowPinned = floating;
+  const prefix = floating === "top" ? ROW_ID_PREFIX_TOP_PINNED : ROW_ID_PREFIX_BOTTOM_PINNED;
+  sibling.id = `${prefix}${floating}-${rowNode.id}`;
+  sibling.pinnedSibling = rowNode;
+  rowNode.pinnedSibling = sibling;
+  return sibling;
+}
+function _destroyRowNodeSibling(rowNode) {
+  if (!rowNode.pinnedSibling) {
+    return;
+  }
+  rowNode.rowPinned = null;
+  rowNode.setRowTop(null);
+  rowNode.setRowIndex(null);
+  const mainNode = rowNode.pinnedSibling;
+  rowNode.pinnedSibling = void 0;
+  if (mainNode) {
+    mainNode.pinnedSibling = void 0;
+    mainNode.rowPinned = null;
+  }
+}
+function removeGroupRows(set) {
+  const rowsToRemove = /* @__PURE__ */ new Set();
+  set.forEach((node) => {
+    if (node.group) {
+      rowsToRemove.add(node);
+    }
+  });
+  rowsToRemove.forEach((node) => set.delete(node));
+}
+function getSpannedRows(beans, rowNode, column) {
+  const { rowSpanSvc } = beans;
+  const isCellSpanning = (column && rowSpanSvc?.isCellSpanning(column, rowNode)) ?? false;
+  if (column && isCellSpanning) {
+    return rowSpanSvc?.getCellSpan(column, rowNode)?.spannedNodes;
+  }
+}
+function getTotalHeight(container) {
+  const size = container.size();
+  if (size === 0)
+    return 0;
+  const node = container.getByIndex(size - 1);
+  if (node === void 0)
+    return 0;
+  return node.rowTop + node.rowHeight;
+}
+function refreshCSRM({ gos, rowModel }) {
+  if (_isClientSideRowModel(gos)) {
+    rowModel.refreshModel({ step: "map" });
+  }
+}
+var StaticPinnedRowModel = class extends BeanStub {
+  constructor() {
+    super(...arguments);
+    this.nextId = 0;
+    this.pinnedTopRows = { cache: {}, order: [] };
+    this.pinnedBottomRows = { cache: {}, order: [] };
+  }
+  postConstruct() {
+    const gos = this.gos;
+    this.setPinnedRowData(gos.get("pinnedTopRowData"), "top");
+    this.setPinnedRowData(gos.get("pinnedBottomRowData"), "bottom");
+    this.addManagedPropertyListener("pinnedTopRowData", (e) => this.setPinnedRowData(e.currentValue, "top"));
+    this.addManagedPropertyListener("pinnedBottomRowData", (e) => this.setPinnedRowData(e.currentValue, "bottom"));
+    this.addManagedEventListeners({ gridStylesChanged: this.onGridStylesChanges.bind(this) });
+  }
+  reset() {
+  }
+  isEmpty(floating) {
+    return this.getCache(floating).order.length === 0;
+  }
+  isRowsToRender(floating) {
+    return !this.isEmpty(floating);
+  }
+  isManual() {
+    return false;
+  }
+  pinRow(_node, _container) {
+  }
+  onGridStylesChanges(e) {
+    if (e.rowHeightChanged) {
+      const estimateRowHeight = (rowNode) => {
+        rowNode.setRowHeight(rowNode.rowHeight, true);
+      };
+      forEach(this.pinnedBottomRows, estimateRowHeight);
+      forEach(this.pinnedTopRows, estimateRowHeight);
+    }
+  }
+  ensureRowHeightsValid() {
+    let anyChange = false;
+    let rowTop = 0;
+    const updateRowHeight = (rowNode) => {
+      if (rowNode.rowHeightEstimated) {
+        const rowHeight = _getRowHeightForNode(this.beans, rowNode);
+        rowNode.setRowTop(rowTop);
+        rowNode.setRowHeight(rowHeight.height);
+        rowTop += rowHeight.height;
+        anyChange = true;
+      }
+    };
+    forEach(this.pinnedBottomRows, updateRowHeight);
+    rowTop = 0;
+    forEach(this.pinnedTopRows, updateRowHeight);
+    this.eventSvc.dispatchEvent({
+      type: "pinnedHeightChanged"
+    });
+    return anyChange;
+  }
+  setPinnedRowData(rowData, floating) {
+    this.updateNodesFromRowData(rowData, floating);
+    this.eventSvc.dispatchEvent({
+      type: "pinnedRowDataChanged"
+    });
+  }
+  /**
+   * Updates existing RowNode instances and creates new ones if necessary
+   *
+   * Setting data as `undefined` will clear row nodes
+   */
+  updateNodesFromRowData(allData, floating) {
+    const nodes = this.getCache(floating);
+    if (allData === void 0) {
+      nodes.order.length = 0;
+      nodes.cache = {};
+      return;
+    }
+    const getRowId = _getRowIdCallback(this.gos);
+    const idPrefix = floating === "top" ? ROW_ID_PREFIX_TOP_PINNED : ROW_ID_PREFIX_BOTTOM_PINNED;
+    const nodesToRemove = new Set(nodes.order);
+    const newOrder = [];
+    const dataIds = /* @__PURE__ */ new Set();
+    let nextRowTop = 0;
+    let i = -1;
+    for (const data of allData) {
+      const id = getRowId?.({ data, level: 0, rowPinned: floating }) ?? idPrefix + this.nextId++;
+      if (dataIds.has(id)) {
+        _warn(96, { id, data });
+        continue;
+      }
+      i++;
+      dataIds.add(id);
+      newOrder.push(id);
+      const existingNode = getById(nodes, id);
+      if (existingNode !== void 0) {
+        if (existingNode.data !== data) {
+          existingNode.updateData(data);
+        }
+        nextRowTop += this.setRowTopAndRowIndex(existingNode, nextRowTop, i);
+        nodesToRemove.delete(id);
+      } else {
+        const rowNode = new RowNode(this.beans);
+        rowNode.id = id;
+        rowNode.data = data;
+        rowNode.rowPinned = floating;
+        nextRowTop += this.setRowTopAndRowIndex(rowNode, nextRowTop, i);
+        nodes.cache[id] = rowNode;
+        nodes.order.push(id);
+      }
+    }
+    nodesToRemove.forEach((id) => {
+      getById(nodes, id)?.clearRowTopAndRowIndex();
+      delete nodes.cache[id];
+    });
+    nodes.order = newOrder;
+  }
+  setRowTopAndRowIndex(rowNode, rowTop, rowIndex) {
+    rowNode.setRowTop(rowTop);
+    rowNode.setRowHeight(_getRowHeightForNode(this.beans, rowNode).height);
+    rowNode.setRowIndex(rowIndex);
+    return rowNode.rowHeight;
+  }
+  getPinnedTopTotalHeight() {
+    return getTotalHeight2(this.pinnedTopRows);
+  }
+  getPinnedBottomTotalHeight() {
+    return getTotalHeight2(this.pinnedBottomRows);
+  }
+  getPinnedTopRowCount() {
+    return getSize(this.pinnedTopRows);
+  }
+  getPinnedBottomRowCount() {
+    return getSize(this.pinnedBottomRows);
+  }
+  getPinnedTopRow(index) {
+    return getByIndex(this.pinnedTopRows, index);
+  }
+  getPinnedBottomRow(index) {
+    return getByIndex(this.pinnedBottomRows, index);
+  }
+  getPinnedRowById(id, floating) {
+    return getById(this.getCache(floating), id);
+  }
+  forEachPinnedRow(floating, callback) {
+    return forEach(this.getCache(floating), callback);
+  }
+  getCache(floating) {
+    return floating === "top" ? this.pinnedTopRows : this.pinnedBottomRows;
+  }
+  getPinnedState() {
+    return { top: [], bottom: [] };
+  }
+  setPinnedState() {
+  }
+  getGrandTotalPinned() {
+    return;
+  }
+  setGrandTotalPinned() {
+  }
+};
+function getTotalHeight2(rowNodes) {
+  const size = getSize(rowNodes);
+  if (size === 0) {
+    return 0;
+  }
+  const node = getByIndex(rowNodes, size - 1);
+  if (node === void 0) {
+    return 0;
+  }
+  return node.rowTop + node.rowHeight;
+}
+function getById(cache, id) {
+  return cache.cache[id];
+}
+function getByIndex(cache, i) {
+  return getById(cache, cache.order[i]);
+}
+function forEach(cache, callback) {
+  cache.order.forEach((id, index) => {
+    const node = getById(cache, id);
+    node && callback(node, index);
+  });
+}
+function getSize(cache) {
+  return cache.order.length;
+}
+var PinnedRowModel = class extends BeanStub {
+  constructor() {
+    super(...arguments);
+    this.beanName = "pinnedRowModel";
+  }
+  postConstruct() {
+    const { gos } = this;
+    const initialiseRowModel = () => {
+      const enableRowPinning = gos.get("enableRowPinning");
+      const grandTotalRow = _getGrandTotalRow(gos);
+      const isGrandTotalRowPinned = grandTotalRow === "pinnedBottom" || grandTotalRow === "pinnedTop";
+      const useManualPinnedRowModel = !!enableRowPinning || isGrandTotalRowPinned;
+      const shouldDestroy = useManualPinnedRowModel ? this.inner instanceof StaticPinnedRowModel : this.inner instanceof ManualPinnedRowModel;
+      if (this.inner && shouldDestroy) {
+        this.destroyBean(this.inner);
+      }
+      if (shouldDestroy || !this.inner) {
+        this.inner = this.createManagedBean(
+          useManualPinnedRowModel ? new ManualPinnedRowModel() : new StaticPinnedRowModel()
+        );
+      }
+    };
+    this.addManagedPropertyListeners(["enableRowPinning", "grandTotalRow"], initialiseRowModel);
+    initialiseRowModel();
+  }
+  reset() {
+    return this.inner.reset();
+  }
+  isEmpty(container) {
+    return this.inner.isEmpty(container);
+  }
+  isManual() {
+    return this.inner.isManual();
+  }
+  isRowsToRender(container) {
+    return this.inner.isRowsToRender(container);
+  }
+  pinRow(node, container, column) {
+    return this.inner.pinRow(node, container, column);
+  }
+  ensureRowHeightsValid() {
+    return this.inner.ensureRowHeightsValid();
+  }
+  getPinnedRowById(id, container) {
+    return this.inner.getPinnedRowById(id, container);
+  }
+  getPinnedTopTotalHeight() {
+    return this.inner.getPinnedTopTotalHeight();
+  }
+  getPinnedBottomTotalHeight() {
+    return this.inner.getPinnedBottomTotalHeight();
+  }
+  getPinnedTopRowCount() {
+    return this.inner.getPinnedTopRowCount();
+  }
+  getPinnedBottomRowCount() {
+    return this.inner.getPinnedBottomRowCount();
+  }
+  getPinnedTopRow(index) {
+    return this.inner.getPinnedTopRow(index);
+  }
+  getPinnedBottomRow(index) {
+    return this.inner.getPinnedBottomRow(index);
+  }
+  forEachPinnedRow(container, callback) {
+    return this.inner.forEachPinnedRow(container, callback);
+  }
+  getPinnedState() {
+    return this.inner.getPinnedState();
+  }
+  setPinnedState(state) {
+    return this.inner.setPinnedState(state);
+  }
+  setGrandTotalPinned(value) {
+    return this.inner.setGrandTotalPinned(value);
+  }
+  getGrandTotalPinned() {
+    return this.inner.getGrandTotalPinned();
+  }
+};
 var ROOT_NODE_ID = "ROOT_NODE_ID";
 var AbstractClientSideNodeManager = class extends BeanStub {
   constructor() {
@@ -35016,6 +35780,12 @@ var TextCellEditor = class extends SimpleCellEditor {
     super(new TextCellEditorInput(() => this.getLocaleTextFunc()));
   }
 };
+function getVerticalPixelRange(beans) {
+  return beans.ctrlsSvc.getScrollFeature().getVScrollPosition();
+}
+function getHorizontalPixelRange(beans) {
+  return beans.ctrlsSvc.getScrollFeature().getHScrollPosition();
+}
 function ensureColumnVisible(beans, key, position = "auto") {
   beans.frameworkOverrides.wrapIncoming(
     () => beans.ctrlsSvc.getScrollFeature().ensureColumnVisible(key, position),
@@ -35028,6 +35798,12 @@ function ensureIndexVisible(beans, index, position) {
     "ensureVisible"
   );
 }
+function ensureNodeVisible(beans, nodeSelector, position = null) {
+  beans.frameworkOverrides.wrapIncoming(
+    () => beans.ctrlsSvc.getScrollFeature().ensureNodeVisible(nodeSelector, position),
+    "ensureVisible"
+  );
+}
 function undoCellEditing(beans) {
   beans.undoRedo?.undo("api");
 }
@@ -36007,15 +36783,15 @@ var BaseEditStrategy = class extends BeanStub {
       });
       return true;
     }
-    const actions = this.processValidationResults(results);
-    if (actions.destroy.length > 0) {
-      actions.destroy.forEach((cell) => {
+    const actions2 = this.processValidationResults(results);
+    if (actions2.destroy.length > 0) {
+      actions2.destroy.forEach((cell) => {
         _destroyEditor(this.beans, cell, { event });
         this.model.stop(cell);
       });
     }
-    if (actions.keep.length > 0) {
-      actions.keep.forEach((cell) => {
+    if (actions2.keep.length > 0) {
+      actions2.keep.forEach((cell) => {
         const cellCtrl = _getCellCtrl(this.beans, cell);
         if (!this.editSvc?.cellEditingInvalidCommitBlocks()) {
           cellCtrl && this.editSvc.revertSingleCellEdit(cellCtrl);
@@ -38630,6 +39406,17 @@ var RowApiModule = {
     getDisplayedRowCount
   }
 };
+var ScrollApiModule = {
+  moduleName: "ScrollApi",
+  version: VERSION,
+  apiFunctions: {
+    getVerticalPixelRange,
+    getHorizontalPixelRange,
+    ensureColumnVisible,
+    ensureIndexVisible,
+    ensureNodeVisible
+  }
+};
 function setGridAriaProperty(beans, property, value) {
   if (!property) {
     return;
@@ -39115,6 +39902,161 @@ var ColumnAutoSizeModule = {
   },
   dependsOn: [AutoWidthModule]
 };
+var manualPinnedRowCSS = (
+  /*css*/
+  `.ag-row-pinned-source{background-color:var(--ag-pinned-source-row-background-color);color:var(--ag-pinned-source-row-text-color);font-weight:var(--ag-pinned-source-row-font-weight)}.ag-row-pinned-manual{background-color:var(--ag-pinned-row-background-color);color:var(--ag-pinned-row-text-color);font-weight:var(--ag-pinned-row-font-weight)}`
+);
+function getPinnedTopRowCount(beans) {
+  return beans.pinnedRowModel?.getPinnedTopRowCount() ?? 0;
+}
+function getPinnedBottomRowCount(beans) {
+  return beans.pinnedRowModel?.getPinnedBottomRowCount() ?? 0;
+}
+function getPinnedTopRow(beans, index) {
+  return beans.pinnedRowModel?.getPinnedTopRow(index);
+}
+function getPinnedBottomRow(beans, index) {
+  return beans.pinnedRowModel?.getPinnedBottomRow(index);
+}
+function forEachPinnedRow(beans, floating, callback) {
+  return beans.pinnedRowModel?.forEachPinnedRow(floating, callback);
+}
+var PinnedRowModule = {
+  moduleName: "PinnedRow",
+  version: VERSION,
+  beans: [PinnedRowModel],
+  css: [manualPinnedRowCSS],
+  apiFunctions: {
+    getPinnedTopRowCount,
+    getPinnedBottomRowCount,
+    getPinnedTopRow,
+    getPinnedBottomRow,
+    forEachPinnedRow
+  },
+  icons: {
+    rowPin: "pin",
+    rowPinTop: "pinned-top",
+    rowPinBottom: "pinned-bottom",
+    rowUnpin: "un-pin"
+  }
+};
+var CellCustomStyleFeature = class extends BeanStub {
+  constructor(cellCtrl, beans) {
+    super();
+    this.cellCtrl = cellCtrl;
+    this.staticClasses = [];
+    this.beans = beans;
+    this.column = cellCtrl.column;
+  }
+  setComp(comp) {
+    this.cellComp = comp;
+    this.applyUserStyles();
+    this.applyCellClassRules();
+    this.applyClassesFromColDef();
+  }
+  applyCellClassRules() {
+    const { column, cellComp } = this;
+    const colDef = column.colDef;
+    const cellClassRules = colDef.cellClassRules;
+    const cellClassParams = this.getCellClassParams(column, colDef);
+    processClassRules(
+      this.beans.expressionSvc,
+      // if current was previous, skip
+      cellClassRules === this.cellClassRules ? void 0 : this.cellClassRules,
+      cellClassRules,
+      cellClassParams,
+      (className) => cellComp.toggleCss(className, true),
+      (className) => cellComp.toggleCss(className, false)
+    );
+    this.cellClassRules = cellClassRules;
+  }
+  applyUserStyles() {
+    const column = this.column;
+    const colDef = column.colDef;
+    const cellStyle = colDef.cellStyle;
+    if (!cellStyle) {
+      return;
+    }
+    let styles;
+    if (typeof cellStyle === "function") {
+      const cellStyleParams = this.getCellClassParams(column, colDef);
+      styles = cellStyle(cellStyleParams);
+    } else {
+      styles = cellStyle;
+    }
+    if (styles) {
+      this.cellComp.setUserStyles(styles);
+    }
+  }
+  applyClassesFromColDef() {
+    const { column, cellComp } = this;
+    const colDef = column.colDef;
+    const cellClassParams = this.getCellClassParams(column, colDef);
+    this.staticClasses.forEach((className) => cellComp.toggleCss(className, false));
+    const newStaticClasses = this.beans.cellStyles.getStaticCellClasses(colDef, cellClassParams);
+    this.staticClasses = newStaticClasses;
+    newStaticClasses.forEach((className) => cellComp.toggleCss(className, true));
+  }
+  getCellClassParams(column, colDef) {
+    const { value, rowNode } = this.cellCtrl;
+    return _addGridCommonParams(this.beans.gos, {
+      value,
+      data: rowNode.data,
+      node: rowNode,
+      colDef,
+      column,
+      rowIndex: rowNode.rowIndex
+    });
+  }
+};
+var CellStyleService = class extends BeanStub {
+  constructor() {
+    super(...arguments);
+    this.beanName = "cellStyles";
+  }
+  processAllCellClasses(colDef, params, onApplicableClass, onNotApplicableClass) {
+    processClassRules(
+      this.beans.expressionSvc,
+      void 0,
+      colDef.cellClassRules,
+      params,
+      onApplicableClass,
+      onNotApplicableClass
+    );
+    this.processStaticCellClasses(colDef, params, onApplicableClass);
+  }
+  getStaticCellClasses(colDef, params) {
+    const { cellClass } = colDef;
+    if (!cellClass) {
+      return [];
+    }
+    let classOrClasses;
+    if (typeof cellClass === "function") {
+      const cellClassFunc = cellClass;
+      classOrClasses = cellClassFunc(params);
+    } else {
+      classOrClasses = cellClass;
+    }
+    if (typeof classOrClasses === "string") {
+      classOrClasses = [classOrClasses];
+    }
+    return classOrClasses || [];
+  }
+  createCellCustomStyleFeature(ctrl, beans) {
+    return new CellCustomStyleFeature(ctrl, beans);
+  }
+  processStaticCellClasses(colDef, params, onApplicableClass) {
+    const classOrClasses = this.getStaticCellClasses(colDef, params);
+    classOrClasses.forEach((cssClassItem) => {
+      onApplicableClass(cssClassItem);
+    });
+  }
+};
+var CellStyleModule = {
+  moduleName: "CellStyle",
+  version: VERSION,
+  beans: [CellStyleService]
+};
 var W = Object.defineProperty;
 var N = (r, d, e) => d in r ? W(r, d, { enumerable: true, configurable: true, writable: true, value: e }) : r[d] = e;
 var C = (r, d, e) => N(r, typeof d != "symbol" ? d + "" : d, e);
@@ -40241,7 +41183,11 @@ const n8nTheme = themeQuartz.withPart(iconSetAlpine).withParams({
   rowBorder: true,
   rowVerticalPaddingScale: 0.8,
   sidePanelBorder: true,
-  wrapperBorder: true
+  wrapperBorder: true,
+  headerColumnBorder: { color: "var(--color-foreground-base)" },
+  headerColumnBorderHeight: "100%",
+  checkboxUncheckedBackgroundColor: "var(--color-background-light-base)",
+  checkboxCheckedBackgroundColor: "var(--color-primary)"
 });
 const isDataStoreValue = (value) => {
   return value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value instanceof Date;
@@ -40293,11 +41239,144 @@ const useDataStoreTypes = () => {
     getDefaultValueForType
   };
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "AddColumnPopover",
-  emits: ["addColumn"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
+const _hoisted_1$4 = { class: "data-store-column-header-icon-wrapper" };
+const _hoisted_2$2 = {
+  class: "ag-header-cell-text",
+  "data-test-id": "data-store-column-header-text"
+};
+const _hoisted_3$1 = {
+  key: 1,
+  class: "sort-indicator"
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "ColumnHeader",
+  props: {
+    params: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { getIconForType, mapToDataStoreColumnType } = useDataStoreTypes();
+    const i18n = useI18n();
+    const isHovered = ref(false);
+    const isDropdownOpen = ref(false);
+    const dropdownRef = ref();
+    const onItemClick = (action) => {
+      if (action === "delete") {
+        props.params.onDelete(props.params.column.getColId());
+      }
+    };
+    const onMouseEnter = () => {
+      isHovered.value = true;
+    };
+    const onMouseLeave = () => {
+      isHovered.value = false;
+    };
+    const onDropdownVisibleChange = (visible) => {
+      isDropdownOpen.value = visible;
+    };
+    const isDropdownVisible = computed(() => {
+      return props.params.allowMenuActions && (isHovered.value || isDropdownOpen.value);
+    });
+    const typeIcon = computed(() => {
+      const cellDataType = props.params.column.getColDef().cellDataType;
+      if (!isAGGridCellType(cellDataType)) {
+        return null;
+      }
+      return getIconForType(mapToDataStoreColumnType(cellDataType));
+    });
+    const columnActionItems = [
+      {
+        id: "delete",
+        label: i18n.baseText("dataStore.deleteColumn.confirm.title"),
+        icon: "trash-2",
+        customClass: "data-store-column-header-action-item"
+      }
+    ];
+    const currentSort = computed(() => {
+      return props.params.column.getSort();
+    });
+    const isSortable = computed(() => {
+      return props.params.column.getColDef().sortable;
+    });
+    const showSortIndicator = computed(() => {
+      return isSortable.value && Boolean(currentSort.value);
+    });
+    const onHeaderClick = (event) => {
+      const target = event.target;
+      if (dropdownRef.value?.$el?.contains(target)) {
+        return;
+      }
+      if (isSortable.value) {
+        const currentSortDirection = currentSort.value;
+        let nextSort = null;
+        if (!currentSortDirection) {
+          nextSort = "asc";
+        } else if (currentSortDirection === "asc") {
+          nextSort = "desc";
+        }
+        props.params.setSort(nextSort, false);
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_N8nIcon = N8nIcon;
+      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",
+        onMouseenter: onMouseEnter,
+        onMouseleave: onMouseLeave,
+        onClick: onHeaderClick
+      }, [
+        createBaseVNode("div", _hoisted_1$4, [
+          typeIcon.value ? (openBlock(), createBlock(_component_N8nIcon, {
+            key: 0,
+            icon: typeIcon.value
+          }, null, 8, ["icon"])) : createCommentVNode("", true),
+          createBaseVNode("span", _hoisted_2$2, toDisplayString(props.params.displayName), 1),
+          showSortIndicator.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+            currentSort.value === "asc" ? (openBlock(), createBlock(_component_N8nIcon, {
+              key: 0,
+              icon: "arrow-up",
+              class: "sort-icon-active"
+            })) : currentSort.value === "desc" ? (openBlock(), createBlock(_component_N8nIcon, {
+              key: 1,
+              icon: "arrow-down",
+              class: "sort-icon-active"
+            })) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ]),
+        withDirectives(createVNode(unref(N8nActionDropdown), {
+          ref_key: "dropdownRef",
+          ref: dropdownRef,
+          "data-test-id": "data-store-column-header-actions",
+          items: columnActionItems,
+          placement: "bottom-start",
+          "activator-icon": "ellipsis",
+          onSelect: onItemClick,
+          onVisibleChange: onDropdownVisibleChange
+        }, null, 512), [
+          [vShow, isDropdownVisible.value]
+        ])
+      ], 34);
+    };
+  }
+});
+const _hoisted_1$3 = { 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 = {
+  key: 0,
+  class: "error-message"
+};
+const _hoisted_5 = { class: "add-column-option-content" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "AddColumnButton",
+  props: {
+    params: {},
+    popoverId: {},
+    useTextTrigger: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
     const i18n = useI18n();
     const { getIconForType } = useDataStoreTypes();
     const { debounce } = useDebounce();
@@ -40308,16 +41387,19 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const error = ref(null);
     const popoverOpen = ref(false);
     const isSelectOpen = ref(false);
-    const onAddButtonClicked = () => {
-      if (!columnName.value || !columnType.value) {
+    const popoverId = computed(() => props.popoverId ?? "add-column-popover");
+    const onAddButtonClicked = async () => {
+      validateName();
+      if (!columnName.value || !columnType.value || error.value) {
         return;
       }
-      emit("addColumn", {
-        column: {
-          name: columnName.value,
-          type: columnType.value
-        }
+      const success = await props.params.onAddColumn({
+        name: columnName.value,
+        type: columnType.value
       });
+      if (!success) {
+        return;
+      }
       columnName.value = "";
       columnType.value = "string";
       popoverOpen.value = false;
@@ -40343,15 +41425,15 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
     const onInput = debounce(validateName, { debounceTime: 100 });
     return (_ctx, _cache) => {
-      const _component_N8nIconButton = _sfc_main$8;
+      const _component_N8nButton = N8nButton;
+      const _component_N8nIconButton = _sfc_main$a;
       const _component_N8nInput = N8nInput;
       const _component_n8n_text = N8nText;
       const _component_N8nIcon = N8nIcon;
       const _component_N8nInputLabel = N8nInputLabel;
       const _component_N8nText = N8nText;
-      const _component_N8nOption = _sfc_main$7;
+      const _component_N8nOption = _sfc_main$9;
       const _component_N8nSelect = N8nSelect;
-      const _component_N8nButton = N8nButton;
       const _component_N8nPopoverReka = N8nPopoverReka;
       const _component_N8nTooltip = Tooltip;
       return openBlock(), createBlock(_component_N8nTooltip, {
@@ -40359,31 +41441,35 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         content: unref(i18n).baseText("dataStore.addColumn.label")
       }, {
         default: withCtx(() => [
-          createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.wrapper)
-          }, [
+          createBaseVNode("div", _hoisted_1$3, [
             createVNode(_component_N8nPopoverReka, {
-              id: "add-column-popover",
+              id: popoverId.value,
               open: popoverOpen.value,
               "popper-options": { strategy: "fixed" },
               "show-arrow": false,
               "onUpdate:open": handlePopoverOpenChange
             }, {
               trigger: withCtx(() => [
-                createVNode(_component_N8nIconButton, {
+                props.useTextTrigger ? (openBlock(), createBlock(_component_N8nButton, {
+                  key: 0,
+                  "data-test-id": "data-store-add-column-trigger-button",
+                  type: "tertiary"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(i18n).baseText("dataStore.addColumn.label")), 1)
+                  ]),
+                  _: 1
+                })) : (openBlock(), createBlock(_component_N8nIconButton, {
+                  key: 1,
                   "data-test-id": "data-store-add-column-trigger-button",
                   text: "",
                   icon: "plus",
                   type: "tertiary"
-                })
+                }))
               ]),
               content: withCtx(() => [
-                createBaseVNode("div", {
-                  class: normalizeClass(_ctx.$style["popover-content"])
-                }, [
-                  createBaseVNode("div", {
-                    class: normalizeClass(_ctx.$style["popover-body"])
-                  }, [
+                createBaseVNode("div", _hoisted_2$1, [
+                  createBaseVNode("div", _hoisted_3, [
                     createVNode(_component_N8nInputLabel, {
                       label: unref(i18n).baseText("dataStore.addColumn.nameInput.label"),
                       required: true,
@@ -40400,10 +41486,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                           onKeyup: withKeys(onAddButtonClicked, ["enter"]),
                           onInput: unref(onInput)
                         }, null, 8, ["modelValue", "placeholder", "maxlength", "onInput"]),
-                        error.value ? (openBlock(), createElementBlock("div", {
-                          key: 0,
-                          class: normalizeClass(_ctx.$style["error-message"])
-                        }, [
+                        error.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
                           createVNode(_component_n8n_text, {
                             size: "small",
                             color: "danger",
@@ -40421,27 +41504,27 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                               createVNode(_component_N8nIcon, {
                                 icon: "circle-help",
                                 size: "small",
-                                class: normalizeClass(_ctx.$style["error-tooltip"]),
+                                class: "error-tooltip",
                                 color: "text-base",
                                 "data-test-id": "add-column-error-help-icon"
-                              }, null, 8, ["class"])
+                              })
                             ]),
                             _: 1
                           }, 8, ["content"])
-                        ], 2)) : createCommentVNode("", true)
+                        ])) : createCommentVNode("", true)
                       ]),
                       _: 1
                     }, 8, ["label", "class"]),
                     createVNode(_component_N8nInputLabel, {
                       label: unref(i18n).baseText("dataStore.addColumn.typeInput.label"),
                       required: true,
-                      class: normalizeClass(_ctx.$style["type-label"])
+                      class: "type-label"
                     }, {
                       default: withCtx(() => [
                         createVNode(_component_N8nSelect, {
                           modelValue: columnType.value,
                           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => columnType.value = $event),
-                          "append-to": "#add-column-popover",
+                          "append-to": `#${popoverId.value}`,
                           onVisibleChange: _cache[2] || (_cache[2] = ($event) => isSelectOpen.value = $event)
                         }, {
                           default: withCtx(() => [
@@ -40451,9 +41534,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                                 value: type
                               }, {
                                 default: withCtx(() => [
-                                  createBaseVNode("div", {
-                                    class: normalizeClass(_ctx.$style["option-content"])
-                                  }, [
+                                  createBaseVNode("div", _hoisted_5, [
                                     createVNode(_component_N8nIcon, {
                                       icon: unref(getIconForType)(type)
                                     }, null, 8, ["icon"]),
@@ -40463,17 +41544,17 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                                       ]),
                                       _: 2
                                     }, 1024)
-                                  ], 2)
+                                  ])
                                 ]),
                                 _: 2
                               }, 1032, ["value"]);
                             }), 64))
                           ]),
                           _: 1
-                        }, 8, ["modelValue"])
+                        }, 8, ["modelValue", "append-to"])
                       ]),
                       _: 1
-                    }, 8, ["label", "class"]),
+                    }, 8, ["label"]),
                     createVNode(_component_N8nButton, {
                       "data-test-id": "data-store-add-column-submit-button",
                       type: "primary",
@@ -40487,112 +41568,45 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 1
                     }, 8, ["disabled"])
-                  ], 2)
-                ], 2)
+                  ])
+                ])
               ]),
               _: 1
-            }, 8, ["open"])
-          ], 2)
+            }, 8, ["id", "open"])
+          ])
         ]),
         _: 1
       }, 8, ["disabled", "content"]);
     };
   }
 });
-const wrapper$1 = "_wrapper_1s3y8_123";
-const style0$2 = {
-  wrapper: wrapper$1,
-  "popover-content": "_popover-content_1s3y8_133",
-  "popover-header": "_popover-header_1s3y8_139",
-  "popover-body": "_popover-body_1s3y8_144",
-  "option-content": "_option-content_1s3y8_151",
-  "error-message": "_error-message_1s3y8_157",
-  "error-tooltip": "_error-tooltip_1s3y8_164"
-};
-const cssModules$2 = {
-  "$style": style0$2
-};
-const AddColumnPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$2]]);
-const _hoisted_1$2 = { class: "data-store-column-header-icon-wrapper" };
-const _hoisted_2$1 = {
-  class: "ag-header-cell-text",
-  "data-test-id": "data-store-column-header-text"
-};
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "ColumnHeader",
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "AddRowButton",
   props: {
     params: {}
   },
   setup(__props) {
-    const props = __props;
-    const { getIconForType, mapToDataStoreColumnType } = useDataStoreTypes();
     const i18n = useI18n();
-    const isHovered = ref(false);
-    const isDropdownOpen = ref(false);
-    const onItemClick = (action) => {
-      if (action === "delete") {
-        props.params.onDelete(props.params.column.getColId());
-      }
-    };
-    const onMouseEnter = () => {
-      isHovered.value = true;
-    };
-    const onMouseLeave = () => {
-      isHovered.value = false;
-    };
-    const onDropdownVisibleChange = (visible) => {
-      isDropdownOpen.value = visible;
-    };
-    const isDropdownVisible = computed(() => {
-      return isHovered.value || isDropdownOpen.value;
-    });
-    const typeIcon = computed(() => {
-      const cellDataType = props.params.column.getColDef().cellDataType;
-      if (!isAGGridCellType(cellDataType)) {
-        return null;
-      }
-      return getIconForType(mapToDataStoreColumnType(cellDataType));
-    });
-    const columnActionItems = [
-      {
-        id: "delete",
-        label: i18n.baseText("dataStore.deleteColumn.confirm.title"),
-        icon: "trash-2",
-        customClass: "data-store-column-header-action-item"
-      }
-    ];
+    const props = __props;
     return (_ctx, _cache) => {
-      const _component_N8nIcon = N8nIcon;
-      const _component_N8nActionDropdown = N8nActionDropdown;
-      return openBlock(), createElementBlock("div", {
-        class: "ag-header-cell-label data-store-column-header-wrapper",
-        "data-test-id": "data-store-column-header",
-        onMouseenter: onMouseEnter,
-        onMouseleave: onMouseLeave
-      }, [
-        createBaseVNode("div", _hoisted_1$2, [
-          typeIcon.value ? (openBlock(), createBlock(_component_N8nIcon, {
-            key: 0,
-            icon: typeIcon.value
-          }, null, 8, ["icon"])) : createCommentVNode("", true),
-          createBaseVNode("span", _hoisted_2$1, toDisplayString(props.params.displayName), 1)
+      return openBlock(), createBlock(unref(Tooltip), {
+        content: unref(i18n).baseText("dataStore.addRow.label")
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(_sfc_main$a), {
+            text: "",
+            type: "tertiary",
+            icon: "plus",
+            onClick: props.params.onClick
+          }, null, 8, ["onClick"])
         ]),
-        withDirectives(createVNode(_component_N8nActionDropdown, {
-          "data-test-id": "data-store-column-header-actions",
-          items: columnActionItems,
-          placement: "bottom-start",
-          "activator-icon": "ellipsis",
-          onSelect: onItemClick,
-          onVisibleChange: onDropdownVisibleChange
-        }, null, 512), [
-          [vShow, isDropdownVisible.value]
-        ])
-      ], 32);
+        _: 1
+      }, 8, ["content"]);
     };
   }
 });
-const _hoisted_1$1 = { class: "n8n-empty-value" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2 = { class: "n8n-empty-value" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "NullEmptyCellRenderer",
   props: {
     params: {}
@@ -40600,7 +41614,81 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(props.params.value), 1);
+      return openBlock(), createElementBlock("span", _hoisted_1$2, 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();
+    }
+    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$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,
+          editable: false,
+          teleported: false,
+          placeholder: "",
+          onChange,
+          onClear,
+          onKeydown
+        }, null, 8, ["modelValue", "style"])
+      ]);
     };
   }
 });
@@ -40610,7 +41698,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     dataStore: {}
   },
   emits: ["toggleSave"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     ModuleRegistry.registerModules([
       ValidationModule,
       // This module allows us to see AG Grid errors in browser console
@@ -40624,45 +41712,63 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       RenderApiModule,
       DateEditorModule,
       ClientSideRowModelApiModule,
-      UndoRedoEditModule
+      UndoRedoEditModule,
+      CellStyleModule,
+      PinnedRowModule,
+      ScrollApiModule
     ]);
     const props = __props;
     const emit = __emit;
     const i18n = useI18n();
     const toast = useToast();
     const message = useMessage();
-    const { getDefaultValueForType, mapToAGCellType } = useDataStoreTypes();
+    const { mapToAGCellType } = useDataStoreTypes();
     const dataStoreStore = useDataStoreStore();
+    const { copy: copyToClipboard } = useClipboard({ onPaste: onClipboardPaste });
     const gridApi = ref(null);
     const colDefs = ref([]);
     const rowData = ref([]);
     const rowSelection = {
       mode: "multiRow",
       enableClickSelection: false,
-      checkboxes: true
+      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 defaultColumnDef = {
-      flex: 1,
-      sortable: false,
-      filter: false
-    };
     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) {
-        gridApi.value.setGridOption("columnDefs", colDefs.value);
-        gridApi.value.setGridOption("rowData", rowData.value);
-      }
+      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;
@@ -40711,7 +41817,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         refreshGridData();
       }
     };
-    const onAddColumn = async ({ column }) => {
+    const onAddColumn = async (column) => {
       try {
         const newColumn = await dataStoreStore.addDataStoreColumn(
           props.dataStore.id,
@@ -40721,13 +41827,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         if (!newColumn) {
           throw new Error(i18n.baseText("generic.unknownError"));
         }
-        colDefs.value = [...colDefs.value, createColumnDef(newColumn)];
+        colDefs.value = [
+          ...colDefs.value.slice(0, -1),
+          createColumnDef(newColumn),
+          ...colDefs.value.slice(-1)
+        ];
         rowData.value = rowData.value.map((row) => {
-          return { ...row, [newColumn.name]: getDefaultValueForType(newColumn.type) };
+          return { ...row, [newColumn.name]: null };
         });
         refreshGridData();
+        return true;
       } catch (error) {
         toast.showError(error, i18n.baseText("dataStore.addColumn.error"));
+        return false;
       }
     };
     const createColumnDef = (col, extraProps = {}) => {
@@ -40735,13 +41847,24 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         colId: col.id,
         field: col.name,
         headerName: col.name,
-        editable: true,
+        sortable: true,
+        flex: 1,
+        editable: (params) => params.data?.id !== ADD_ROW_ROW_ID,
         resizable: true,
         lockPinned: true,
-        headerComponent: _sfc_main$3,
+        headerComponent: _sfc_main$6,
+        headerComponentParams: { onDelete: onDeleteColumn, allowMenuActions: true },
         cellEditorPopup: false,
-        headerComponentParams: { onDelete: onDeleteColumn },
         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;
@@ -40755,23 +41878,30 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           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$2, params: { value: NULL_VALUE } };
+            return { component: _sfc_main$3, params: { value: NULL_VALUE } };
           }
           if (rowValue === "") {
-            return { component: _sfc_main$2, params: { value: EMPTY_VALUE } };
+            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 ?? ""
+          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];
@@ -40793,8 +41923,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         };
       }
       if (col.type === "date") {
-        columnDef.cellEditor = "agDateCellEditor";
-        columnDef.cellEditorPopup = true;
+        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,
@@ -40811,8 +41947,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           props.dataStore.id,
           props.dataStore.projectId,
           moveEvent.column.getColId(),
-          moveEvent.toIndex - 1
+          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);
@@ -40820,17 +41963,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     const onAddRowClick = async () => {
       try {
-        if (currentPage.value * pageSize.value < totalItems.value) {
-          await setCurrentPage(Math.ceil(totalItems.value / pageSize.value));
+        if (currentPage.value * pageSize.value < totalItems.value + 1) {
+          await setCurrentPage(Math.ceil((totalItems.value + 1) / pageSize.value));
         }
         contentLoading.value = true;
         emit("toggleSave", true);
-        const newRowId = await dataStoreStore.insertEmptyRow(props.dataStore);
-        const newRow = { id: newRowId };
-        props.dataStore.columns.forEach((col) => {
-          newRow[col.name] = null;
-        });
-        rows.value.push(newRow);
+        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 {
@@ -40839,6 +41983,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     };
     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
@@ -40850,13 +42003,62 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           },
           {
             editable: false,
+            sortable: false,
             suppressMovable: true,
             headerComponent: null,
-            lockPosition: true
+            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))
+        ...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) => {
@@ -40889,7 +42091,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const onCellClicked = (params) => {
       const clickedCellColumn = params.column.getColId();
       const clickedCellRow = params.rowIndex;
-      if (clickedCellRow === null) return;
+      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({
@@ -40909,11 +42112,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           props.dataStore.id,
           props.dataStore.projectId,
           currentPage.value,
-          pageSize.value
+          pageSize.value,
+          `${currentSortBy.value}:${currentSortOrder.value}`
         );
-        rows.value = fetchedRows.data;
+        rowData.value = fetchedRows.data;
         totalItems.value = fetchedRows.count;
-        rowData.value = rows.value;
+        refreshGridData();
+        handleClearSelection();
       } catch (error) {
         toast.showError(error, i18n.baseText("dataStore.fetchContent.error"));
       } finally {
@@ -40925,7 +42130,34 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     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;
     };
@@ -40933,6 +42165,24 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       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();
     });
@@ -40948,9 +42198,91 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         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
+    });
     return (_ctx, _cache) => {
-      const _component_n8n_icon_button = _sfc_main$8;
-      const _component_n8n_tooltip = Tooltip;
       const _component_el_pagination = resolveComponent("el-pagination");
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.wrapper)
@@ -40958,17 +42290,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         createBaseVNode("div", {
           ref_key: "gridContainer",
           ref: gridContainer,
-          class: normalizeClass(_ctx.$style["grid-container"]),
+          class: normalizeClass([_ctx.$style["grid-container"], { [_ctx.$style["has-records"]]: hasRecords.value }]),
           "data-test-id": "data-store-grid"
         }, [
           createVNode(unref(Be), {
             style: { "width": "100%" },
-            "row-data": rowData.value,
-            "column-defs": colDefs.value,
-            "default-col-def": defaultColumnDef,
             "dom-layout": "autoHeight",
-            "row-height": 36,
-            "header-height": 36,
+            "row-height": unref(DATA_STORE_ROW_HEIGHT),
+            "header-height": unref(DATA_STORE_HEADER_HEIGHT),
             "animate-rows": false,
             theme: unref(n8nTheme),
             "suppress-drag-leave-hides-columns": true,
@@ -40977,6 +42306,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             "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,
@@ -40984,31 +42314,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             onCellEditingStarted,
             onCellEditingStopped,
             onColumnHeaderClicked: resetLastFocusedCell,
-            onSelectionChanged: resetLastFocusedCell
-          }, null, 8, ["row-data", "column-defs", "theme", "loading", "get-row-id"]),
-          createVNode(AddColumnPopover, {
-            "data-store": props.dataStore,
-            class: normalizeClass(_ctx.$style["add-column-popover"]),
-            onAddColumn
-          }, null, 8, ["data-store", "class"])
+            onSelectionChanged,
+            onSortChanged: onSortChanged2,
+            onCellKeyDown
+          }, null, 8, ["row-height", "header-height", "theme", "loading", "get-row-id"])
         ], 2),
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.footer)
         }, [
-          createVNode(_component_n8n_tooltip, {
-            content: unref(i18n).baseText("dataStore.addRow.label")
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_n8n_icon_button, {
-                "data-test-id": "data-store-add-row-button",
-                icon: "plus",
-                class: "mb-xl",
-                type: "secondary",
-                onClick: onAddRowClick
-              })
-            ]),
-            _: 1
-          }, 8, ["content"]),
           createVNode(_component_el_pagination, {
             "current-page": currentPage.value,
             "onUpdate:currentPage": [
@@ -41024,17 +42337,22 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             layout: "total, prev, pager, next, sizes",
             onSizeChange: setPageSize
           }, null, 8, ["current-page", "page-size", "total"])
-        ], 2)
+        ], 2),
+        createVNode(SelectedItemsInfo, {
+          "selected-count": selectedCount.value,
+          onDeleteSelected: handleDeleteSelected,
+          onClearSelection: handleClearSelection
+        }, null, 8, ["selected-count"])
       ], 2);
     };
   }
 });
-const wrapper = "_wrapper_b8s2n_123";
-const footer = "_footer_b8s2n_170";
+const wrapper = "_wrapper_1bnk4_123";
+const footer = "_footer_1bnk4_241";
 const style0$1 = {
   wrapper,
-  "grid-container": "_grid-container_b8s2n_131",
-  "add-column-popover": "_add-column-popover_b8s2n_164",
+  "grid-container": "_grid-container_1bnk4_130",
+  "has-records": "_has-records_1bnk4_234",
   footer
 };
 const cssModules$1 = {
@@ -41062,6 +42380,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const loading = ref(false);
     const saving2 = ref(false);
     const dataStore = ref(null);
+    const dataStoreTableRef = ref();
     const { debounce } = useDebounce();
     const showErrorAndGoBackToList = async (error) => {
       if (!(error instanceof Error)) {
@@ -41105,14 +42424,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         debouncedHideSaving();
       }
     };
+    const onAddColumn = async (column) => {
+      if (!dataStoreTableRef.value) {
+        return false;
+      }
+      return await dataStoreTableRef.value.addColumn(column);
+    };
     onMounted(async () => {
       documentTitle.set(i18n.baseText("dataStore.dataStores"));
       await initialize();
     });
     return (_ctx, _cache) => {
       const _component_n8n_loading = N8nLoading;
-      const _component_n8n_spinner = _sfc_main$9;
+      const _component_n8n_spinner = _sfc_main$b;
       const _component_n8n_text = N8nText;
+      const _component_n8n_button = N8nButton;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style["data-store-details-view"])
       }, [
@@ -41146,12 +42472,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               })
-            ], 2)) : createCommentVNode("", true)
+            ], 2)) : createCommentVNode("", true),
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.actions)
+            }, [
+              createVNode(_component_n8n_button, {
+                onClick: dataStoreTableRef.value?.addRow
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(i18n).baseText("dataStore.addRow.label")), 1)
+                ]),
+                _: 1
+              }, 8, ["onClick"]),
+              createVNode(_sfc_main$5, {
+                "use-text-trigger": true,
+                "popover-id": "ds-details-add-column-popover",
+                params: { onAddColumn }
+              }, null, 8, ["params"])
+            ], 2)
           ], 2),
           createBaseVNode("div", {
             class: normalizeClass(_ctx.$style.content)
           }, [
             createVNode(DataStoreTable, {
+              ref_key: "dataStoreTableRef",
+              ref: dataStoreTableRef,
               "data-store": dataStore.value,
               onToggleSave
             }, null, 8, ["data-store"])
@@ -41161,13 +42506,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const header = "_header_1eejh_134";
-const saving = "_saving_1eejh_148";
+const header = "_header_a2zz6_132";
+const saving = "_saving_a2zz6_147";
+const actions = "_actions_a2zz6_154";
 const style0 = {
-  "data-store-details-view": "_data-store-details-view_1eejh_123",
-  "header-loading": "_header-loading_1eejh_134",
+  "data-store-details-view": "_data-store-details-view_a2zz6_123",
+  "header-loading": "_header-loading_a2zz6_132",
   header,
-  saving
+  saving,
+  actions
 };
 const cssModules = {
   "$style": style0