From f433f648eb9999e21a86ac146cfac413dc2acac8 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 15 Aug 2024 23:20:40 +0200
Subject: [PATCH] feat: Implement Data frame editor. WF-66

---
 ...bb4d0e86-619e-4367-a180-be28ab6059f4.jsonl |   7 +-
 apps/hello/.wf/metadata.json                  |   2 +-
 apps/hello/main.py                            |  39 ++-
 docs/framework/dataframe.mdx                  |   4 +-
 .../src/components/core/base/BaseDropdown.vue | 133 +++++++
 .../components/core/content/CoreDataframe.vue | 331 ++++++++++++------
 .../CoreDataframe/CoreDataframeCell.vue       |  41 +++
 .../CoreDataframeCellBoolean.vue              |  50 +++
 .../CoreDataframe/CoreDataframeCellNumber.vue |  73 ++++
 .../CoreDataframe/CoreDataframeCellText.vue   |  79 +++++
 .../CoreDataframeCellUnknown.vue              |  25 ++
 .../CoreDataframe/CoreDataframeRow.vue        |  76 ++++
 .../core/content/CoreDataframe/constants.ts   |   8 +
 .../CoreDataframe/useDataframeValueBroker.ts  | 251 +++++++++++++
 .../core/content/CoreDataframe/useJobs.ts     |  37 ++
 src/ui/src/core/index.ts                      |   7 +-
 src/ui/src/core/serializer.ts                 |   9 +
 src/writer/core.py                            | 110 +++++-
 tests/backend/test_core.py                    |  60 ++++
 19 files changed, 1228 insertions(+), 114 deletions(-)
 create mode 100644 src/ui/src/components/core/base/BaseDropdown.vue
 create mode 100644 src/ui/src/components/core/content/CoreDataframe/CoreDataframeCell.vue
 create mode 100644 src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue
 create mode 100644 src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellNumber.vue
 create mode 100644 src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue
 create mode 100644 src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellUnknown.vue
 create mode 100644 src/ui/src/components/core/content/CoreDataframe/CoreDataframeRow.vue
 create mode 100644 src/ui/src/components/core/content/CoreDataframe/constants.ts
 create mode 100644 src/ui/src/components/core/content/CoreDataframe/useDataframeValueBroker.ts
 create mode 100644 src/ui/src/components/core/content/CoreDataframe/useJobs.ts
 create mode 100644 src/ui/src/core/serializer.ts

diff --git a/apps/hello/.wf/components-page-0-bb4d0e86-619e-4367-a180-be28ab6059f4.jsonl b/apps/hello/.wf/components-page-0-bb4d0e86-619e-4367-a180-be28ab6059f4.jsonl
index f3f7c9f71..b6e3c1774 100644
--- a/apps/hello/.wf/components-page-0-bb4d0e86-619e-4367-a180-be28ab6059f4.jsonl
+++ b/apps/hello/.wf/components-page-0-bb4d0e86-619e-4367-a180-be28ab6059f4.jsonl
@@ -4,7 +4,7 @@
 {"id": "d1e01ce1-fab1-4a6e-91a1-1f45f9e57aa5", "type": "column", "content": {"width": "1", "isCollapsible": "", "title": "", "isSticky": "yes"}, "isCodeManaged": false, "position": 0, "parentId": "92a2c0c8-7ab4-4865-b7eb-ed437408c8f5"}
 {"id": "0569937e-c72c-4fb9-820e-2ae56e17bcc0", "type": "column", "content": {"width": "1.61"}, "isCodeManaged": false, "position": 1, "parentId": "92a2c0c8-7ab4-4865-b7eb-ed437408c8f5"}
 {"id": "9c30af6d-4ee5-4782-9169-0f361d67fa76", "type": "section", "content": {"title": ""}, "isCodeManaged": false, "position": 0, "parentId": "d1e01ce1-fab1-4a6e-91a1-1f45f9e57aa5"}
-{"id": "7fdd1d02-53de-4466-bd3c-4822cbc2694f", "type": "image", "content": {"src": "static/pigeon1.jpg?8", "caption": ""}, "isCodeManaged": false, "position": 0, "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76"}
+{"id": "7fdd1d02-53de-4466-bd3c-4822cbc2694f", "type": "image", "content": {"src": "static/pigeon1.jpg?8", "caption": ""}, "isCodeManaged": false, "position": 0, "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76", "visible": {"expression": true, "binding": "", "reversed": false}}
 {"id": "ee919cd6-8153-4f34-8c6a-bfc1153df360", "type": "tabs", "content": {}, "isCodeManaged": false, "position": 0, "parentId": "0569937e-c72c-4fb9-820e-2ae56e17bcc0"}
 {"id": "c6392876-7cfd-4680-8725-b04f43ff294f", "type": "tab", "content": {"name": "Data and Charts"}, "isCodeManaged": false, "position": 0, "parentId": "ee919cd6-8153-4f34-8c6a-bfc1153df360"}
 {"id": "da00a61f-0ee2-434e-acd6-228d32eae5c6", "type": "tab", "content": {"name": "Repeater"}, "isCodeManaged": false, "position": 2, "parentId": "ee919cd6-8153-4f34-8c6a-bfc1153df360"}
@@ -74,3 +74,8 @@
 {"id": "zfp1koasiuleygmz", "type": "pagination", "content": {"page": "@{paginated_members_page}", "pageSize": "@{paginated_members_page_size}", "totalItems": "@{paginated_members_total_items}", "pageSizeOptions": "1,2,5", "pageSizeShowAll": "no", "jumpTo": "no", "urlParam": "no"}, "isCodeManaged": false, "position": 1, "parentId": "e1ax8ctt8lrao0e4", "handlers": {"wf-change-page": "handle_paginated_members_page_change", "wf-change-page-size": "handle_paginated_members_page_size_change"}, "visible": {"expression": true, "binding": "", "reversed": false}}
 {"id": "b27lw9ex8ig3x17p", "type": "tags", "content": {"tags": "{\n  \"fiction\": \"fiction\",\n  \"inspirational\": \"inspirational\",\n  \"ai-generated\": \"ai-generated\"\n}", "seed": ""}, "isCodeManaged": false, "position": 2, "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76", "visible": {"expression": true, "binding": "", "reversed": false}}
 {"id": "804e15bf-11a7-463d-8082-f46ea3acac1b", "type": "separator", "content": {}, "isCodeManaged": false, "position": 3, "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76"}
+{"id": "1sajvc1p1c293w26", "type": "dataframe", "content": {"dataframe": "@{editable_df}", "enableEdit": "yes", "enableRecordAdd": "yes", "enableRecordUpdate": "yes", "enableSearch": "yes", "showIndex": "yes", "actions": "{\n  \"remove\": \"Remove\",\n  \"open\": \"Open\",\n  \"notify\": \"Notify\"\n}", "enableDownload": "yes"}, "isCodeManaged": false, "position": 1, "parentId": "axdad4l298047mxv", "handlers": {"wf-dataframe-add": "on_editable_df_record_add", "wf-dataframe-update": "on_editable_df_record_change", "wf-dataframe-action": "on_editable_df_record_action"}}
+{"id": "xmbpsuxhu7om9165", "type": "text", "content": {"text": "Opened row text: @{editable_df_open_text}\n(use row action from the dataframe to open a row)"}, "isCodeManaged": false, "position": 2, "parentId": "axdad4l298047mxv", "handlers": {}}
+{"id": "cqmyovmwxnxp7ffz", "type": "tabs", "content": {}, "isCodeManaged": false, "position": 1, "parentId": "0569937e-c72c-4fb9-820e-2ae56e17bcc0", "handlers": {}}
+{"id": "axdad4l298047mxv", "type": "tab", "content": {"name": "Dataframe"}, "isCodeManaged": false, "position": 5, "parentId": "ee919cd6-8153-4f34-8c6a-bfc1153df360", "handlers": {}}
+{"id": "3nluyquva0mt1a41", "type": "text", "content": {"text": "You can use Dataframe to visualize and edit Python Panda's data"}, "isCodeManaged": false, "position": 0, "parentId": "axdad4l298047mxv", "handlers": {}}
diff --git a/apps/hello/.wf/metadata.json b/apps/hello/.wf/metadata.json
index 1f76abe5a..d0c3a6a20 100644
--- a/apps/hello/.wf/metadata.json
+++ b/apps/hello/.wf/metadata.json
@@ -1,3 +1,3 @@
 {
-    "writer_version": "0.7.0rc2"
+    "writer_version": "0.7.5"
 }
\ No newline at end of file
diff --git a/apps/hello/main.py b/apps/hello/main.py
index fb11ecac0..d97a965a9 100644
--- a/apps/hello/main.py
+++ b/apps/hello/main.py
@@ -1,3 +1,4 @@
+import datetime
 import statistics
 
 import numpy as np
@@ -65,6 +66,17 @@ def _get_main_df():
     main_df = pd.read_csv("assets/main_df.csv")
     return main_df
 
+
+def _get_editable_df():
+
+    df = pd.DataFrame({
+        'number': [1, 2, 3],
+        'boolean': [True, False, True],
+        'object': [{"updatedAt": None}, {"updatedAt": None}, {"updatedAt": None}],
+        'text': ['one', 'two', 'three'],
+    })
+    return wf.EditableDataframe(df)
+
 def _get_highlighted_members():
     sample_df = _get_main_df().sample(3).set_index("name", drop=False)
     sample = sample_df.to_dict("index")
@@ -126,11 +138,36 @@ def _update_scatter_chart(state):
     )
     state["scatter_chart"] = fig
 
-# STATE INIT
 
+# UPDATES DATAFRAME
+
+# Subscribe this event handler to the `wf-dataframe-add` event
+def on_editable_df_record_add(state, payload):
+    state['editable_df'].record_add(payload)
+
+
+# Subscribe this event handler to the `wf-dataframe-update` event
+def on_editable_df_record_change(state, payload):
+    payload['record']['object']['updatedAt'] = str(datetime.datetime.now())
+    state['editable_df'].record_update(payload)
+
+# Subscribe this event handler to the `wf-dataframe-action` event
+def on_editable_df_record_action(state, payload):
+    record_index = payload['record_index']
+    if payload['action'] == 'remove':
+        state['editable_df'].record_remove(payload)
+    if payload['action'] == 'open':
+        state['editable_df_open_text'] = str(state['editable_df'].record(record_index)['text'])
+    if payload['action'] == 'notify':
+        state.add_notification("info", "Test", "Notify on this row : " + str(state['editable_df'].record(record_index)))
+
+
+# STATE INIT
 
 initial_state = wf.init_state({
     "main_df": _get_main_df(),
+    "editable_df": _get_editable_df(),
+    "editable_df_open_text": "<none>",
     "highlighted_members": _get_highlighted_members(),
     "random_df": _generate_random_df(),
     "hue_rotation": 26,
diff --git a/docs/framework/dataframe.mdx b/docs/framework/dataframe.mdx
index 77414035d..ec52caf57 100644
--- a/docs/framework/dataframe.mdx
+++ b/docs/framework/dataframe.mdx
@@ -70,9 +70,9 @@ def on_record_action(state, payload):
 	This event corresponds to a quick action in the drop-down menu to the left of the dataframe.
 	"""
 	record_index = payload['record_index']
-	if payload.action == 'remove':
+	if payload['action'] == 'remove':
 		state['mydf'].record_remove(payload)
-	if payload.action == 'open':
+	if payload['action'] == 'open':
 		state['record'] = state['df'].record(record_index) # dict representation of record
 ```
 
diff --git a/src/ui/src/components/core/base/BaseDropdown.vue b/src/ui/src/components/core/base/BaseDropdown.vue
new file mode 100644
index 000000000..32d62e905
--- /dev/null
+++ b/src/ui/src/components/core/base/BaseDropdown.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, PropType, ref } from "vue";
+
+defineProps({
+	options: {
+		type: Object as PropType<Record<string, string>>,
+		required: true,
+	},
+});
+
+const emits = defineEmits({
+	selected: (key: string) => typeof key === "string",
+});
+
+/**
+ * @deprecated use `useId` from Vue 3.5 when we upgrade
+ */
+function useId() {
+	return Math.random().toString();
+}
+
+const trigger = ref<Element>();
+
+const popoverId = useId();
+const popover = ref<Element & { hidePopover: () => void }>();
+const closePopover = () => popover.value?.hidePopover();
+
+const popoverTop = ref("unset");
+const popoverLeft = ref("unset");
+
+function computePopoverPosition() {
+	// the popover use an overlay with an absolute position, so we have to positionate it manually according to the trigger position
+	const boundingRect = trigger.value.getBoundingClientRect();
+	popoverTop.value = `${boundingRect.top + boundingRect.height + 4 + window.pageYOffset}px`;
+	popoverLeft.value = `${boundingRect.left + window.pageXOffset}px`;
+}
+
+function onItemClick(key: string) {
+	emits("selected", key);
+	closePopover();
+}
+
+onMounted(() => window.addEventListener("scroll", closePopover));
+onUnmounted(() => window.removeEventListener("scroll", closePopover));
+</script>
+
+<template>
+	<div class="BaseDropdown">
+		<button
+			ref="trigger"
+			:popovertarget="popoverId"
+			class="BaseDropdown__trigger"
+			@click="computePopoverPosition"
+		>
+			<i class="material-symbols-outlined">more_horiz</i>
+		</button>
+		<div
+			:id="popoverId"
+			ref="popover"
+			class="BaseDropdown__dropdown"
+			popover
+			:style="{ top: popoverTop, left: popoverLeft }"
+		>
+			<button
+				v-for="[key, value] of Object.entries(options)"
+				:key="key"
+				class="BaseDropdown__dropdown_item"
+				tabindex="1"
+				@click.capture="onItemClick(key)"
+			>
+				{{ value }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.BaseDropdown {
+	position: relative;
+}
+
+.BaseDropdown__trigger {
+	cursor: pointer;
+	background-color: var(--separatorColor);
+	border: 1px solid var(--emptinessColor);
+	height: 16px;
+	width: 16px;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.BaseDropdown__dropdown {
+	position: absolute;
+	z-index: 1;
+	top: 18px;
+	background-color: white;
+
+	flex-direction: column;
+
+	min-width: 120px;
+	margin: 0;
+
+	border-radius: 4px;
+	border: 1px solid var(--separatorColor);
+	box-shadow: var(--containerShadow);
+}
+.BaseDropdown__dropdown:popover-open {
+	display: flex;
+}
+
+.BaseDropdown__dropdown_item {
+	/* reset button */
+	background-color: transparent;
+	border: none;
+
+	text-align: left;
+
+	padding: 8px 16px;
+	border-bottom: 1px solid var(--separatorColor);
+	cursor: pointer;
+}
+.BaseDropdown__dropdown_item:focus {
+	outline-offset: -2px;
+}
+.BaseDropdown__dropdown_item:hover {
+	background-color: var(--separatorColor);
+}
+.BaseDropdown__dropdown_item:last-child {
+	border-bottom: unset;
+}
+</style>
diff --git a/src/ui/src/components/core/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
index cddbe3073..fa9470da4 100644
--- a/src/ui/src/components/core/content/CoreDataframe.vue
+++ b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="rootEl" class="CoreDataframe">
+	<div ref="rootEl" class="CoreDataframe" :aria-busy="isBusy">
 		<div ref="toolsEl" class="tools">
 			<div v-if="fields.enableSearch.value === 'yes'">
 				<WdsTextInput
@@ -15,7 +15,7 @@
 				class="download"
 				@click="download"
 			>
-				<i class="material-symbols-outlined"> download </i>
+				<i class="material-symbols-outlined">download</i>
 			</WdsControl>
 		</div>
 		<div ref="gridContainerEl" class="gridContainer" @scroll="handleScroll">
@@ -28,76 +28,77 @@
 				}"
 			>
 				<div
-					v-if="isIndexShown"
-					data-writer-grid-col="0"
-					class="cell headerCell indexCell"
+					:style="{
+						display: 'grid',
+						'grid-template-columns': gridTemplateColumns,
+					}"
 				>
-					<div class="name"></div>
-					<div class="widthAdjuster"></div>
-				</div>
-				<div
-					v-for="(columnName, columnPosition) in shownColumnNames"
-					:key="columnName"
-					:data-writer-grid-col="
-						columnPosition + (isIndexShown ? 1 : 0)
-					"
-					class="cell headerCell"
-					@click="handleSetOrder($event, columnName)"
-				>
-					<div class="name">
-						{{ columnName }}
+					<div v-if="hasActions"></div>
+
+					<div
+						v-if="isIndexShown"
+						data-writer-grid-col="0"
+						class="cell headerCell indexCell"
+					>
+						<div class="name"></div>
+						<div class="widthAdjuster"></div>
 					</div>
 					<div
-						class="icon"
-						:style="{
-							visibility:
-								orderSetting?.columnName == columnName
-									? 'visible'
-									: 'hidden',
-						}"
+						v-for="(columnName, columnPosition) in shownColumnNames"
+						:key="columnName"
+						:data-writer-grid-col="
+							columnPosition + (isIndexShown ? 1 : 0)
+						"
+						class="cell headerCell"
+						@click="handleSetOrder($event, columnName)"
 					>
-						<span
-							v-show="!orderSetting?.descending"
-							class="material-symbols-outlined"
-						>
-							arrow_downward
-						</span>
-						<span
-							v-show="orderSetting?.descending"
-							class="material-symbols-outlined"
+						<div class="name">
+							{{ columnName }}
+						</div>
+						<div
+							v-show="orderSetting?.columnName == columnName"
+							class="icon"
 						>
-							arrow_upward
-						</span>
+							<span class="material-symbols-outlined">{{
+								orderSetting?.descending
+									? "arrow_upward"
+									: "arrow_downward"
+							}}</span>
+						</div>
+						<div class="widthAdjuster"></div>
 					</div>
-					<div class="widthAdjuster"></div>
 				</div>
-				<template
+
+				<CoreDataframeRow
 					v-for="(row, rowNumber) in slicedTable?.data"
 					:key="rowNumber"
-				>
-					<div v-if="isIndexShown" class="cell indexCell">
-						<template v-if="tableIndex.length == 0">
-							{{ slicedTable.indices[rowNumber] }}
-						</template>
-						<template v-else>
-							{{ indexColumnNames.map((c) => row[c]).join(", ") }}
-						</template>
-					</div>
-					<div
-						v-for="columnName in shownColumnNames"
-						:key="columnName"
-						class="cell"
+					:style="{
+						'grid-template-columns': gridTemplateColumns,
+					}"
+					:row="row"
+					:actions="actions"
+					:use-markdown="useMarkdown"
+					:editable="enableRecordUpdate && !isBusy"
+					:columns="shownColumnNames"
+					:show-index="isIndexShown"
+					:index-text="
+						slicedTable.indices[rowNumber] ??
+						indexColumnNames.map((c) => row[c]).join(', ')
+					"
+					@action="handleActionRow"
+					@change="handleUpdateCell"
+				/>
+				<div v-if="enableRecordAdd" class="CoreDataframe__newRow cell">
+					<WdsButton
+						aria-label="Create a new row at the end"
+						size="small"
+						variant="tertiary"
+						@click="handleAddRow"
 					>
-						<BaseMarkdown
-							v-if="fields.useMarkdown.value == 'yes'"
-							:raw-text="row[columnName]"
-						>
-						</BaseMarkdown>
-						<template v-else>
-							{{ row[columnName] }}
-						</template>
-					</div>
-				</template>
+						<i class="material-symbols-outlined">add</i>
+						Add a row
+					</WdsButton>
+				</div>
 			</div>
 			<div
 				v-if="isRowCountMassive"
@@ -109,12 +110,14 @@
 </template>
 
 <script lang="ts">
-import { Ref, computed, inject, ref } from "vue";
+import { computed, inject, ref, shallowRef } from "vue";
 import { FieldCategory, FieldType } from "@/writerTypes";
+import CoreDataframeRow from "./CoreDataframe/CoreDataframeRow.vue";
 import {
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
+	accentColor,
 	separatorColor,
 } from "@/renderer/sharedStyleFields";
 import { onMounted } from "vue";
@@ -124,22 +127,61 @@ import { ComputedRef } from "vue";
 import { onUnmounted } from "vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 import WdsControl from "@/wds/WdsControl.vue";
-import BaseMarkdown from "../base/BaseMarkdown.vue";
+import { useDataFrameValueBroker } from "./CoreDataframe/useDataframeValueBroker";
+import {
+	ARQUERO_INTERNAL_ID,
+	DEFAULT_DATA_FRAME,
+	UNNAMED_INDEX_COLUMN_PATTERN,
+} from "./CoreDataframe/constants";
+import WdsButton from "@/wds/WdsButton.vue";
 
 const description = "A component to display Pandas DataFrames.";
-const defaultDataframe = `data:application/vnd.apache.arrow.file;base64,QVJST1cxAAD/////iAMAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAAlAIAAAQAAAABAAAADAAAAAgADAAEAAgACAAAAGwCAAAEAAAAXwIAAHsiaW5kZXhfY29sdW1ucyI6IFsiX19pbmRleF9sZXZlbF8wX18iXSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogImNvbF9hIiwgImZpZWxkX25hbWUiOiAiY29sX2EiLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiY29sX2IiLCAiZmllbGRfbmFtZSI6ICJjb2xfYiIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogIl9faW5kZXhfbGV2ZWxfMF9fIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfV0sICJjcmVhdG9yIjogeyJsaWJyYXJ5IjogInB5YXJyb3ciLCAidmVyc2lvbiI6ICIxMi4wLjAifSwgInBhbmRhc192ZXJzaW9uIjogIjEuNS4zIn0ABgAAAHBhbmRhcwAAAwAAAIgAAABEAAAABAAAAJT///8AAAECEAAAACQAAAAEAAAAAAAAABEAAABfX2luZGV4X2xldmVsXzBfXwAAAJD///8AAAABQAAAAND///8AAAECEAAAABgAAAAEAAAAAAAAAAUAAABjb2xfYgAAAMD///8AAAABQAAAABAAFAAIAAYABwAMAAAAEAAQAAAAAAABAhAAAAAgAAAABAAAAAAAAAAFAAAAY29sX2EAAAAIAAwACAAHAAgAAAAAAAABQAAAAAAAAAD/////6AAAABQAAAAAAAAADAAWAAYABQAIAAwADAAAAAADBAAYAAAAMAAAAAAAAAAAAAoAGAAMAAQACAAKAAAAfAAAABAAAAACAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAABAAAAAAAAAAAAAAAAMAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAIAAAAAAAAAAwAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAD/////AAAAABAAAAAMABQABgAIAAwAEAAMAAAAAAAEADwAAAAoAAAABAAAAAEAAACYAwAAAAAAAPAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAACgAMAAAABAAIAAoAAACUAgAABAAAAAEAAAAMAAAACAAMAAQACAAIAAAAbAIAAAQAAABfAgAAeyJpbmRleF9jb2x1bW5zIjogWyJfX2luZGV4X2xldmVsXzBfXyJdLCAiY29sdW1uX2luZGV4ZXMiOiBbeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiBudWxsLCAicGFuZGFzX3R5cGUiOiAidW5pY29kZSIsICJudW1weV90eXBlIjogIm9iamVjdCIsICJtZXRhZGF0YSI6IHsiZW5jb2RpbmciOiAiVVRGLTgifX1dLCAiY29sdW1ucyI6IFt7Im5hbWUiOiAiY29sX2EiLCAiZmllbGRfbmFtZSI6ICJjb2xfYSIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJjb2xfYiIsICJmaWVsZF9uYW1lIjogImNvbF9iIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiAiX19pbmRleF9sZXZlbF8wX18iLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9XSwgImNyZWF0b3IiOiB7ImxpYnJhcnkiOiAicHlhcnJvdyIsICJ2ZXJzaW9uIjogIjEyLjAuMCJ9LCAicGFuZGFzX3ZlcnNpb24iOiAiMS41LjMifQAGAAAAcGFuZGFzAAADAAAAiAAAAEQAAAAEAAAAlP///wAAAQIQAAAAJAAAAAQAAAAAAAAAEQAAAF9faW5kZXhfbGV2ZWxfMF9fAAAAkP///wAAAAFAAAAA0P///wAAAQIQAAAAGAAAAAQAAAAAAAAABQAAAGNvbF9iAAAAwP///wAAAAFAAAAAEAAUAAgABgAHAAwAAAAQABAAAAAAAAECEAAAACAAAAAEAAAAAAAAAAUAAABjb2xfYQAAAAgADAAIAAcACAAAAAAAAAFAAAAAsAMAAEFSUk9XMQ==`;
+
+const dataFrameUpdateHandlerStub = `
+# Subscribe this event handler to the \`wf-dataframe-update\` event
+def on_record_change(state, payload):
+    state['mydf'].record_update(payload)`;
+
+const dataFrameAddHandlerStub = `
+# Subscribe this event handler to the \`wf-dataframe-add\` event
+def on_record_add(state, payload):
+	payload['record']['sales'] = 0 # default value inside the dataframe
+	state['mydf'].record_add(payload)`;
+
+const dataFrameActionHandlerStub = `
+# Subscribe this event handler to the \`wf-dataframe-action\` event
+def on_record_action(state, payload):
+	record_index = payload['record_index']
+	if payload['action'] == 'remove':
+		state['mydf'].record_remove(payload)
+	if payload['action'] == 'open':
+		state['record'] = state['df'].record(record_index) # dict representation of record`;
 
 export default {
 	writer: {
 		name: "DataFrame",
 		description,
 		category: "Content",
+		events: {
+			"wf-dataframe-add": {
+				desc: "Capture adding a row.",
+				stub: dataFrameAddHandlerStub.trim(),
+			},
+			"wf-dataframe-update": {
+				desc: "Capture a cell change.",
+				stub: dataFrameUpdateHandlerStub.trim(),
+			},
+			"wf-dataframe-action": {
+				desc: "Remove or open a row.",
+				stub: dataFrameActionHandlerStub.trim(),
+			},
+		},
 		fields: {
 			dataframe: {
 				name: "Data",
 				desc: "Must be a state reference to a Pandas dataframe or PyArrow table. Alternatively, a URL for an Arrow IPC file.",
 				type: FieldType.Text,
-				default: defaultDataframe,
+				default: DEFAULT_DATA_FRAME,
 			},
 			showIndex: {
 				name: "Show index",
@@ -160,6 +202,24 @@ export default {
 					no: "no",
 				},
 			},
+			enableRecordAdd: {
+				name: "Enable adding a record",
+				type: FieldType.Text,
+				default: "no",
+				options: {
+					yes: "yes",
+					no: "no",
+				},
+			},
+			enableRecordUpdate: {
+				name: "Enable updating a record",
+				type: FieldType.Text,
+				default: "no",
+				options: {
+					yes: "yes",
+					no: "no",
+				},
+			},
 			enableDownload: {
 				name: "Enable download",
 				desc: "Allows the user to download the data as CSV.",
@@ -170,6 +230,12 @@ export default {
 					no: "no",
 				},
 			},
+			actions: {
+				name: "Actions",
+				desc: "Define rows actions",
+				type: FieldType.KeyValue,
+				default: JSON.stringify({ remove: "Remove", open: "Open" }),
+			},
 			useMarkdown: {
 				name: "Use Markdown",
 				type: FieldType.Text,
@@ -200,6 +266,7 @@ export default {
 			},
 			primaryTextColor,
 			secondaryTextColor,
+			accentColor,
 			separatorColor,
 			dataframeBackgroundColor: {
 				name: "Background",
@@ -223,6 +290,7 @@ export default {
 	},
 };
 </script>
+
 <script setup lang="ts">
 import injectionKeys from "@/injectionKeys";
 import type * as aq from "arquero";
@@ -234,9 +302,9 @@ import type { Table } from "apache-arrow";
  */
 const MASSIVE_ROW_COUNT = 1000;
 const ROW_HEIGHT_PX = 36; // Must match CSS
+const ROW_ADD_RECORD_HEIGHT_PX = 58;
 const MIN_COLUMN_WIDTH_PX = 80;
 const MAX_COLUMN_AUTO_WIDTH_PX = 300;
-const UNNAMED_INDEX_COLUMN_PATTERN = /^__index_level_[0-9]+__$/;
 
 type OrderSetting = {
 	columnName: string;
@@ -244,18 +312,31 @@ type OrderSetting = {
 };
 
 const fields = inject(injectionKeys.evaluatedFields);
-const rootEl: Ref<HTMLElement> = ref();
-const toolsEl: Ref<HTMLElement> = ref();
-const gridContainerEl: Ref<HTMLElement> = ref();
+const rootEl = ref<HTMLElement>();
+const toolsEl = ref<HTMLElement>();
+const gridContainerEl = ref<HTMLElement>();
 let baseTable: aq.internal.ColumnTable = null;
-const table: Ref<aq.internal.ColumnTable> = ref(null);
-const tableIndex = ref([]);
+const table = shallowRef<aq.internal.ColumnTable | null>(null);
+const tableIndex = shallowRef([]);
 const isIndexShown = computed(() => fields.showIndex.value == "yes");
-const orderSetting: Ref<OrderSetting> = ref(null);
-const relativePosition: Ref<number> = ref(0);
-const columnWidths: Ref<number[]> = ref([]);
+const actions = computed<Record<string, string>>(() => fields.actions.value);
+const orderSetting = shallowRef<OrderSetting | null>(null);
+const relativePosition = ref(0);
+const columnWidths = ref<number[]>([]);
 let columnBeingWidthAdjusted: number = null;
 
+const wf = inject(injectionKeys.core);
+const instancePath = inject(injectionKeys.instancePath);
+
+const {
+	handleUpdateCell,
+	handleAddRow,
+	handleActionRow,
+	isBusy: isUpdatingBusy,
+} = useDataFrameValueBroker(wf, instancePath, rootEl, table);
+
+const isBusy = computed(() => isLoadingData.value || isUpdatingBusy.value);
+
 const columnNames: ComputedRef<string[]> = computed(() => {
 	if (!table.value) {
 		return [];
@@ -267,6 +348,7 @@ const indexColumnNames = computed(() =>
 );
 const shownColumnNames = computed(() => {
 	const cols = columnNames.value.filter((c) => {
+		if (c === ARQUERO_INTERNAL_ID) return false;
 		const isIndex = tableIndex.value.includes(c);
 		const isUnnamed = UNNAMED_INDEX_COLUMN_PATTERN.test(c);
 		return !(isIndex && isUnnamed);
@@ -282,6 +364,16 @@ const isRowCountMassive = computed(() => rowCount.value > MASSIVE_ROW_COUNT);
 const displayRowCount = computed(() =>
 	Math.min(fields.displayRowCount.value, rowCount.value),
 );
+
+const hasActions = computed(
+	() => Object.keys(fields.actions.value || {}).length > 0,
+);
+const useMarkdown = computed(() => fields.useMarkdown.value == "yes");
+const enableRecordUpdate = computed(
+	() => fields.enableRecordUpdate.value == "yes",
+);
+const enableRecordAdd = computed(() => fields.enableRecordAdd.value == "yes");
+
 const rowOffset = computed(() => {
 	let maxOffset: number;
 	if (fields.wrapText.value == "yes") {
@@ -302,37 +394,36 @@ const slicedTable = computed(() => {
 	const limit = isRowCountMassive.value
 		? displayRowCount.value
 		: MASSIVE_ROW_COUNT;
-	const data = table.value.objects({
-		offset,
-		limit,
-	});
+	const data = table.value.objects({ offset, limit });
 	const indices = table.value
 		.indices()
 		.slice(rowOffset.value, rowOffset.value + displayRowCount.value);
-	return {
-		data,
-		indices,
-	};
+
+	return { data, indices };
 });
 
-const gridStyle = computed(() => {
-	const fontStyle = fields.fontStyle.value;
-	let templateColumns: string;
+const gridTemplateColumns = computed(() => {
+	let columns = hasActions.value ? "16px " : "";
 
 	if (columnWidths.value.length == 0) {
-		templateColumns = `repeat(${columnCount.value}, minmax(min-content, 1fr))`;
+		columns += `repeat(${columnCount.value}, minmax(min-content, 1fr))`;
 	} else {
-		templateColumns = columnWidths.value
+		columns += columnWidths.value
 			.map((cw) => `${Math.max(cw, MIN_COLUMN_WIDTH_PX)}px`)
 			.join(" ");
 	}
 
+	return columns;
+});
+
+const gridStyle = computed(() => {
+	const fontStyle = fields.fontStyle.value;
+
 	return {
-		"min-height": `${ROW_HEIGHT_PX * (1 + fields.displayRowCount.value)}px`,
-		"max-height": `${(displayRowCount.value + 1) * ROW_HEIGHT_PX}px`,
+		"min-height": `${(1 + fields.displayRowCount.value + Number(enableRecordAdd.value ?? false)) * ROW_HEIGHT_PX}px`,
+		"max-height": `${(displayRowCount.value + 1 + Number(enableRecordAdd.value ?? false)) * ROW_HEIGHT_PX}px`,
 		"font-family": fontStyle == "monospace" ? "monospace" : undefined,
-		"grid-template-columns": templateColumns,
-		"grid-template-rows": `${ROW_HEIGHT_PX}px repeat(${displayRowCount.value}, min-content)`,
+		"grid-template-rows": `${ROW_HEIGHT_PX}px repeat(${displayRowCount.value}, min-content) ${ROW_ADD_RECORD_HEIGHT_PX}px`,
 	};
 });
 
@@ -403,7 +494,10 @@ function getIndexFromArrowTable(table: Table) {
 	return pandasMetadata.index_columns;
 }
 
+const isLoadingData = ref(false);
+
 async function loadData() {
+	isLoadingData.value = true;
 	const aq = await import("arquero");
 	const { tableFromIPC } = await import("apache-arrow");
 	const url = fields.dataframe.value;
@@ -416,15 +510,21 @@ async function loadData() {
 		tableIndex.value = getIndexFromArrowTable(arrowTable);
 		const aqTable = aq.fromArrow(arrowTable);
 		baseTable = aqTable;
-		table.value = baseTable;
+		// add a unique ID to each row to be allow to edit a specific cell
+		table.value = baseTable.derive({
+			[ARQUERO_INTERNAL_ID]: () => aq.op.row_number(),
+		});
 	} catch (e) {
 		// eslint-disable-next-line no-console
 		console.error("Couldn't load dataframe from Arrow URL.", e);
+	} finally {
+		isLoadingData.value = false;
 	}
 }
 
-function download() {
-	const csv = table.value.toCSV();
+async function download() {
+	const aq = await import("arquero");
+	const csv = table.value.select(aq.not(ARQUERO_INTERNAL_ID)).toCSV();
 	const el = document.createElement("a");
 
 	const blob = new Blob([csv], { type: "text/csv" });
@@ -465,7 +565,12 @@ async function handleSearchChange(ev: InputEvent) {
 			columnNames
 				.map((c) => `aq.op.match(d.${c}, $.pattern) !== null`)
 				.join(" || ");
-		table.value = baseTable.params({ pattern, filterS }).filter(filterS);
+
+		const aq = await import("arquero");
+		table.value = baseTable
+			.params({ pattern, filterS })
+			.filter(filterS)
+			.derive({ [ARQUERO_INTERNAL_ID]: () => aq.op.row_number() });
 	}
 	await nextTick();
 	resetScroll();
@@ -547,6 +652,24 @@ onUnmounted(() => {
 	width: 100%;
 }
 
+.CoreDataframe__newRow {
+	display: flex;
+	align-self: center;
+	justify-content: center;
+}
+.CoreDataframe__newRow__btn {
+	cursor: pointer;
+
+	background-color: var(--separatorColor);
+	border: 1px solid var(--emptinessColor);
+	height: 16px;
+	width: 16px;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
 .tools {
 	display: flex;
 	gap: 16px;
@@ -580,6 +703,15 @@ onUnmounted(() => {
 	display: grid;
 }
 
+.endpoint {
+	position: absolute;
+	height: 1px;
+	width: 1px;
+	background: red;
+}
+</style>
+
+<style>
 .cell {
 	min-height: 36px;
 	padding: 8px;
@@ -643,11 +775,4 @@ onUnmounted(() => {
 .indexCell {
 	color: var(--secondaryTextColor);
 }
-
-.endpoint {
-	position: absolute;
-	height: 1px;
-	width: 1px;
-	background: red;
-}
 </style>
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCell.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCell.vue
new file mode 100644
index 000000000..46baac28a
--- /dev/null
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCell.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import CoreDataFrameCellNumber from "./CoreDataframeCellNumber.vue";
+import CoreDataFrameCellText from "./CoreDataframeCellText.vue";
+import CoreDataFrameCellBoolean from "./CoreDataframeCellBoolean.vue";
+import CoreDataframeCellUnknown from "./CoreDataframeCellUnknown.vue";
+
+const props = defineProps({
+	value: { validator: () => true, required: true },
+	useMarkdown: { type: Boolean, required: false },
+	editable: { type: Boolean, required: false },
+});
+
+defineEmits({
+	change: (value: unknown) => value !== undefined,
+});
+
+const component = computed(() => {
+	switch (typeof props.value) {
+		case "number":
+		case "bigint":
+			return CoreDataFrameCellNumber;
+		case "boolean":
+			return CoreDataFrameCellBoolean;
+		case "string":
+			return CoreDataFrameCellText;
+		default:
+			return CoreDataframeCellUnknown;
+	}
+});
+</script>
+
+<template>
+	<component
+		:is="component"
+		:value="value"
+		:use-markdown="useMarkdown"
+		:editable="editable"
+		@change="$emit('change', $event)"
+	/>
+</template>
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue
new file mode 100644
index 000000000..8ab3ac429
--- /dev/null
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps({
+	value: { type: Boolean, required: true },
+	editable: { type: Boolean, required: false },
+});
+
+const emits = defineEmits({
+	change: (value: boolean) => typeof value === "boolean",
+});
+
+function onChange(event: InputEvent) {
+	if (!props.editable) {
+		// `readonly` props on checkbox has no effect, so we manually prevent when element is disabled
+		event.preventDefault();
+		event.stopPropagation();
+		return;
+	}
+	emits("change", (event.target as HTMLInputElement).checked);
+}
+</script>
+
+<template>
+	<div
+		class="CoreDataframeCellBoolean"
+		:class="{ 'CoreDataframeCellBoolean--disabled': !editable }"
+	>
+		<input
+			type="checkbox"
+			:checked="value"
+			:readonly="!editable"
+			:tabindex="editable ? 0 : -1"
+			@change="onChange"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.CoreDataframeCellBoolean {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+.CoreDataframeCellBoolean input {
+	cursor: pointer;
+}
+.CoreDataframeCellBoolean--disabled input {
+	cursor: not-allowed;
+	pointer-events: none;
+}
+</style>
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellNumber.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellNumber.vue
new file mode 100644
index 000000000..048be1c7d
--- /dev/null
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellNumber.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { nextTick, ref } from "vue";
+
+const props = defineProps({
+	value: {
+		validator: (v) => typeof v === "number" || typeof v === "bigint",
+		required: true,
+	},
+	editable: { type: Boolean, required: false },
+});
+
+const emits = defineEmits({
+	change: (value: string) => typeof value === "string",
+});
+
+const wrapper = ref<HTMLDivElement | undefined>();
+const input = ref<HTMLTextAreaElement | undefined>();
+const isEditing = ref(false);
+
+async function startEditing() {
+	if (!props.editable) return false;
+	isEditing.value = true;
+	// focus on the input when it renders
+	await nextTick();
+	input.value.focus();
+}
+
+function stopEditing() {
+	isEditing.value = false;
+	const newValue = Number(input.value.value);
+	if (newValue === props.value) return;
+	emits("change", input.value.value);
+}
+</script>
+
+<template>
+	<div
+		ref="wrapper"
+		class="CoreDataframeCellNumber"
+		:class="{ 'CoreDataframeCellNumber--editable': editable }"
+		:tabindex="editable && !isEditing ? 0 : -1"
+		@focusin="startEditing"
+		@click="startEditing"
+	>
+		<input
+			v-if="isEditing"
+			ref="input"
+			type="number"
+			:value="value"
+			@focusout="stopEditing"
+		/>
+		<template v-else>
+			{{ value }}
+		</template>
+	</div>
+</template>
+
+<style scoped>
+.CoreDataframeCellNumber--editable {
+	cursor: pointer;
+}
+.CoreDataframeCellNumber input {
+	width: 100%;
+	font-size: 0.75rem;
+
+	border: unset;
+	resize: vertical;
+}
+.CoreDataframeCellNumber input:focus {
+	border: unset;
+	outline: 1px solid var(--accentColor);
+}
+</style>
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue
new file mode 100644
index 000000000..63be29a91
--- /dev/null
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellText.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { nextTick, ref } from "vue";
+import BaseMarkdown from "../../base/BaseMarkdown.vue";
+
+const props = defineProps({
+	value: { validator: () => true, required: true },
+	useMarkdown: { type: Boolean, required: false },
+	editable: { type: Boolean, required: false },
+});
+
+const emits = defineEmits({
+	change: (value: string) => typeof value === "string",
+});
+
+const wrapper = ref<HTMLDivElement | undefined>();
+const textarea = ref<HTMLTextAreaElement | undefined>();
+const isEditing = ref(false);
+const height = ref<number | undefined>();
+
+async function startEditing() {
+	if (!props.editable) return false;
+	height.value = wrapper.value?.getBoundingClientRect().height - 16 - 1;
+	isEditing.value = true;
+	// focus on the textarea when it renders
+	await nextTick();
+	textarea.value.focus();
+}
+
+function stopEditing() {
+	isEditing.value = false;
+	const newValue = textarea.value.value;
+	if (newValue === props.value) return;
+	emits("change", textarea.value.value);
+}
+</script>
+
+<template>
+	<div
+		ref="wrapper"
+		class="CoreDataframeCellText"
+		:class="{ 'CoreDataframeCellText--editable': editable }"
+		:tabindex="editable && !isEditing ? 0 : -1"
+		@focusin="startEditing"
+		@click="startEditing"
+	>
+		<textarea
+			v-if="isEditing"
+			ref="textarea"
+			:value="String(value)"
+			:style="{
+				height: height ? `${height}px` : 'auto',
+			}"
+			@focusout="stopEditing"
+		></textarea>
+		<template v-else>
+			<BaseMarkdown v-if="useMarkdown" :raw-text="String(value)" />
+			<template v-else>
+				{{ value }}
+			</template>
+		</template>
+	</div>
+</template>
+
+<style scoped>
+.CoreDataframeCellText--editable {
+	cursor: pointer;
+}
+.CoreDataframeCellText textarea {
+	width: 100%;
+	font-size: 0.75rem;
+
+	border: unset;
+	resize: vertical;
+}
+.CoreDataframeCellText textarea:focus {
+	border: unset;
+	outline: 1px solid var(--accentColor);
+}
+</style>
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellUnknown.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellUnknown.vue
new file mode 100644
index 000000000..88ae5f4c8
--- /dev/null
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellUnknown.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { bigIntReplacer } from "@/core/serializer";
+import { computed } from "vue";
+
+const props = defineProps({
+	value: { validator: () => true, required: true },
+});
+
+const text = computed(() => JSON.stringify(props.value, bigIntReplacer));
+</script>
+
+<template>
+	<div class="CoreDataframeCellUnknown">
+		{{ text }}
+	</div>
+</template>
+
+<style scoped>
+.CoreDataframeCellUnknown {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	display: inline-block;
+}
+</style>
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeRow.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeRow.vue
new file mode 100644
index 000000000..9374b197d
--- /dev/null
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeRow.vue
@@ -0,0 +1,76 @@
+<template>
+	<div
+		class="CoreDataframeRow"
+		tabindex="0"
+		@mouseover="isRowHovered = true"
+		@mouseleave="isRowHovered = false"
+		@focusin="isRowHovered = true"
+	>
+		<div v-if="hasActions" class="CoreDataframeRow__hand">
+			<BaseDropdown
+				v-if="isRowHovered"
+				:options="actions"
+				@selected="$emit('action', $event, row[ARQUERO_INTERNAL_ID])"
+			/>
+		</div>
+		<div v-if="showIndex" class="cell indexCell">{{ indexText }}</div>
+		<CoreDataframeCell
+			v-for="columnName in columns"
+			:key="`${row[ARQUERO_INTERNAL_ID]}_${columnName}`"
+			class="cell"
+			:value="row[columnName]"
+			:use-markdown="useMarkdown"
+			:editable="editable"
+			@change="
+				$emit('change', columnName, row[ARQUERO_INTERNAL_ID], $event)
+			"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, ref } from "vue";
+import CoreDataframeCell from "./CoreDataframeCell.vue";
+import BaseDropdown from "../../base/BaseDropdown.vue";
+import { ARQUERO_INTERNAL_ID } from "./constants";
+
+const props = defineProps({
+	showIndex: { type: Boolean, required: false },
+	indexText: { type: [Number, String], required: true },
+	columns: { type: Array as PropType<string[]>, required: true },
+	row: { type: Object, required: true },
+	useMarkdown: { type: Boolean, required: false },
+	editable: { type: Boolean, required: false },
+	actions: {
+		type: Object as PropType<Record<string, string>>,
+		required: true,
+	},
+});
+
+defineEmits({
+	change: (columnName: string, id: number, value: unknown) =>
+		typeof columnName === "string" &&
+		typeof id === "number" &&
+		value !== undefined,
+	action: (action: string, index: number) =>
+		typeof index === "number" && typeof action === "string",
+});
+
+const isRowHovered = ref(false);
+
+const hasActions = computed(() => Object.keys(props.actions || {}).length > 0);
+</script>
+
+<style scoped>
+.CoreDataframeRow {
+	display: grid;
+	/* the parent will apply `grid-template-columns` */
+	position: relative;
+}
+
+.CoreDataframeRow__hand {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>
diff --git a/src/ui/src/components/core/content/CoreDataframe/constants.ts b/src/ui/src/components/core/content/CoreDataframe/constants.ts
new file mode 100644
index 000000000..39df4da31
--- /dev/null
+++ b/src/ui/src/components/core/content/CoreDataframe/constants.ts
@@ -0,0 +1,8 @@
+/**
+ * This is a column ID used to keep track of which cell is edited
+ */
+export const ARQUERO_INTERNAL_ID = "__internal_arquero_id";
+
+export const DEFAULT_DATA_FRAME = `data:application/vnd.apache.arrow.file;base64,QVJST1cxAAD/////iAMAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAAlAIAAAQAAAABAAAADAAAAAgADAAEAAgACAAAAGwCAAAEAAAAXwIAAHsiaW5kZXhfY29sdW1ucyI6IFsiX19pbmRleF9sZXZlbF8wX18iXSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogImNvbF9hIiwgImZpZWxkX25hbWUiOiAiY29sX2EiLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiY29sX2IiLCAiZmllbGRfbmFtZSI6ICJjb2xfYiIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogIl9faW5kZXhfbGV2ZWxfMF9fIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfV0sICJjcmVhdG9yIjogeyJsaWJyYXJ5IjogInB5YXJyb3ciLCAidmVyc2lvbiI6ICIxMi4wLjAifSwgInBhbmRhc192ZXJzaW9uIjogIjEuNS4zIn0ABgAAAHBhbmRhcwAAAwAAAIgAAABEAAAABAAAAJT///8AAAECEAAAACQAAAAEAAAAAAAAABEAAABfX2luZGV4X2xldmVsXzBfXwAAAJD///8AAAABQAAAAND///8AAAECEAAAABgAAAAEAAAAAAAAAAUAAABjb2xfYgAAAMD///8AAAABQAAAABAAFAAIAAYABwAMAAAAEAAQAAAAAAABAhAAAAAgAAAABAAAAAAAAAAFAAAAY29sX2EAAAAIAAwACAAHAAgAAAAAAAABQAAAAAAAAAD/////6AAAABQAAAAAAAAADAAWAAYABQAIAAwADAAAAAADBAAYAAAAMAAAAAAAAAAAAAoAGAAMAAQACAAKAAAAfAAAABAAAAACAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAABAAAAAAAAAAAAAAAAMAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAIAAAAAAAAAAwAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAD/////AAAAABAAAAAMABQABgAIAAwAEAAMAAAAAAAEADwAAAAoAAAABAAAAAEAAACYAwAAAAAAAPAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAACgAMAAAABAAIAAoAAACUAgAABAAAAAEAAAAMAAAACAAMAAQACAAIAAAAbAIAAAQAAABfAgAAeyJpbmRleF9jb2x1bW5zIjogWyJfX2luZGV4X2xldmVsXzBfXyJdLCAiY29sdW1uX2luZGV4ZXMiOiBbeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiBudWxsLCAicGFuZGFzX3R5cGUiOiAidW5pY29kZSIsICJudW1weV90eXBlIjogIm9iamVjdCIsICJtZXRhZGF0YSI6IHsiZW5jb2RpbmciOiAiVVRGLTgifX1dLCAiY29sdW1ucyI6IFt7Im5hbWUiOiAiY29sX2EiLCAiZmllbGRfbmFtZSI6ICJjb2xfYSIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJjb2xfYiIsICJmaWVsZF9uYW1lIjogImNvbF9iIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiAiX19pbmRleF9sZXZlbF8wX18iLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9XSwgImNyZWF0b3IiOiB7ImxpYnJhcnkiOiAicHlhcnJvdyIsICJ2ZXJzaW9uIjogIjEyLjAuMCJ9LCAicGFuZGFzX3ZlcnNpb24iOiAiMS41LjMifQAGAAAAcGFuZGFzAAADAAAAiAAAAEQAAAAEAAAAlP///wAAAQIQAAAAJAAAAAQAAAAAAAAAEQAAAF9faW5kZXhfbGV2ZWxfMF9fAAAAkP///wAAAAFAAAAA0P///wAAAQIQAAAAGAAAAAQAAAAAAAAABQAAAGNvbF9iAAAAwP///wAAAAFAAAAAEAAUAAgABgAHAAwAAAAQABAAAAAAAAECEAAAACAAAAAEAAAAAAAAAAUAAABjb2xfYQAAAAgADAAIAAcACAAAAAAAAAFAAAAAsAMAAEFSUk9XMQ==`;
+
+export const UNNAMED_INDEX_COLUMN_PATTERN = /^__index_level_[0-9]+__$/;
diff --git a/src/ui/src/components/core/content/CoreDataframe/useDataframeValueBroker.ts b/src/ui/src/components/core/content/CoreDataframe/useDataframeValueBroker.ts
new file mode 100644
index 000000000..c87aac6de
--- /dev/null
+++ b/src/ui/src/components/core/content/CoreDataframe/useDataframeValueBroker.ts
@@ -0,0 +1,251 @@
+import { ComponentPublicInstance, computed, Ref, ShallowRef } from "vue";
+import { type internal } from "arquero";
+import { ARQUERO_INTERNAL_ID, UNNAMED_INDEX_COLUMN_PATTERN } from "./constants";
+import { useJobs } from "./useJobs";
+import { Core, InstancePath } from "@/writerTypes";
+
+/**
+ * Encapsulates the logic to update an Arquero table and sync it with the backend
+ */
+export function useDataFrameValueBroker(
+	wf: Core,
+	instancePath: InstancePath,
+	emitterEl: Ref<HTMLElement | ComponentPublicInstance>,
+	table: ShallowRef<internal.ColumnTable | null>,
+) {
+	const componentId = instancePath.at(-1).componentId;
+	const component = computed(() => wf.getComponentById(componentId));
+
+	type Job =
+		| {
+				eventType: "wf-dataframe-add";
+				payload: Parameters<typeof handlerAddRow>;
+		  }
+		| {
+				eventType: "wf-dataframe-update";
+				payload: Parameters<typeof handlerUpdateCell>;
+		  }
+		| {
+				eventType: "wf-dataframe-action";
+				payload: Parameters<typeof handlerActionRow>;
+		  };
+
+	const { push: pushJob, isBusy } = useJobs<Job>(handler);
+
+	async function handler(job: Job) {
+		switch (job.eventType) {
+			case "wf-dataframe-add":
+				await handlerAddRow(...job.payload);
+				break;
+			case "wf-dataframe-update":
+				await handlerUpdateCell(...job.payload);
+				break;
+			case "wf-dataframe-action":
+				await handlerActionRow(...job.payload);
+				break;
+		}
+	}
+
+	async function handlerAddRow() {
+		const eventType = "wf-dataframe-add";
+
+		const rowIndex = table.value.numRows();
+
+		const aq = await import("arquero");
+
+		const recordFilter = aq.escape(
+			(d: Record<string, unknown>) => d[ARQUERO_INTERNAL_ID] === rowIndex,
+		);
+
+		// get previous value to format it
+		const previousRecord = table.value.filter(recordFilter).object();
+		if (!previousRecord) throw Error("Could not find record");
+
+		const newRecord = getDefaultRecord(previousRecord);
+		const newRow = aq.from([newRecord]);
+
+		table.value = table.value.concat(newRow).derive({
+			[ARQUERO_INTERNAL_ID]: () => aq.op.row_number(),
+		});
+
+		if (!isEventUsed(eventType)) return;
+
+		return new Promise((res) => {
+			const event = new CustomEvent(eventType, {
+				detail: {
+					payload: {
+						record: newRecord,
+						record_index: rowIndex,
+					},
+					callback: res,
+				},
+			});
+			dispatchEvent(event);
+		});
+	}
+
+	async function handlerActionRow(action: string, rowIndex: number) {
+		const eventType = "wf-dataframe-action";
+		if (!table.value) throw Error("Table is not ready");
+		if (!isEventUsed(eventType)) return;
+
+		const rowIndexBackend = rowIndex - 1; // 0-based index (arquero is based on 1-based index)
+
+		return new Promise((res) => {
+			const event = new CustomEvent(eventType, {
+				detail: {
+					payload: { action, record_index: rowIndexBackend },
+					callback: res,
+				},
+			});
+
+			dispatchEvent(event);
+		});
+	}
+
+	async function handlerUpdateCell(
+		columnName: string,
+		rowIndex: number,
+		value: unknown,
+	) {
+		if (!table.value) throw Error("Table is not ready");
+		if (rowIndex === undefined)
+			throw Error("Must specify the index to update a row");
+		const eventType = "wf-dataframe-update";
+		const rowIndexBackend = rowIndex - 1; // 0-based index (arquero is based on 1-based index)
+
+		const aq = await import("arquero");
+
+		const recordFilter = aq.escape(
+			(d: Record<string, unknown>) => d[ARQUERO_INTERNAL_ID] === rowIndex,
+		);
+
+		// get previous value to format it
+		const previousRecord = table.value.filter(recordFilter).object();
+		if (!previousRecord) throw Error("Could not find record");
+		const previousValue = previousRecord[columnName];
+
+		const valueTyped = formatValue(previousValue, value);
+
+		// update arquero table
+		const updater = aq.escape((d: Record<string, unknown>) => {
+			return d[ARQUERO_INTERNAL_ID] === rowIndex
+				? valueTyped
+				: d[columnName];
+		});
+
+		table.value = table.value.derive({ [columnName]: updater });
+
+		if (!isEventUsed(eventType)) return;
+
+		const record = cleanRecord(table.value.filter(recordFilter).object());
+
+		return new Promise((res) => {
+			const event = new CustomEvent(eventType, {
+				detail: {
+					payload: { record, record_index: rowIndexBackend },
+					callback: res,
+				},
+			});
+
+			dispatchEvent(event);
+		});
+	}
+
+	function isEventUsed(eventType: string): boolean {
+		const isHandlerSet = component.value.handlers?.[eventType];
+		const isBindingSet = component.value.binding?.eventType == eventType;
+
+		return Boolean(isHandlerSet || isBindingSet);
+	}
+
+	function dispatchEvent(event: CustomEvent) {
+		if (emitterEl.value instanceof HTMLElement) {
+			emitterEl.value.dispatchEvent(event);
+		} else {
+			emitterEl.value.$el.dispatchEvent(event); // Vue instance (ComponentPublicInstance)
+		}
+	}
+
+	return {
+		isBusy,
+
+		handleUpdateCell: (...args: Parameters<typeof handlerUpdateCell>) =>
+			pushJob({
+				eventType: "wf-dataframe-update",
+				payload: args,
+			}),
+
+		handleAddRow: (...args: Parameters<typeof handlerAddRow>) =>
+			pushJob({
+				eventType: "wf-dataframe-add",
+				payload: args,
+			}),
+
+		handleActionRow: (...args: Parameters<typeof handlerActionRow>) =>
+			pushJob({
+				eventType: "wf-dataframe-action",
+				payload: args,
+			}),
+	};
+}
+
+function formatValue(previousValue: unknown, value: unknown) {
+	switch (typeof previousValue) {
+		case "number":
+			return Number(value);
+		case "string":
+			return String(value);
+		case "boolean":
+			return Boolean(value);
+		case "bigint":
+			return BigInt(String(value));
+		default:
+			throw Error(
+				`Could not update a field of type ${typeof previousValue}`,
+			);
+	}
+}
+
+function isVirtualColumn(key: string) {
+	return (
+		key === ARQUERO_INTERNAL_ID || UNNAMED_INDEX_COLUMN_PATTERN.test(key)
+	);
+}
+
+function cleanRecord(row: object) {
+	return Object.entries(row)
+		.filter(([key]) => !isVirtualColumn(key))
+		.reduce((acc, [key, value]) => {
+			acc[key] = value;
+			return acc;
+		}, {});
+}
+
+function getDefaultRecord(row: object) {
+	return Object.entries(row)
+		.filter(([key]) => !isVirtualColumn(key))
+		.reduce((acc, [key, value]) => {
+			acc[key] = getDefaultValue(value);
+			return acc;
+		}, {});
+}
+
+function getDefaultValue(value: unknown) {
+	switch (typeof value) {
+		case "number":
+			return 0;
+		case "string":
+			return "";
+		case "boolean":
+			return false;
+		case "bigint":
+			return BigInt(0);
+		case "object":
+			return {};
+		default:
+			throw Error(
+				`Could not get default value a field of type ${typeof value}`,
+			);
+	}
+}
diff --git a/src/ui/src/components/core/content/CoreDataframe/useJobs.ts b/src/ui/src/components/core/content/CoreDataframe/useJobs.ts
new file mode 100644
index 000000000..7d715ec41
--- /dev/null
+++ b/src/ui/src/components/core/content/CoreDataframe/useJobs.ts
@@ -0,0 +1,37 @@
+import { shallowRef, ref, readonly } from "vue";
+
+/**
+ * A simple FIFO Job queue algorithm
+ */
+export function useJobs<T>(handler: (value: T) => Promise<void>) {
+	const jobs = shallowRef<T[]>([]);
+	const isRunning = ref(false);
+
+	async function run() {
+		if (isRunning.value) return;
+
+		isRunning.value = true;
+
+		while (jobs.value.length) {
+			const [job, ...rest] = jobs.value;
+
+			try {
+				await handler(job);
+			} catch (error) {
+				// eslint-disable-next-line no-console
+				console.error("Error during handling job", job, error);
+			} finally {
+				jobs.value = rest;
+			}
+		}
+
+		isRunning.value = false;
+	}
+
+	function push(job: T) {
+		jobs.value = [...jobs.value, job];
+		if (!isRunning.value) return run();
+	}
+
+	return { push, isBusy: readonly(isRunning) };
+}
diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 72b9cefd2..0b39268dc 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -18,6 +18,7 @@ import * as typeHierarchy from "./typeHierarchy";
 import { auditAndFixComponents } from "./auditAndFix";
 import { parseAccessor } from "./parsing";
 import { loadExtensions } from "./loadExtensions";
+import { bigIntReplacer } from "./serializer";
 
 const RECONNECT_DELAY_MS = 1000;
 const KEEP_ALIVE_DELAY_MS = 60000;
@@ -438,8 +439,10 @@ export function generateCore() {
 			if (webSocket.readyState !== webSocket.OPEN) {
 				throw "Connection lost.";
 			}
-			webSocket.send(JSON.stringify(wsData));
-		} catch {
+			webSocket.send(JSON.stringify(wsData, bigIntReplacer));
+		} catch (error) {
+			// eslint-disable-next-line no-console
+			console.error("sendFrontendMessage error", error);
 			callback?.({ ok: false });
 		}
 	}
diff --git a/src/ui/src/core/serializer.ts b/src/ui/src/core/serializer.ts
new file mode 100644
index 000000000..138fce60f
--- /dev/null
+++ b/src/ui/src/core/serializer.ts
@@ -0,0 +1,9 @@
+/**
+ * JSON serializer to handle bigint
+ */
+export function bigIntReplacer(_key: string, value: unknown): unknown {
+	if (typeof value === "bigint") {
+		return value.toString() + "n";
+	}
+	return value;
+}
diff --git a/src/writer/core.py b/src/writer/core.py
index 2f3ddece9..48028c9a7 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -1398,6 +1398,30 @@ def _transform_change_page(self, ev) -> Optional[int]:
         except ValueError:
             return None
 
+    def _transform_dataframe_update(self, ev: WriterEvent) -> Optional[Dict]:
+        payload = ev.payload
+        if not isinstance(payload, dict):
+            return None
+        
+        payload = _deserialize_bigint_format(payload)
+        return payload
+
+    def _transform_dataframe_add(self, ev: WriterEvent) -> Optional[Dict]:
+        payload = ev.payload
+        if not isinstance(payload, dict):
+            return None
+
+        payload = _deserialize_bigint_format(payload)
+        return payload
+
+    def _transform_dataframe_action(self, ev: WriterEvent) -> Optional[Dict]:
+        payload = ev.payload
+        if not isinstance(payload, dict):
+            return None
+
+        payload = _deserialize_bigint_format(payload)
+        return payload
+
 
 class Evaluator:
 
@@ -1981,17 +2005,22 @@ def record_update(df: 'pandas.DataFrame', payload: DataframeRecordUpdated) -> 'p
         >>> edf = EditableDataframe(df)
         >>> edf.record_update({"record_index": 12, "record": {"a": 1, "b": 2}})
         """
+        import pandas
+
         _assert_record_match_pandas_df(df, payload['record'])
 
         record: dict
         record, index = _split_record_as_pandas_record_and_index(payload['record'], df.index.names)
 
         record_index = payload['record_index']
-        df.iloc[record_index] = record  # type: ignore
 
-        index_list = df.index.tolist()
-        index_list[record_index] = index
-        df.index = index_list  # type: ignore
+        if isinstance(df.index, pandas.RangeIndex):
+            df.iloc[record_index] = record  # type: ignore
+        else:
+            df.iloc[record_index] = record  # type: ignore
+            index_list = df.index.tolist()
+            index_list[record_index] = index
+            df.index = index_list  # type: ignore
 
         return df
 
@@ -2593,6 +2622,79 @@ def _split_record_as_pandas_record_and_index(param: dict, index_columns: list) -
 
     return final_record, tuple(final_index)
 
+def _deserialize_bigint_format(payload: Optional[Union[dict, list]]):
+    """
+    Decodes the payload of a big int serialization
+
+    >>> _deserialize_bigint_format({"bigint": "12345678901234567890n"})
+    >>> {"bigint" : 12345678901234567890}
+
+    It support escape character on bigint matching format.
+
+    >>> _deserialize_bigint_format({"bigint": '12345678901234567890\n'})
+    >>> {"bigint" : "12345678901234567890n"}
+
+    It support nested structure
+
+    >>> _deserialize_bigint_format({
+    >>>     "record": {
+    >>>         "bigint": '12345678901234567890n'
+    >>>     }
+    >>> })
+    >>> {
+    >>>     "record": {
+    >>>         "bigint": '12345678901234567890'
+    >>>     }
+    >>> }
+    :param payload:
+    :return:
+    """
+    if isinstance(payload, dict):
+        for elt in payload.keys():
+            if isinstance(payload[elt], str) and len(payload[elt]) > 0 and payload[elt][-1] == "n":
+                if payload[elt][:-1].isdigit():
+                    payload[elt] = int(payload[elt][:-1])
+                else:
+                    unescape_payload = unescape_bigint_matching_string(payload[elt])
+                    payload[elt] = unescape_payload
+
+            if isinstance(payload[elt], dict) or isinstance(payload[elt], list):
+                _deserialize_bigint_format(payload[elt])
+    elif isinstance(payload, list):
+        for elt in range(len(payload)):
+            if isinstance(payload[elt], str) and payload[elt][-1] == "n":
+                if payload[elt][:-1].isdigit():
+                    payload[elt] = int(payload[elt][:-1])
+                else:
+                    unescape_payload = unescape_bigint_matching_string(payload[elt])
+                    payload[elt] = unescape_payload
+            if isinstance(payload[elt], dict) or isinstance(payload[elt], list):
+                _deserialize_bigint_format(payload[elt])
+
+    return payload
+
+def unescape_bigint_matching_string(string: str) -> str:
+    """
+    Unescapes a string
+
+    >>> unescape_bigint_matching_string(r"13456\n")
+    >>> r"13456n"
+    """
+    if len(string) == 0:
+        return string
+
+    if re.match(r"^\d+\\*n$", string) is None:
+        return string
+
+    result = ""
+    for i in range(len(string)):
+        c = string[-i]
+        if c == "\\":
+            i += 1
+            continue
+        result += c
+
+    return result
 
 state_serialiser = StateSerialiser()
 initial_state = WriterState()
diff --git a/tests/backend/test_core.py b/tests/backend/test_core.py
index 39c008b6f..efeb37050 100644
--- a/tests/backend/test_core.py
+++ b/tests/backend/test_core.py
@@ -890,6 +890,66 @@ def test_time_change(self) -> None:
         self.ed.transform(ev_valid)
         assert ev_valid.payload == "23:59"
 
+    def test_dataframe_update(self) -> None:
+
+        """
+        Test that a dataframe update event should decode big int format from frontend
+        """
+        ev = WriterEvent(
+            type="wf-dataframe-update",
+            instancePath=self.root_instance_path,
+            payload={
+                "record": {
+                    "number": 1,
+                    "text": "one",
+                    "empty_text": ""
+                }
+            }
+        )
+
+        self.ed.transform(ev)
+
+        assert ev.payload['record']['number'] == 1
+        assert ev.payload['record']['text'] == "one"
+
+        """
+        Test that a dataframe update event should decode big int format from frontend
+        """
+        ev = WriterEvent(
+            type="wf-dataframe-update",
+            instancePath=self.root_instance_path,
+            payload={
+                "record": {
+                    "number": "1n",
+                    "text": "one"
+                }
+            }
+        )
+
+        self.ed.transform(ev)
+
+        assert ev.payload['record']['number'] == 1
+        assert ev.payload['record']['text'] == "one"
+
+        """
+        Test that a dataframe update event should decode big int format from frontend
+        """
+        ev = WriterEvent(
+            type="wf-dataframe-update",
+            instancePath=self.root_instance_path,
+            payload={
+                "record": {
+                    "number": r"1\n",
+                    "text": "one"
+                }
+            }
+        )
+
+        self.ed.transform(ev)
+
+        assert ev.payload['record']['number'] == "1n"
+        assert ev.payload['record']['text'] == "one"
+
 
 class TestFileWrapper():