diff --git a/src/components/computed-properties.vue b/src/components/computed-properties.vue
index cfea940b3..a8e020150 100644
--- a/src/components/computed-properties.vue
+++ b/src/components/computed-properties.vue
@@ -15,79 +15,73 @@
     @hidden="displayTableList"
   >
     <template v-if="displayList">
-      <div class="d-flex align-items-end flex-column mb-3">
-        <button
-          type="button"
-          class="btn btn-secondary"
-          data-cy="calcs-add-property"
-          @click.stop="displayFormProperty"
-        >
-          <i class="fas fa-plus" /> {{ $t("Property") }}
-        </button>
-      </div>
-      <div class="card card-body table-card">
-        <b-table
-          :css="css"
-          :fields="fields"
-          :items="current"
-          :empty-text="$t('No Data Available')"
-          data-cy="calcs-table"
-        >
-          <template #cell(__actions)="{ item }">
-            <div class="actions">
-              <div class="popout">
-                <b-btn
-                  v-b-tooltip.hover
-                  variant="link"
-                  :title="$t('Edit')"
-                  data-cy="calcs-table-edit"
-                  @click="editProperty(item)"
-                >
-                  <i class="fas fa-edit fa-lg fa-fw" />
-                </b-btn>
-                <b-btn
-                  v-b-tooltip.hover
-                  variant="link"
-                  :title="$t('Delete')"
-                  data-cy="calcs-table-remove"
-                  @click="deleteProperty(item)"
-                >
-                  <i class="fas fa-trash-alt fa-lg fa-fw" />
-                </b-btn>
-              </div>
-            </div>
-          </template>
-        </b-table>
-      </div>
+      <Sortable
+        :fields="fields"
+        :items="current"
+        filter-key="name"
+        disable-key="byPass"
+        :inline-edit="false"
+        :data-test-actions="{
+          tableBox: { 'data-cy': 'calcs-table' },
+          btnNew: { 'data-cy': 'calcs-add-property' },
+          btnEdit: { 'data-cy': 'calcs-table-edit' },
+          btnDelete: { 'data-cy': 'calcs-table-remove' },
+        }"
+        @item-edit="editProperty"
+        @item-delete="deleteProperty"
+        @add-page="displayFormProperty"
+      >
+        <template #options="{ item }">
+          <button
+            v-b-tooltip="{ customClass: 'bypass-btn-tooltip' }"
+            :title="item.byPass ? $t('Unbypass Calc') : $t('Bypass Calc')"
+            class="btn"
+            data-test="calcs-bypass"
+            @click="toggleBypass(item.id)"
+          >
+            <i v-show="!item.byPass" class="fas fa-sign-out-alt"></i>
+            <i v-show="item.byPass" class="fas fa-sign-in-alt"></i>
+          </button>
+          <div class="sortable-item-vr"></div>
+        </template>
+      </Sortable>
+
       <template slot="modal-footer">
         <span />
       </template>
     </template>
 
     <template v-else>
-      <required />
-      <form-input
-        ref="property"
-        v-model="add.property"
-        :label="$t('Property Name') + ' *'"
-        name="property"
-        :error="errors.property"
-        class="mb-3"
-        data-cy="calcs-property-name"
-        required
-        aria-required="true"
-      />
-      <form-text-area
-        ref="name"
-        v-model="add.name"
-        :label="$t('Description') + ' *'"
-        name="name"
-        :error="errors.name"
-        class="mb-3"
-        data-cy="calcs-property-description"
-        required
-        aria-required="true"
-      />
+      <b-container>
+        <b-row class="p-0">
+          <b-col class="pl-0">
+            <form-input
+              ref="property"
+              v-model="add.property"
+              :label="$t('Property Name') + ' *'"
+              name="property"
+              :error="errors.property"
+              class="mb-3"
+              data-cy="calcs-property-name"
+              required
+              aria-required="true"
+            />
+          </b-col>
+          <b-col class="pr-0">
+            <form-text-area
+              ref="name"
+              v-model="add.name"
+              :label="$t('Description') + ' *'"
+              name="name"
+              :error="errors.name"
+              class="mb-3"
+              data-cy="calcs-property-description"
+              required
+              aria-required="true"
+            />
+          </b-col>
+        </b-row>
+      </b-container>
       <div class="form-group mb-3" style="position: relative">
         <label v-show="isJS">{{ $t("Formula") + " *" }}</label>
         <div class="float-right">
@@ -168,12 +162,14 @@ import { FormInput, FormTextArea } from "@processmaker/vue-form-elements";
 import MonacoEditor from "vue-monaco";
 import Validator from "@chantouchsek/validatorjs";
 import FocusErrors from "../mixins/focusErrors";
+import Sortable from './sortable/Sortable.vue';
 
 export default {
   components: {
     FormInput,
     FormTextArea,
-    MonacoEditor
+    MonacoEditor,
+    Sortable,
   },
   mixins: [FocusErrors],
   props: ["value"],
@@ -208,18 +204,13 @@ export default {
       },
       fields: [
         {
-          label: this.$t("Property Name"),
-          key: "property"
+          label: this.$t("Name"),
+          key: "property",
         },
         {
-          label: this.$t("Description"),
-          key: "name"
+          label: this.$t("Type"),
+          key: "type",
         },
-        {
-          key: "__actions",
-          label: "",
-          class: "text-right"
-        }
       ],
       monacoOptions: {
         automaticLayout: true,
@@ -258,9 +249,14 @@ export default {
       this.value.forEach((item) => {
         this.numberItem++;
         item.id = this.numberItem;
+
+        if (!Object.hasOwn(item, 'byPass')) {
+          item.byPass = false;
+        }
       });
+
       this.current = this.value;
-    }
+    },
   },
   created() {
     Validator.register(
@@ -334,6 +330,13 @@ export default {
         this.focusFirstCalculatedPropertiesError();
       }
     },
+    toggleBypass(itemId) {
+      this.current = this.current.map((item) =>
+        item.id === itemId ? { ...item, byPass: !item.byPass } : item,
+      );
+
+      this.$emit("input", this.current);
+    },
     saveProperty() {
       if (this.add.id === 0) {
         this.numberItem++;
@@ -342,7 +345,8 @@ export default {
           property: this.add.property,
           name: this.add.name,
           formula: this.add.formula,
-          type: this.add.type
+          type: this.add.type,
+          byPass: false,
         });
       } else {
         this.current.forEach((item) => {
@@ -400,4 +404,16 @@ export default {
 .editor-border.is-invalid {
   border-color: #dc3545;
 }
+
+.bypass-btn-tooltip::v-deep {
+  & .tooltip-inner {
+    background-color: #EBEEF2 !important;
+    color: #444444 !important;
+  }
+
+  & .arrow:before {
+    border-top-color: #EBEEF2 !important;
+    border-bottom-color: #EBEEF2 !important;
+  }
+}
 </style>
diff --git a/src/components/sortable/Sortable.vue b/src/components/sortable/Sortable.vue
index 87ae15a9c..d78a621e1 100644
--- a/src/components/sortable/Sortable.vue
+++ b/src/components/sortable/Sortable.vue
@@ -15,6 +15,7 @@
         <button
           type="button"
           class="btn sortable-btn-new"
+          v-bind="dataTestActions.btnNew"
           @click="$emit('add-page', $event)"
         >
           <i class="fa fa-plus"></i>
@@ -23,26 +24,46 @@
     </div>
 
     <SortableList
+      :fields="fields"
       :items="items"
       :filtered-items="filteredItems"
+      :inline-edit="inlineEdit"
+      :disable-key="disableKey"
+      :data-test-actions="dataTestActions"
       @ordered="$emit('ordered', $event)"
       @item-edit="$emit('item-edit', $event)"
       @item-delete="$emit('item-delete', $event)"
-    />
+    >
+      <template #options="{ item }">
+        <slot name="options" :item="item"></slot>
+      </template>
+    </SortableList>
   </div>
 </template>
 
 <script>
-import SortableList from './sortableList/SortableList.vue'
+import SortableList from './sortableList/SortableList.vue';
 
 export default {
   name: 'Sortable',
   components: {
-    SortableList
+    SortableList,
   },
   props: {
+    fields: { type: Array, required: true },
     items: { type: Array, required: true },
     filterKey: { type: String, required: true },
+    disableKey: { type: String, default: null },
+    inlineEdit: { type: Boolean, default: true },
+    dataTestActions: {
+      type: Object,
+      default: () => ({
+        tableBox: { 'data-test': 'sortable-table-box' },
+        btnNew: { 'data-test': 'sortable-btn-new' },
+        btnEdit: { 'data-test': 'sortable-btn-edit' },
+        btnDelete: { 'data-test': 'sortable-btn-remove' },
+      }),
+    },
   },
   data() {
     return {
@@ -54,7 +75,7 @@ export default {
           this.$set(item, "order", index + 1);
         }
         return item;
-      })
+      }),
     };
   },
   watch: {
diff --git a/src/components/sortable/sortableList/SortableList.vue b/src/components/sortable/sortableList/SortableList.vue
index 85453dfb5..3e73e4a10 100644
--- a/src/components/sortable/sortableList/SortableList.vue
+++ b/src/components/sortable/sortableList/SortableList.vue
@@ -1,51 +1,85 @@
 <template>
   <div class="row mt-3">
-    <div class="col p-0 border rounded-lg sortable-list">
-      <div class="sortable-list-header">
-        <div class="sortable-item-icon"></div>
-        <div class="sortable-list-title">PAGE NAME</div>
-      </div>
-      <div class="sortable-container" @dragover="dragOver">
+    <div
+      class="p-0 border rounded-lg sortable-list"
+      v-bind="dataTestActions.tableBox"
+      @dragover="dragOver"
+    >
+      <div class="sortable-list-tr">
+        <div class="sortable-list-td"></div>
         <div
-          v-for="(item, index) in sortedItems"
-          :key="index"
-          :data-order="item.order"
-          :data-test="`item-${item.order}`"
-          :title="item.name"
-          draggable="true"
-          @dragstart="(event) => dragStart(event, item.order)"
-          @dragenter="(event) => dragEnter(event, item.order)"
-          @dragend="dragEnd"
-          class="sortable-item sortable-draggable"
+          v-for="field in fields"
+          :key="field.key"
+          class="sortable-list-td sortable-list-header"
         >
+          {{ field.label }}
+        </div>
+        <div class="sortable-list-td"></div>
+      </div>
+      <div
+        v-for="(item, index) in sortedItems"
+        :key="`item-${index}`"
+        :data-order="item.order"
+        :data-test="`item-${item.order}`"
+        :title="item.name"
+        :class="[
+          'sortable-list-tr',
+          'sortable-item',
+          { 'sortable-item-disabled': isDisabled(item) },
+        ]"
+        draggable="true"
+        @dragstart="(event) => dragStart(event, item.order)"
+        @dragenter="(event) => dragEnter(event, item.order)"
+        @dragend="dragEnd"
+      >
+        <div class="sortable-list-td">
           <div class="sortable-item-icon">
             <i class="fas fa-bars"></i>
           </div>
-          <div class="rounded sortable-item-name">
-            <b-form-input
-              v-if="editRowIndex === index"
-              v-model="newName"
-              type="text"
-              autofocus
-              required
-              :state="validateState(newName, item)"
-              :error="validateError(newName, item)"
-              @blur.stop="onBlur(newName, item)"
-              @keydown.enter.stop="onBlur(newName, item)"
-              @keydown.esc.stop="onCancel(item)"
-              @focus="onFocus(item)"
-            />
-            <span v-else>{{ item.name }}</span>
-          </div>
+        </div>
+        <div
+          v-for="field in fields"
+          :key="field.key"
+          class="sortable-list-td sortable-item-prop"
+        >
+          <b-form-input
+            v-if="editRowIndex === index"
+            v-model="newName"
+            type="text"
+            autofocus
+            required
+            :state="validateState(newName, item)"
+            :error="validateError(newName, item)"
+            @blur.stop="onBlur(newName, item)"
+            @keydown.enter.stop="onBlur(newName, item)"
+            @keydown.esc.stop="onCancel(item)"
+            @focus="onFocus(item)"
+          />
+          <span v-else>{{ item[field.key] }}</span>
+        </div>
+
+        <div class="sortable-list-td">
           <div class="border rounded-lg sortable-item-action">
             <button v-if="editRowIndex === index" class="btn">
               <i class="fas fa-check"></i>
             </button>
-            <button v-else class="btn" @click.stop="onClick(item, index)">
+            <button
+              v-else
+              class="btn"
+              title="Edit"
+              v-bind="dataTestActions.btnEdit"
+              @click.stop="onClick(item, index)"
+            >
               <i class="fas fa-edit"></i>
             </button>
             <div class="sortable-item-vr"></div>
-            <button class="btn" @click="$emit('item-delete', item)">
+            <slot name="options" :item="item"></slot>
+            <button
+              class="btn"
+              title="Delete"
+              v-bind="dataTestActions.btnDelete"
+              @click="$emit('item-delete', item)"
+            >
               <i class="fas fa-trash-alt"></i>
             </button>
           </div>
@@ -59,8 +93,12 @@
 export default {
   name: 'SortableList',
   props: {
+    fields: { type: Array, required: true },
     items: { type: Array, required: true },
     filteredItems: { type: Array, required: true },
+    inlineEdit: { type: Boolean, default: true },
+    disableKey: { type: String, default: null },
+    dataTestActions: { type: Object, required: true },
   },
   data() {
     return {
@@ -77,7 +115,7 @@ export default {
         this.refreshSort &&
         [...this.filteredItems].sort((a, b) => a.order - b.order);
       return sortedItems;
-    }
+    },
   },
   methods: {
     validateState(name, item) {
@@ -120,6 +158,11 @@ export default {
       this.editRowIndex = null;
     },
     onClick(item, index) {
+      if (!this.inlineEdit) {
+        this.$emit("item-edit", item);
+        return;
+      }
+
       this.editRowIndex = index;
       this.$emit("item-edit", item);
     },
@@ -185,6 +228,9 @@ export default {
     dragOver(event) {
       event.preventDefault();
     },
+    isDisabled(item) {
+      return this.disableKey ? item[this.disableKey] : false;
+    },
   },
 }
 </script>
diff --git a/src/components/sortable/sortableList/sortableList.scss b/src/components/sortable/sortableList/sortableList.scss
index 117efdf5e..14be0d65c 100644
--- a/src/components/sortable/sortableList/sortableList.scss
+++ b/src/components/sortable/sortableList/sortableList.scss
@@ -2,44 +2,57 @@ $border-color: #cdddee;
 
 .sortable {
   &-list {
-    display: flex;
+    display: table;
     flex-direction: column;
+    width: 100%;
     border: 1px solid $border-color !important;
 
-    &-header {
-      display: flex;
-      align-items: center;
+    &-tr {
+      display: table-row;
+
+      &:last-child > .sortable-list-td {
+        border-bottom: none;
+      }
+    }
+
+    &-td {
+      display: table-cell;
       border-bottom: 1px solid $border-color;
+
+      &:first-child {
+        width: 9%;
+      }
+
+      &:nth-child(2) {
+        width: 40%;
+      }
+
+      &:not(:first-child):not(:nth-child(2)):not(:last-child) {
+        width: auto;
+      }
+
+      &:last-child {
+        width: 1%;
+        white-space: nowrap;
+      }
     }
 
-    &-title {
-      padding-left: 16px;
+    &-header {
+      padding: 16px 0 16px 16px;
       font-size: 14px;
-      font-weight: bold;
+      font-weight: 700;
       color: #566877;
+      text-transform: uppercase;
     }
   }
 
-  &-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 340px;
-    overflow-x: auto;
-  }
-
   &-item {
-    display: flex;
-    align-items: center;
-    height: 56px;
-    border-bottom: 1px solid $border-color;
     cursor: move;
 
     &-icon {
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 64px;
       height: 56px;
     }
 
@@ -47,8 +60,7 @@ $border-color: #cdddee;
       color: #6A7888;
     }
 
-    &-name {
-      flex-grow: 1;
+    &-prop {
       padding: 8px 16px;
       font-size: 15px;
       color: #556271;
@@ -65,6 +77,10 @@ $border-color: #cdddee;
       margin: 9px 0;
       border-right: 1px solid $border-color;
     }
+
+    &-disabled > .sortable-item-prop {
+      color: rgba(85, 98, 113, 0.5);
+    }
   }
 }
 
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index a5eddd9ea..2bd11d336 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -368,16 +368,18 @@
       :ok-title="$t('DONE')"
       ok-only
       ok-variant="secondary"
-      header-class = "modal-header-custom"
+      header-class="modal-header-custom"
     >
-    <template #modal-title>
-      <h5 class="modal-title">{{ $t('Edit Pages') }}</h5>
-      <span class="modal-subtitle">{{ $t('Change pages order and name') }}</span>
-    </template>
-    <template #modal-header-close="{ close }">
-      <button type="button" aria-label="Close" class="close"  @click="close()">×</button>
-    </template>
+      <template #modal-title>
+        <h5 class="modal-title">{{ $t('Edit Pages') }}</h5>
+        <span class="modal-subtitle">{{ $t('Change pages order and name') }}</span>
+      </template>
+      <template #modal-header-close="{ close }">
+        <button type="button" aria-label="Close" class="close">×</button>
+      </template>
+
       <Sortable
+        :fields="fields"
         :items="config"
         filter-key="name"
         @item-edit="() => {}"
@@ -604,6 +606,12 @@ export default {
       editPageIndex: null,
       editPageName: "",
       originalPageName: null,
+      fields: [
+        {
+          label: this.$t("Name"),
+          key: "name",
+        },
+      ],
       config,
       confirmMessage: "",
       pageDelete: 0,
diff --git a/src/stories/Sortable.stories.js b/src/stories/Sortable.stories.js
index 46070b6a7..812f9b063 100644
--- a/src/stories/Sortable.stories.js
+++ b/src/stories/Sortable.stories.js
@@ -59,6 +59,12 @@ export default {
 // Preview the component
 export const Preview = {
   args: {
+    fields: [
+      {
+        label: "Name",
+        key: "name",
+      },
+    ],
     filterKey: "name",
     items: [
       { name: "Page 1", order: 1 },
@@ -73,6 +79,12 @@ export const Preview = {
 // User can reorder items
 export const UserCanReorderItems = {
   args: {
+    fields: [
+      {
+        label: "Name",
+        key: "name",
+      },
+    ],
     filterKey: "name",
     items: [
       { name: "Page 1", order: 1 },
@@ -122,6 +134,12 @@ export const UserCanReorderItems = {
 // User can filter by text
 export const UserCanFilterByText = {
   args: {
+    fields: [
+      {
+        label: "Name",
+        key: "name",
+      },
+    ],
     filterKey: "name",
     items: [
       { name: "Zeus", order: 1 },
@@ -170,6 +188,12 @@ export const UserCanFilterByText = {
 // User can sort with filter by text
 export const UserCanSortWithFilterByText = {
   args: {
+    fields: [
+      {
+        label: "Name",
+        key: "name",
+      },
+    ],
     filterKey: "name",
     items: [
       { name: "Zeus", order: 1 },
@@ -238,6 +262,12 @@ export const UserCanSortWithFilterByText = {
 // User can reorder items that does not have an order
 export const UserCanReorderItemsThatDoesNotHaveAnOrder = {
   args: {
+    fields: [
+      {
+        label: "Name",
+        key: "name",
+      },
+    ],
     filterKey: "name",
     items: [
       { name: "Page 1" },
diff --git a/tests/e2e/fixtures/FOUR-13453.json b/tests/e2e/fixtures/FOUR-13453.json
new file mode 100644
index 000000000..5e53208ad
--- /dev/null
+++ b/tests/e2e/fixtures/FOUR-13453.json
@@ -0,0 +1 @@
+{"type":"screen_package","version":"2","screens":[{"id":11,"uuid":"9c19be72-bd51-41a3-a8b0-adf7ea50ca7a","screen_category_id":"1","title":"screen01","description":"screen 01","type":"FORM","config":[{"name":"screen01","items":[{"label":"Line Input","config":{"icon":"far fa-square","name":"first_name","type":"text","label":"First Name","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":"{{first_name_calc}}"}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"extends":{"props":["label","error","options","helper","name","value","selectedControl"],"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Line Input","config":{"icon":"far fa-square","name":"last_name","type":"text","label":"Last Name","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":null}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"_Ctor":[],"extends":{"_Ctor":[],"props":{"name":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"options":{"type":null},"selectedControl":{"type":null}},"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Line Input","config":{"icon":"far fa-square","name":"full_name","type":"text","label":"Full Name","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":null}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"_Ctor":[],"extends":{"_Ctor":[],"props":{"name":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"options":{"type":null},"selectedControl":{"type":null}},"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Line Input","config":{"icon":"far fa-square","name":"email","type":"text","label":"Email","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":"{{first_name_calc}}"}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"_Ctor":[],"extends":{"_Ctor":[],"props":{"name":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"options":{"type":null},"selectedControl":{"type":null}},"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Submit Button","config":{"icon":"fas fa-share-square","name":null,"event":"submit","label":"Save","loading":false,"tooltip":[],"variant":"primary","fieldValue":null,"loadingLabel":"Loading...","defaultSubmit":true},"component":"FormButton","inspector":[{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the button's text"}},{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^(?:[A-Za-z])(?:[0-9A-Z_.a-z])*(?<![.])$\/|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormMultiselect","field":"event","config":{"label":"Type","helper":"Choose whether the button should submit the form","options":[{"value":"submit","content":"Submit Button"},{"value":"script","content":"Regular Button"}]}},{"type":"LoadingSubmitButton","field":"loading","config":{"label":"Loading Submit Button","helper":"Loading Submit Button"}},{"type":"LabelSubmitButton","field":"loadingLabel","config":{"label":"Loading Submit Button Label","helper":"Loading Submit Button Label"}},{"type":{"props":["label","value","helper"],"watch":{"value":{"immediate":true}},"methods":[],"computed":[],"_compiled":true,"components":{"FormTextArea":{"name":"FormTextArea","_Ctor":[],"props":{"name":{"type":null},"rows":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"readonly":{"type":null},"richtext":{"type":null},"controlClass":{"type":null}},"watch":{"rows":{"immediate":true}},"mixins":[{"methods":[],"directives":{"uni-id":[],"uni-for":[],"uni-form":[],"uni-aria-owns":[],"uni-aria-flowto":[],"uni-aria-controls":[],"uni-aria-labelledby":[],"uni-aria-describedby":[],"uni-aria-activedescendant":[]}},{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"Editor":{"props":{"plugins":[null,null],"toolbar":[null,null],"modelEvents":[null,null]},"watch":[]},"DisplayErrors":{"props":["name","error","validator"],"computed":[],"_compiled":true,"staticRenderFns":[]},"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"field":"tooltip","config":{"label":"Tooltip","helper":null}},{"type":"FormInput","field":"fieldValue","config":{"label":"Value","helper":"The value being submitted"}},{"type":"FormMultiselect","field":"variant","config":{"label":"Button Variant Style","helper":"The variant determines the appearance of the button","options":[{"value":"primary","content":"Primary"},{"value":"secondary","content":"Secondary"},{"value":"success","content":"Success"},{"value":"danger","content":"Danger"},{"value":"warning","content":"Warning"},{"value":"info","content":"Info"},{"value":"light","content":"Light"},{"value":"dark","content":"Dark"},{"value":"link","content":"Link"}]}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormSubmit","editor-component":"FormButton"}],"order":1}],"computed":[{"id":15,"name":"first_name","type":"javascript","order":1,"byPass":false,"formula":"return this.first_name.toLowerCase()","property":"first_name_calc"},{"id":16,"name":"last_name","type":"javascript","order":2,"byPass":false,"formula":"return this.first_name.toUpperCase()","property":"last_name"},{"id":17,"name":"email","type":"javascript","order":3,"byPass":false,"formula":"return this.first_name + \"@email.com\"","property":"email"},{"id":18,"name":"full_name","type":"javascript","order":4,"byPass":false,"formula":"return this.first_name + \" \" + this.last_name","property":"full_name"}],"custom_css":null,"created_at":"2024-05-22T02:10:33+00:00","updated_at":"2024-06-11T16:25:37+00:00","status":"ACTIVE","key":null,"watchers":[],"translations":null,"is_template":0,"asset_type":null,"projects":"[]","categories":[{"id":1,"uuid":"9c19b7a0-e236-43a1-b6c0-6e11753ae5b1","name":"Uncategorized","status":"ACTIVE","is_system":0,"created_at":"2024-05-22T01:51:28+00:00","updated_at":"2024-05-22T01:51:28+00:00","pivot":{"category_type":"ProcessMaker\\Models\\ScreenCategory","assignable_id":11,"category_id":1}}]}],"screen_categories":[],"scripts":[]}
diff --git a/tests/e2e/specs/CalcDragAndDrop.spec.js b/tests/e2e/specs/CalcDragAndDrop.spec.js
new file mode 100644
index 000000000..35564c990
--- /dev/null
+++ b/tests/e2e/specs/CalcDragAndDrop.spec.js
@@ -0,0 +1,134 @@
+describe('Calcs list Drag&Drop', () => {
+  const clickTopBarCalcs = () => {
+    cy.get('[data-cy="topbar-calcs"]').click();
+  };
+
+  const dragAndDrop = (source, target) => {
+    const dataTransfer = new DataTransfer();
+
+    cy.get(source).trigger('dragstart', { dataTransfer });
+    cy.get(target)
+      .trigger('dragenter')
+      .trigger('dragover', { dataTransfer })
+      .trigger('drop', { dataTransfer });
+    cy.get(source).trigger('dragend');
+  };
+
+  beforeEach(() => {
+    cy.visit('/');
+
+    cy.loadFromJson('FOUR-13453.json', 0);
+  });
+
+  it('should drag and drop first row to third row', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).as('firstRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-3"]').eq(0).as('thirdRow');
+
+    cy.get('@firstRow').contains('first_name_calc');
+    cy.get('@thirdRow').contains('email');
+
+    dragAndDrop('@firstRow', '@thirdRow');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).contains('last_name');
+    cy.get('[data-cy="calcs-table"] [data-test="item-3"]').eq(0).contains('first_name_calc');
+  });
+
+  it('should drag and drop second row to last row', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-2"]').eq(0).as('secondRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).as('lastRow');
+
+    cy.get('@secondRow').contains('last_name');
+    cy.get('@lastRow').contains('full_name');
+
+    dragAndDrop('@secondRow', '@lastRow');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-2"]').eq(0).contains('email');
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).contains('last_name');
+  });
+
+  it('should drag and drop last row to first row', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).as('lastRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).as('firstRow');
+
+    cy.get('@lastRow').contains('full_name');
+    cy.get('@firstRow').contains('first_name');
+
+    dragAndDrop('@lastRow', '@firstRow');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).contains('email');
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).contains('full_name');
+  });
+
+  it('should drag and drop to sort in ascending mode', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).as('firstRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-2"]').eq(0).as('secondRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-3"]').eq(0).as('thirdRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).as('lastRow');
+
+    cy.get('@firstRow').contains('first_name');
+    cy.get('@secondRow').contains('last_name');
+    cy.get('@thirdRow').contains('email');
+    cy.get('@lastRow').contains('full_name');
+
+    dragAndDrop('@lastRow', '@secondRow');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).contains('email');
+    cy.get('[data-cy="calcs-table"] [data-test="item-2"]').eq(0).contains('full_name');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).as('lastRow');
+
+    dragAndDrop('@lastRow', '@firstRow');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).contains('last_name');
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).contains('email');
+  });
+
+  it('should edit the name of the first calc', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).as('firstRow');
+
+    cy.get('@firstRow').contains('first_name_calc');
+
+    cy.get('@firstRow').find('[data-cy="calcs-table-edit"]').click();
+
+    cy.get('[data-cy="calcs-property-name"]').clear().type("form_input_1");
+    cy.get('[data-cy="calcs-button-save"]').click();
+
+    cy.get('@firstRow').contains('form_input_1');
+  });
+
+  it('should delete the third calc', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-3"]').eq(0).as('thirdRow');
+
+    cy.get('@thirdRow').contains('email');
+
+    cy.get('@thirdRow').find('[data-cy="calcs-table-remove"]').click();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-3"]').should('not.exist');
+  });
+
+  it('should bypass the second calc', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-2"]').eq(0).as('secondRow');
+
+    cy.get('@secondRow').contains('last_name');
+
+    cy.get('@secondRow').should('not.have.class', 'sortable-item-disabled');
+
+    cy.get('@secondRow').find('[data-test="calcs-bypass"]').click();
+
+    cy.get('@secondRow').should('have.class', 'sortable-item-disabled');
+  });
+});
diff --git a/tests/e2e/specs/ComputedFields.spec.js b/tests/e2e/specs/ComputedFields.spec.js
index 3c2813033..5a06cffb6 100644
--- a/tests/e2e/specs/ComputedFields.spec.js
+++ b/tests/e2e/specs/ComputedFields.spec.js
@@ -45,10 +45,7 @@ describe("Computed fields", () => {
       .clear()
       .type("pow(form_input_2, 2)");
     cy.get('[data-cy="calcs-button-save"]').click();
-    cy.get('[data-cy="calcs-table"]').should(
-      "contain.text",
-      "form_input_1 = form_input_2 ^ 2"
-    );
+    cy.get('[data-cy="calcs-table"]').should('contain.text', 'form_input_1');
     cy.get('[data-cy="calcs-modal"] .close').click();
 
     // Edit the created calculated property
@@ -63,10 +60,7 @@ describe("Computed fields", () => {
       .clear()
       .type("form_input_1 * 100");
     cy.get('[data-cy="calcs-button-save"]').click();
-    cy.get('[data-cy="calcs-table"]').should(
-      "contain.text",
-      "form_input_2 = form_input_1 * 100"
-    );
+    cy.get('[data-cy="calcs-table"]').should('contain.text', 'form_input_2');
     cy.get('[data-cy="calcs-modal"] .close').click();
 
     // Delete the created calculated property
@@ -94,7 +88,7 @@ describe("Computed fields", () => {
     cy.get('[data-cy="calcs-button-save"]').click();
     cy.get('[data-cy="calcs-table"]').should(
       "contain.text",
-      "form_input_1 = form_input_2 ^ 2"
+      "form_input_1"
     );
     cy.get('[data-cy="calcs-modal"] .close').click();