diff --git a/aform/CHANGELOG.json b/aform/CHANGELOG.json
index eee71e06..f7047a6f 100644
--- a/aform/CHANGELOG.json
+++ b/aform/CHANGELOG.json
@@ -1,6 +1,30 @@
 {
   "name": "@stonecrop/aform",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/aform_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "format adate emit response to fit native datepicker"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/aform_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "update deps"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/aform_v0.3.0",
diff --git a/aform/CHANGELOG.md b/aform/CHANGELOG.md
index d12c45ed..31081f1c 100644
--- a/aform/CHANGELOG.md
+++ b/aform/CHANGELOG.md
@@ -1,6 +1,20 @@
 # Change Log - @stonecrop/aform
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+### Patches
+
+- format adate emit response to fit native datepicker
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+### Patches
+
+- update deps
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT
diff --git a/aform/package.json b/aform/package.json
index 70e1e4c1..f1c94e23 100644
--- a/aform/package.json
+++ b/aform/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/aform",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"license": "MIT",
 	"type": "module",
 	"author": {
@@ -44,7 +44,7 @@
 	"dependencies": {
 		"@stonecrop/themes": "workspace:*",
 		"@stonecrop/utilities": "workspace:*",
-		"@vueuse/core": "^11.1.0",
+		"@vueuse/core": "^12.0.0",
 		"vue": "^3.5.11"
 	},
 	"devDependencies": {
diff --git a/aform/src/components/form/ADate.vue b/aform/src/components/form/ADate.vue
index acd1a494..ca2e6dfe 100644
--- a/aform/src/components/form/ADate.vue
+++ b/aform/src/components/form/ADate.vue
@@ -1,12 +1,12 @@
 <template>
 	<div>
 		<input
+			v-model="inputDate"
 			ref="date"
 			type="date"
 			:id="uuid"
 			:disabled="readonly"
 			:required="required"
-			:value="inputDate"
 			@click="showPicker" />
 		<label :for="uuid">{{ label }}</label>
 		<p v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
@@ -26,7 +26,10 @@ const {
 	validation = { errorMessage: '&nbsp;' },
 } = defineProps<ComponentProps>()
 
-const inputDate = defineModel<string | number | Date>()
+const inputDate = defineModel<string | number | Date>({
+	// format the date to be compatible with the native input datepicker
+	set: value => new Date(value).toISOString().split('T')[0],
+})
 const dateRef = useTemplateRef<HTMLInputElement>('date')
 
 const showPicker = () => {
diff --git a/aform/src/components/form/ADatePicker.vue b/aform/src/components/form/ADatePicker.vue
index 47568768..d18bd58c 100644
--- a/aform/src/components/form/ADatePicker.vue
+++ b/aform/src/components/form/ADatePicker.vue
@@ -1,38 +1,40 @@
 <template>
 	<div class="adatepicker" tabindex="0" ref="datepicker">
 		<table>
-			<tr>
-				<td id="previous-month-btn" @click="previousMonth" :tabindex="-1">&lt;</td>
-				<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
-				<td id="next-month-btn" @click="nextMonth" :tabindex="-1">&gt;</td>
-			</tr>
-			<tr class="days-header">
-				<td>M</td>
-				<td>T</td>
-				<td>W</td>
-				<td>T</td>
-				<td>F</td>
-				<td>S</td>
-				<td>S</td>
-			</tr>
-			<tr v-for="rowNo in numberOfRows" :key="rowNo">
-				<!-- the 'ref' key is currently only used for test references -->
-				<td
-					v-for="colNo in numberOfColumns"
-					ref="celldate"
-					:key="getCurrentCell(rowNo, colNo)"
-					:contenteditable="false"
-					:spellcheck="false"
-					:tabindex="0"
-					@click.prevent.stop="selectDate(getCurrentCell(rowNo, colNo))"
-					@keydown.enter="selectDate(getCurrentCell(rowNo, colNo))"
-					:class="{
-						todaysDate: isTodaysDate(getCurrentDate(rowNo, colNo)),
-						selectedDate: isSelectedDate(getCurrentDate(rowNo, colNo)),
-					}">
-					{{ new Date(getCurrentDate(rowNo, colNo)).getDate() }}
-				</td>
-			</tr>
+			<tbody>
+				<tr>
+					<td id="previous-month-btn" @click="previousMonth" :tabindex="-1">&lt;</td>
+					<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
+					<td id="next-month-btn" @click="nextMonth" :tabindex="-1">&gt;</td>
+				</tr>
+				<tr class="days-header">
+					<td>M</td>
+					<td>T</td>
+					<td>W</td>
+					<td>T</td>
+					<td>F</td>
+					<td>S</td>
+					<td>S</td>
+				</tr>
+				<tr v-for="rowNo in numberOfRows" :key="rowNo">
+					<!-- the 'ref' key is currently only used for test references -->
+					<td
+						v-for="colNo in numberOfColumns"
+						ref="celldate"
+						:key="getCurrentCell(rowNo, colNo)"
+						:contenteditable="false"
+						:spellcheck="false"
+						:tabindex="0"
+						@click.prevent.stop="selectDate(getCurrentCell(rowNo, colNo))"
+						@keydown.enter="selectDate(getCurrentCell(rowNo, colNo))"
+						:class="{
+							todaysDate: isTodaysDate(getCurrentDate(rowNo, colNo)),
+							selectedDate: isSelectedDate(getCurrentDate(rowNo, colNo)),
+						}">
+						{{ new Date(getCurrentDate(rowNo, colNo)).getDate() }}
+					</td>
+				</tr>
+			</tbody>
 		</table>
 	</div>
 </template>
diff --git a/aform/tests/datepicker.spec.ts b/aform/tests/datepicker.spec.ts
index 5d1c7b87..886a21a9 100644
--- a/aform/tests/datepicker.spec.ts
+++ b/aform/tests/datepicker.spec.ts
@@ -71,7 +71,7 @@ describe('datepicker component', () => {
 
 		const $prevMonthBtn = wrapper.find('#next-month-btn')
 		await $prevMonthBtn.trigger('click')
-		expect(wrapper.vm.currentMonth).toBe(new Date().getMonth() + 1)
+		expect(wrapper.vm.currentMonth).toBe((new Date().getMonth() + 1) % 12)
 	})
 
 	it('select next year', async () => {
diff --git a/atable/CHANGELOG.json b/atable/CHANGELOG.json
index d2f6be08..92db7f7f 100644
--- a/atable/CHANGELOG.json
+++ b/atable/CHANGELOG.json
@@ -1,6 +1,30 @@
 {
   "name": "@stonecrop/atable",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/atable_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "update table cell value reactively"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/atable_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "don't set header width until rows are loaded"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/atable_v0.3.0",
diff --git a/atable/CHANGELOG.md b/atable/CHANGELOG.md
index fa16399c..e82eb4f8 100644
--- a/atable/CHANGELOG.md
+++ b/atable/CHANGELOG.md
@@ -1,6 +1,20 @@
 # Change Log - @stonecrop/atable
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+### Patches
+
+- update table cell value reactively
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+### Patches
+
+- don't set header width until rows are loaded
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT
diff --git a/atable/package.json b/atable/package.json
index 1ed2d84f..3db46084 100644
--- a/atable/package.json
+++ b/atable/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/atable",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"license": "MIT",
 	"type": "module",
 	"author": {
@@ -47,8 +47,8 @@
 	"dependencies": {
 		"@stonecrop/themes": "workspace:*",
 		"@stonecrop/utilities": "workspace:*",
-		"@vueuse/components": "^10.11.0",
-		"@vueuse/core": "^11.1.0",
+		"@vueuse/components": "^12.0.0",
+		"@vueuse/core": "^12.0.0",
 		"pinia": "^2.3.0",
 		"vue": "^3.5.11"
 	},
diff --git a/atable/src/components/ACell.vue b/atable/src/components/ACell.vue
index ce5324ac..ffe8f1f7 100644
--- a/atable/src/components/ACell.vue
+++ b/atable/src/components/ACell.vue
@@ -14,8 +14,7 @@
 		@input="updateCellData"
 		@click="showModal"
 		class="atable-cell"
-		:class="pinned ? 'sticky-column' : ''"
-		v-on-click-outside="store.closeModal">
+		:class="pinned ? 'sticky-column' : ''">
 		<component
 			v-if="column.cellComponent"
 			:is="column.cellComponent"
@@ -28,9 +27,8 @@
 
 <script setup lang="ts">
 import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
-import { vOnClickOutside } from '@vueuse/components'
 import { useElementBounding } from '@vueuse/core'
-import { computed, CSSProperties, ref, useTemplateRef } from 'vue'
+import { computed, CSSProperties, ref, useTemplateRef, watch } from 'vue'
 
 import { createTableStore } from '../stores/table'
 import { isHtmlString } from '../utils'
@@ -55,7 +53,7 @@ const { bottom, left } = useElementBounding(cellRef)
 
 // keep a shallow copy of the original cell value for comparison
 const originalData = store.getCellData(colIndex, rowIndex)
-const displayValue = store.getCellDisplayValue(colIndex, rowIndex)
+const displayValue = ref(store.getCellDisplayValue(colIndex, rowIndex))
 const currentData = ref('')
 const cellModified = ref(false)
 
@@ -65,9 +63,16 @@ const row = store.rows[rowIndex]
 const textAlign = column.align || 'center'
 const cellWidth = column.width || '40ch'
 
+watch(
+	() => store.getCellData(colIndex, rowIndex),
+	cellData => {
+		displayValue.value = store.getFormattedValue(colIndex, rowIndex, cellData)
+	}
+)
+
 const isHtmlValue = computed(() => {
 	// TODO: check if display value is a native DOM element
-	return typeof displayValue === 'string' ? isHtmlString(displayValue) : false
+	return typeof displayValue.value === 'string' ? isHtmlString(displayValue.value) : false
 })
 
 const cellStyle = computed((): CSSProperties => {
diff --git a/atable/src/components/ATable.vue b/atable/src/components/ATable.vue
index 91695bdc..d5435b8f 100644
--- a/atable/src/components/ATable.vue
+++ b/atable/src/components/ATable.vue
@@ -1,5 +1,9 @@
 <template>
-	<table ref="table" class="atable" :style="{ width: store.config.fullWidth ? '100%' : 'auto' }">
+	<table
+		ref="table"
+		class="atable"
+		:style="{ width: store.config.fullWidth ? '100%' : 'auto' }"
+		v-on-click-outside="store.closeModal">
 		<slot name="header" :data="store">
 			<ATableHeader :columns="store.columns" :store="store" />
 		</slot>
@@ -53,6 +57,7 @@
 </template>
 
 <script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
 import { useMutationObserver } from '@vueuse/core'
 import { nextTick, watch, onMounted, useTemplateRef } from 'vue'
 
@@ -121,7 +126,7 @@ const assignStickyCellWidths = () => {
 	const firstDataRow = table.rows[1]
 	const headerCells = headerRow ? Array.from(headerRow.cells) : []
 	for (const [index, headerCell] of headerCells.entries()) {
-		const rowCell = firstDataRow.cells[index]
+		const rowCell = firstDataRow?.cells[index]
 		if (rowCell) {
 			headerCell.style.width = `${rowCell.offsetWidth}px`
 		}
diff --git a/atable/src/types/index.ts b/atable/src/types/index.ts
index 53945d46..18201000 100644
--- a/atable/src/types/index.ts
+++ b/atable/src/types/index.ts
@@ -14,10 +14,24 @@ export type TableColumn = {
 
 	cellComponent?: string
 	cellComponentProps?: Record<string, any>
-	modalComponent?: string | ((context?: CellContext) => string)
+	/**
+	 * The component to use for the modal. If a function is provided, it will be called with the cell context.
+	 * The following properties are available on the cell context:
+	 * - `row` - the row object
+	 * - `column` - the column object
+	 * - `table` - the table object
+	 *
+	 * The function should return the name of the component to use for the modal.
+	 *
+	 * Additionally, the following properties will be automatically passed to the modal component:
+	 * - `colIndex` - the column index of the current cell
+	 * - `rowIndex` - the row index of the current cell
+	 * - `store` - the table data store
+	 */
+	modalComponent?: string | ((context: CellContext) => string)
 	modalComponentExtraProps?: Record<string, any>
 
-	format?: string | ((value: any, context?: CellContext) => string)
+	format?: string | ((value: any, context: CellContext) => string)
 	mask?: (value: any) => any
 }
 
diff --git a/atable/tests/cell.spec.ts b/atable/tests/cell.spec.ts
index 76a7a975..8c7c8e38 100644
--- a/atable/tests/cell.spec.ts
+++ b/atable/tests/cell.spec.ts
@@ -4,9 +4,10 @@ import { mount } from '@vue/test-utils'
 
 import ATable from '../src/components/ATable.vue'
 import data from './data/http_logs.json'
+import type { TableColumn, TableConfig } from '../src/types'
 
 describe('table cell component', () => {
-	const columns = [
+	const columns: TableColumn[] = [
 		{
 			label: 'Home Page',
 			name: 'home_page',
@@ -14,9 +15,7 @@ describe('table cell component', () => {
 			align: 'left',
 			edit: false,
 			width: '35ch',
-			format: (value: { title?: string; value?: any }) => {
-				return value.title
-			},
+			format: (value: { title: string }) => value.title,
 		},
 		{
 			label: 'HTTP Method',
@@ -33,17 +32,15 @@ describe('table cell component', () => {
 			align: 'center',
 			edit: true,
 			width: '25ch',
-			modalComponent: 'ADate',
-			format: (value: number) => {
-				return new Date(Number(value)).toLocaleDateString('en-US')
-			},
+			modalComponent: 'DateInput',
+			format: (value: number) => new Date(value).toLocaleDateString('en-US'),
 		},
 	]
 
 	const props = {
 		columns,
 		modelValue: data,
-		config: { view: 'list' },
+		config: { view: 'list' } as TableConfig,
 	}
 
 	beforeEach(() => {
diff --git a/atable/tests/modal.spec.ts b/atable/tests/modal.spec.ts
index ac4ba5ea..5e6bc3da 100644
--- a/atable/tests/modal.spec.ts
+++ b/atable/tests/modal.spec.ts
@@ -4,9 +4,10 @@ import { mount } from '@vue/test-utils'
 
 import ATable from '../src/components/ATable.vue'
 import data from './data/http_logs.json'
+import type { TableColumn, TableConfig } from '../src/types'
 
 describe('table modal component', () => {
-	const columns = [
+	const columns: TableColumn[] = [
 		{
 			label: 'Home Page',
 			name: 'home_page',
@@ -14,9 +15,7 @@ describe('table modal component', () => {
 			align: 'left',
 			edit: false,
 			width: '35ch',
-			format: (value: { title?: string; value?: any }) => {
-				return value.title
-			},
+			format: (value: { title: string }) => value.title,
 		},
 		{
 			label: 'HTTP Method',
@@ -33,17 +32,15 @@ describe('table modal component', () => {
 			align: 'center',
 			edit: true,
 			width: '25ch',
-			modalComponent: 'ADate',
-			format: (value: number) => {
-				return new Date(Number(value)).toLocaleDateString('en-US')
-			},
+			modalComponent: 'DateInput',
+			format: (value: string | number) => new Date(value).toLocaleDateString('en-US'),
 		},
 	]
 
 	const props = {
 		columns,
 		modelValue: data,
-		config: { view: 'list' },
+		config: { view: 'list' } as TableConfig,
 	}
 
 	beforeEach(() => {
diff --git a/atable/tests/row.spec.ts b/atable/tests/row.spec.ts
index 0ed93899..34d4980e 100644
--- a/atable/tests/row.spec.ts
+++ b/atable/tests/row.spec.ts
@@ -4,9 +4,10 @@ import { mount } from '@vue/test-utils'
 
 import ATable from '../src/components/ATable.vue'
 import listData from './data/http_logs.json'
+import type { TableColumn } from '../src/types'
 
 describe('table row component', () => {
-	const columns = [
+	const columns: TableColumn[] = [
 		{
 			label: 'Home Page',
 			name: 'home_page',
@@ -14,9 +15,7 @@ describe('table row component', () => {
 			align: 'left',
 			edit: false,
 			width: '35ch',
-			format: (value: { title?: string; value?: any }) => {
-				return value.title
-			},
+			format: (value: { title: string }) => value.title,
 		},
 		{
 			label: 'HTTP Method',
@@ -33,10 +32,8 @@ describe('table row component', () => {
 			align: 'center',
 			edit: true,
 			width: '25ch',
-			modalComponent: 'ADate',
-			format: (value: number) => {
-				return new Date(Number(value)).toLocaleDateString('en-US')
-			},
+			modalComponent: 'DateInput',
+			format: (value: string | number) => new Date(value).toLocaleDateString('en-US'),
 		},
 	]
 
diff --git a/atable/tests/table.spec.ts b/atable/tests/table.spec.ts
index 47a63d9d..984ec4c6 100644
--- a/atable/tests/table.spec.ts
+++ b/atable/tests/table.spec.ts
@@ -4,9 +4,10 @@ import { mount } from '@vue/test-utils'
 
 import ATable from '../src/components/ATable.vue'
 import data from './data/http_logs.json'
+import type { TableColumn, TableConfig } from '../src/types'
 
 describe('table component', () => {
-	const columns = [
+	const columns: TableColumn[] = [
 		{
 			label: 'Home Page',
 			name: 'home_page',
@@ -14,9 +15,7 @@ describe('table component', () => {
 			align: 'left',
 			edit: false,
 			width: '35ch',
-			format: (value: { title?: string; value?: any }) => {
-				return value.title
-			},
+			format: (value: { title: string }) => value.title,
 		},
 		{
 			label: 'HTTP Method',
@@ -33,17 +32,15 @@ describe('table component', () => {
 			align: 'center',
 			edit: true,
 			width: '25ch',
-			modalComponent: 'ADate',
-			format: (value: number) => {
-				return new Date(Number(value)).toLocaleDateString('en-US')
-			},
+			modalComponent: 'DateInput',
+			format: (value: string | number) => new Date(value).toLocaleDateString('en-US'),
 		},
 	]
 
 	const defaultProps = {
 		columns,
 		modelValue: data,
-		config: { view: 'list' },
+		config: { view: 'list' } as TableConfig,
 	}
 
 	beforeEach(() => {
@@ -90,7 +87,7 @@ describe('table component', () => {
 	})
 
 	it('verify data rows (format string)', async () => {
-		const columns = [
+		const columns: TableColumn[] = [
 			{
 				label: 'Home Page',
 				name: 'home_page',
@@ -115,10 +112,8 @@ describe('table component', () => {
 				align: 'center',
 				edit: true,
 				width: '25ch',
-				modalComponent: 'ADate',
-				format: (value: number) => {
-					return new Date(Number(value)).toLocaleDateString('en-US')
-				},
+				modalComponent: 'DateInput',
+				format: (value: string | number) => new Date(value).toLocaleDateString('en-US'),
 			},
 		]
 
@@ -144,7 +139,7 @@ describe('table component', () => {
 	})
 
 	it('verify data rows (no format)', async () => {
-		const columns = [
+		const columns: TableColumn[] = [
 			{
 				label: 'Home Page',
 				name: 'home_page',
@@ -168,10 +163,8 @@ describe('table component', () => {
 				align: 'center',
 				edit: true,
 				width: '25ch',
-				modalComponent: 'ADate',
-				format: (value: number) => {
-					return new Date(Number(value)).toLocaleDateString('en-US')
-				},
+				modalComponent: 'DateInput',
+				format: (value: string | number) => new Date(value).toLocaleDateString('en-US'),
 			},
 		]
 
diff --git a/beam/CHANGELOG.json b/beam/CHANGELOG.json
index b6837469..8b05dafe 100644
--- a/beam/CHANGELOG.json
+++ b/beam/CHANGELOG.json
@@ -1,6 +1,24 @@
 {
   "name": "@stonecrop/beam",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/beam_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/beam_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "update deps"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/beam_v0.3.0",
diff --git a/beam/CHANGELOG.md b/beam/CHANGELOG.md
index 19afb9dc..ff101187 100644
--- a/beam/CHANGELOG.md
+++ b/beam/CHANGELOG.md
@@ -1,6 +1,18 @@
 # Change Log - @stonecrop/beam
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+_Version update only_
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+### Patches
+
+- update deps
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT
diff --git a/beam/package.json b/beam/package.json
index 1ac8b8fa..55080f38 100644
--- a/beam/package.json
+++ b/beam/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/beam",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"license": "MIT",
 	"type": "module",
 	"author": {
@@ -40,7 +40,7 @@
 		"test:ui": "vitest --ui"
 	},
 	"dependencies": {
-		"@vueuse/core": "^11.1.0",
+		"@vueuse/core": "^12.0.0",
 		"mqtt": "^5.10.1",
 		"onscan.js": "^1.5.2",
 		"vue": "^3.5.11"
diff --git a/code_editor/CHANGELOG.json b/code_editor/CHANGELOG.json
index 743c371c..9ab88824 100644
--- a/code_editor/CHANGELOG.json
+++ b/code_editor/CHANGELOG.json
@@ -1,6 +1,18 @@
 {
   "name": "@stonecrop/code-editor",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/code-editor_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/code-editor_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {}
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/code-editor_v0.3.0",
diff --git a/code_editor/CHANGELOG.md b/code_editor/CHANGELOG.md
index 527c0433..4c4528d6 100644
--- a/code_editor/CHANGELOG.md
+++ b/code_editor/CHANGELOG.md
@@ -1,6 +1,16 @@
 # Change Log - @stonecrop/code-editor
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+_Version update only_
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+_Version update only_
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT
diff --git a/code_editor/package.json b/code_editor/package.json
index 08d76569..9eec084f 100644
--- a/code_editor/package.json
+++ b/code_editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/code-editor",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"license": "MIT",
 	"type": "module",
 	"author": {
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 45d4c999..ebbd11c1 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -19,8 +19,8 @@ importers:
         specifier: workspace:*
         version: link:../utilities
       '@vueuse/core':
-        specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.13(typescript@5.7.2))
+        specifier: ^12.0.0
+        version: 12.0.0(typescript@5.7.2)
       vue:
         specifier: ^3.5.11
         version: 3.5.13(typescript@5.7.2)
@@ -95,11 +95,11 @@ importers:
         specifier: workspace:*
         version: link:../utilities
       '@vueuse/components':
-        specifier: ^10.11.0
-        version: 10.11.1(vue@3.5.13(typescript@5.7.2))
+        specifier: ^12.0.0
+        version: 12.0.0(typescript@5.7.2)
       '@vueuse/core':
-        specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.13(typescript@5.7.2))
+        specifier: ^12.0.0
+        version: 12.0.0(typescript@5.7.2)
       pinia:
         specifier: ^2.3.0
         version: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
@@ -168,8 +168,8 @@ importers:
   ../../beam:
     dependencies:
       '@vueuse/core':
-        specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.13(typescript@5.7.2))
+        specifier: ^12.0.0
+        version: 12.0.0(typescript@5.7.2)
       mqtt:
         specifier: ^5.10.1
         version: 5.10.1
@@ -725,8 +725,8 @@ importers:
   ../../utilities:
     dependencies:
       '@vueuse/core':
-        specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.13(typescript@5.7.2))
+        specifier: ^12.0.0
+        version: 12.0.0(typescript@5.7.2)
       vue:
         specifier: ^3.5.11
         version: 3.5.13(typescript@5.7.2)
@@ -2472,26 +2472,26 @@ packages:
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
-  '@vueuse/components@10.11.1':
-    resolution: {integrity: sha512-ThcreQCX/eq61sLkLKjigD4PQvs3Wy4zglICvQH9tP6xl87y5KsQEoizn6OI+R3hrOgwQHLJe7Y0wLLh3fBKcg==}
+  '@vueuse/components@12.0.0':
+    resolution: {integrity: sha512-XpOoBXYRuFuUiiq+HsMX6rGzqvcHdKnbT4sbR0FHYxwSGBHO3Zli8pPTZoLRNBGp4CGov7BRCnANEK/1Ch/6tQ==}
 
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
-  '@vueuse/core@11.1.0':
-    resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==}
+  '@vueuse/core@12.0.0':
+    resolution: {integrity: sha512-C12RukhXiJCbx4MGhjmd/gH52TjJsc3G0E0kQj/kb19H3Nt6n1CA4DRWuTdWWcaFRdlTe0npWDS942mvacvNBw==}
 
   '@vueuse/metadata@10.11.1':
     resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
 
-  '@vueuse/metadata@11.1.0':
-    resolution: {integrity: sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==}
+  '@vueuse/metadata@12.0.0':
+    resolution: {integrity: sha512-Yzimd1D3sjxTDOlF05HekU5aSGdKjxhuhRFHA7gDWLn57PRbBIh+SF5NmjhJ0WRgF3my7T8LBucyxdFJjIfRJQ==}
 
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
-  '@vueuse/shared@11.1.0':
-    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
+  '@vueuse/shared@12.0.0':
+    resolution: {integrity: sha512-3i6qtcq2PIio5i/vVYidkkcgvmTjCqrf26u+Fd4LhnbBmIT6FN8y6q/GJERp8lfcB9zVEfjdV0Br0443qZuJpw==}
 
   abab@2.0.6:
     resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
@@ -8372,14 +8372,13 @@ snapshots:
       js-beautify: 1.15.1
       vue-component-type-helpers: 2.1.6
 
-  '@vueuse/components@10.11.1(vue@3.5.13(typescript@5.7.2))':
+  '@vueuse/components@12.0.0(typescript@5.7.2)':
     dependencies:
-      '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.7.2))
-      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.7.2))
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
+      '@vueuse/core': 12.0.0(typescript@5.7.2)
+      '@vueuse/shared': 12.0.0(typescript@5.7.2)
+      vue: 3.5.13(typescript@5.7.2)
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      - typescript
 
   '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.7.2))':
     dependencies:
@@ -8391,19 +8390,18 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@11.1.0(vue@3.5.13(typescript@5.7.2))':
+  '@vueuse/core@12.0.0(typescript@5.7.2)':
     dependencies:
       '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 11.1.0
-      '@vueuse/shared': 11.1.0(vue@3.5.13(typescript@5.7.2))
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
+      '@vueuse/metadata': 12.0.0
+      '@vueuse/shared': 12.0.0(typescript@5.7.2)
+      vue: 3.5.13(typescript@5.7.2)
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      - typescript
 
   '@vueuse/metadata@10.11.1': {}
 
-  '@vueuse/metadata@11.1.0': {}
+  '@vueuse/metadata@12.0.0': {}
 
   '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.7.2))':
     dependencies:
@@ -8412,12 +8410,11 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/shared@11.1.0(vue@3.5.13(typescript@5.7.2))':
+  '@vueuse/shared@12.0.0(typescript@5.7.2)':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
+      vue: 3.5.13(typescript@5.7.2)
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      - typescript
 
   abab@2.0.6: {}
 
diff --git a/common/config/rush/version-policies.json b/common/config/rush/version-policies.json
index 8e466d11..095fd10b 100644
--- a/common/config/rush/version-policies.json
+++ b/common/config/rush/version-policies.json
@@ -12,7 +12,7 @@
 	{
 		"definitionName": "lockStepVersion",
 		"policyName": "stonecrop",
-		"version": "0.3.0",
+		"version": "0.3.2",
 		"nextBump": "patch"
 	}
 	// {
diff --git a/common/reviews/api/aform.api.md b/common/reviews/api/aform.api.md
index df2275df..31349d05 100644
--- a/common/reviews/api/aform.api.md
+++ b/common/reviews/api/aform.api.md
@@ -90,9 +90,9 @@ export type TableColumn = {
     pinned?: boolean;
     cellComponent?: string;
     cellComponentProps?: Record<string, any>;
-    modalComponent?: string | ((context?: CellContext) => string);
+    modalComponent?: string | ((context: CellContext) => string);
     modalComponentExtraProps?: Record<string, any>;
-    format?: string | ((value: any, context?: CellContext) => string);
+    format?: string | ((value: any, context: CellContext) => string);
     mask?: (value: any) => any;
 };
 
diff --git a/common/reviews/api/atable.api.md b/common/reviews/api/atable.api.md
index fb37b43b..47762489 100644
--- a/common/reviews/api/atable.api.md
+++ b/common/reviews/api/atable.api.md
@@ -59,9 +59,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[], TableColumn[] | {
 name: string;
@@ -73,9 +73,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[]>;
 rows: Ref<    {
@@ -161,9 +161,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[], TableColumn[] | {
 name: string;
@@ -175,9 +175,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[]>;
 rows: Ref<    {
@@ -263,9 +263,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[], TableColumn[] | {
 name: string;
@@ -277,9 +277,9 @@ width?: string;
 pinned?: boolean;
 cellComponent?: string;
 cellComponentProps?: Record<string, any>;
-modalComponent?: string | ((context?: CellContext) => string);
+modalComponent?: string | ((context: CellContext) => string);
 modalComponentExtraProps?: Record<string, any>;
-format?: string | ((value: any, context?: CellContext) => string);
+format?: string | ((value: any, context: CellContext) => string);
 mask?: (value: any) => any;
 }[]>;
 rows: Ref<    {
@@ -370,9 +370,9 @@ export type TableColumn = {
     pinned?: boolean;
     cellComponent?: string;
     cellComponentProps?: Record<string, any>;
-    modalComponent?: string | ((context?: CellContext) => string);
+    modalComponent?: string | ((context: CellContext) => string);
     modalComponentExtraProps?: Record<string, any>;
-    format?: string | ((value: any, context?: CellContext) => string);
+    format?: string | ((value: any, context: CellContext) => string);
     mask?: (value: any) => any;
 };
 
diff --git a/desktop/CHANGELOG.json b/desktop/CHANGELOG.json
index f9e2f393..5cba0787 100644
--- a/desktop/CHANGELOG.json
+++ b/desktop/CHANGELOG.json
@@ -1,6 +1,18 @@
 {
   "name": "@stonecrop/desktop",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/desktop_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/desktop_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {}
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/desktop_v0.3.0",
diff --git a/desktop/CHANGELOG.md b/desktop/CHANGELOG.md
index f1f89a26..955c6422 100644
--- a/desktop/CHANGELOG.md
+++ b/desktop/CHANGELOG.md
@@ -1,6 +1,16 @@
 # Change Log - @stonecrop/desktop
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+_Version update only_
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+_Version update only_
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT
diff --git a/desktop/package.json b/desktop/package.json
index e344cfdb..dbed8176 100644
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/desktop",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"description": "Desktop-specific components for Stonecrop UI",
 	"license": "MIT",
 	"type": "module",
diff --git a/docs/aform/aform.tablecolumn.md b/docs/aform/aform.tablecolumn.md
index b63971ed..e98b2729 100644
--- a/docs/aform/aform.tablecolumn.md
+++ b/docs/aform/aform.tablecolumn.md
@@ -19,9 +19,9 @@ export type TableColumn = {
     pinned?: boolean;
     cellComponent?: string;
     cellComponentProps?: Record<string, any>;
-    modalComponent?: string | ((context?: CellContext) => string);
+    modalComponent?: string | ((context: CellContext) => string);
     modalComponentExtraProps?: Record<string, any>;
-    format?: string | ((value: any, context?: CellContext) => string);
+    format?: string | ((value: any, context: CellContext) => string);
     mask?: (value: any) => any;
 };
 ```
diff --git a/docs/atable/atable.createtablestore.md b/docs/atable/atable.createtablestore.md
index a581aa6b..d16165ae 100644
--- a/docs/atable/atable.createtablestore.md
+++ b/docs/atable/atable.createtablestore.md
@@ -30,9 +30,9 @@ createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[], TableColumn[] | {
         name: string;
@@ -44,9 +44,9 @@ createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[]>;
     rows: import("vue").Ref<{
@@ -132,9 +132,9 @@ createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[], TableColumn[] | {
         name: string;
@@ -146,9 +146,9 @@ createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[]>;
     rows: import("vue").Ref<{
@@ -234,9 +234,9 @@ createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[], TableColumn[] | {
         name: string;
@@ -248,9 +248,9 @@ createTableStore: (initData: {
         pinned?: boolean;
         cellComponent?: string;
         cellComponentProps?: Record<string, any>;
-        modalComponent?: string | ((context?: CellContext) => string);
+        modalComponent?: string | ((context: CellContext) => string);
         modalComponentExtraProps?: Record<string, any>;
-        format?: string | ((value: any, context?: CellContext) => string);
+        format?: string | ((value: any, context: CellContext) => string);
         mask?: (value: any) => any;
     }[]>;
     rows: import("vue").Ref<{
@@ -365,7 +365,7 @@ Initial data for the table store
 </tbody></table>
 **Returns:**
 
-import("pinia").Store&lt;\`table-${string}\`, Pick&lt;{ columns: import("vue").Ref&lt;{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\], [TableColumn](./atable.tablecolumn.md)<!-- -->\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\]&gt;; rows: import("vue").Ref&lt;{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)<!-- -->\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]&gt;; config: import("vue").Ref&lt;{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }&gt;; table: import("vue").Ref&lt;{}, {}&gt;; display: import("vue").Ref&lt;{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)<!-- -->\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]&gt;; modal: import("vue").Ref&lt;{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }&gt;; hasPinnedColumns: import("vue").ComputedRef&lt;boolean&gt;; numberedRowWidth: import("vue").ComputedRef&lt;string&gt;; zeroColumn: import("vue").ComputedRef&lt;boolean&gt;; closeModal: (event: MouseEvent) =&gt; void; getCellData: &lt;T = any&gt;(colIndex: number, rowIndex: number) =&gt; T; getCellDisplayValue: (colIndex: number, rowIndex: number) =&gt; any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) =&gt; any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)<!-- -->) =&gt; CSSProperties; getIndent: (colIndex: number, indentLevel?: number) =&gt; string; getRowExpandSymbol: (rowIndex: number) =&gt; "" \| "-" \| "+"; isRowVisible: (rowIndex: number) =&gt; boolean; setCellData: (colIndex: number, rowIndex: number, value: any) =&gt; void; toggleRowExpand: (rowIndex: number) =&gt; void; }, "columns" \| "rows" \| "config" \| "table" \| "display" \| "modal"&gt;, Pick&lt;{ columns: import("vue").Ref&lt;{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\], [TableColumn](./atable.tablecolumn.md)<!-- -->\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\]&gt;; rows: import("vue").Ref&lt;{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)<!-- -->\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]&gt;; config: import("vue").Ref&lt;{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }&gt;; table: import("vue").Ref&lt;{}, {}&gt;; display: import("vue").Ref&lt;{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)<!-- -->\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]&gt;; modal: import("vue").Ref&lt;{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }&gt;; hasPinnedColumns: import("vue").ComputedRef&lt;boolean&gt;; numberedRowWidth: import("vue").ComputedRef&lt;string&gt;; zeroColumn: import("vue").ComputedRef&lt;boolean&gt;; closeModal: (event: MouseEvent) =&gt; void; getCellData: &lt;T = any&gt;(colIndex: number, rowIndex: number) =&gt; T; getCellDisplayValue: (colIndex: number, rowIndex: number) =&gt; any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) =&gt; any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)<!-- -->) =&gt; CSSProperties; getIndent: (colIndex: number, indentLevel?: number) =&gt; string; getRowExpandSymbol: (rowIndex: number) =&gt; "" \| "-" \| "+"; isRowVisible: (rowIndex: number) =&gt; boolean; setCellData: (colIndex: number, rowIndex: number, value: any) =&gt; void; toggleRowExpand: (rowIndex: number) =&gt; void; }, "hasPinnedColumns" \| "numberedRowWidth" \| "zeroColumn"&gt;, Pick&lt;{ columns: import("vue").Ref&lt;{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\], [TableColumn](./atable.tablecolumn.md)<!-- -->\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context?: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\]&gt;; rows: import("vue").Ref&lt;{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)<!-- -->\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]&gt;; config: import("vue").Ref&lt;{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }&gt;; table: import("vue").Ref&lt;{}, {}&gt;; display: import("vue").Ref&lt;{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)<!-- -->\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]&gt;; modal: import("vue").Ref&lt;{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }&gt;; hasPinnedColumns: import("vue").ComputedRef&lt;boolean&gt;; numberedRowWidth: import("vue").ComputedRef&lt;string&gt;; zeroColumn: import("vue").ComputedRef&lt;boolean&gt;; closeModal: (event: MouseEvent) =&gt; void; getCellData: &lt;T = any&gt;(colIndex: number, rowIndex: number) =&gt; T; getCellDisplayValue: (colIndex: number, rowIndex: number) =&gt; any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) =&gt; any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)<!-- -->) =&gt; CSSProperties; getIndent: (colIndex: number, indentLevel?: number) =&gt; string; getRowExpandSymbol: (rowIndex: number) =&gt; "" \| "-" \| "+"; isRowVisible: (rowIndex: number) =&gt; boolean; setCellData: (colIndex: number, rowIndex: number, value: any) =&gt; void; toggleRowExpand: (rowIndex: number) =&gt; void; }, "closeModal" \| "getCellData" \| "getCellDisplayValue" \| "getFormattedValue" \| "getHeaderCellStyle" \| "getIndent" \| "getRowExpandSymbol" \| "isRowVisible" \| "setCellData" \| "toggleRowExpand"&gt;&gt;
+import("pinia").Store&lt;\`table-${string}\`, Pick&lt;{ columns: import("vue").Ref&lt;{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\], [TableColumn](./atable.tablecolumn.md)<!-- -->\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\]&gt;; rows: import("vue").Ref&lt;{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)<!-- -->\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]&gt;; config: import("vue").Ref&lt;{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }&gt;; table: import("vue").Ref&lt;{}, {}&gt;; display: import("vue").Ref&lt;{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)<!-- -->\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]&gt;; modal: import("vue").Ref&lt;{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }&gt;; hasPinnedColumns: import("vue").ComputedRef&lt;boolean&gt;; numberedRowWidth: import("vue").ComputedRef&lt;string&gt;; zeroColumn: import("vue").ComputedRef&lt;boolean&gt;; closeModal: (event: MouseEvent) =&gt; void; getCellData: &lt;T = any&gt;(colIndex: number, rowIndex: number) =&gt; T; getCellDisplayValue: (colIndex: number, rowIndex: number) =&gt; any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) =&gt; any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)<!-- -->) =&gt; CSSProperties; getIndent: (colIndex: number, indentLevel?: number) =&gt; string; getRowExpandSymbol: (rowIndex: number) =&gt; "" \| "-" \| "+"; isRowVisible: (rowIndex: number) =&gt; boolean; setCellData: (colIndex: number, rowIndex: number, value: any) =&gt; void; toggleRowExpand: (rowIndex: number) =&gt; void; }, "columns" \| "rows" \| "config" \| "table" \| "display" \| "modal"&gt;, Pick&lt;{ columns: import("vue").Ref&lt;{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\], [TableColumn](./atable.tablecolumn.md)<!-- -->\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\]&gt;; rows: import("vue").Ref&lt;{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)<!-- -->\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]&gt;; config: import("vue").Ref&lt;{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }&gt;; table: import("vue").Ref&lt;{}, {}&gt;; display: import("vue").Ref&lt;{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)<!-- -->\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]&gt;; modal: import("vue").Ref&lt;{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }&gt;; hasPinnedColumns: import("vue").ComputedRef&lt;boolean&gt;; numberedRowWidth: import("vue").ComputedRef&lt;string&gt;; zeroColumn: import("vue").ComputedRef&lt;boolean&gt;; closeModal: (event: MouseEvent) =&gt; void; getCellData: &lt;T = any&gt;(colIndex: number, rowIndex: number) =&gt; T; getCellDisplayValue: (colIndex: number, rowIndex: number) =&gt; any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) =&gt; any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)<!-- -->) =&gt; CSSProperties; getIndent: (colIndex: number, indentLevel?: number) =&gt; string; getRowExpandSymbol: (rowIndex: number) =&gt; "" \| "-" \| "+"; isRowVisible: (rowIndex: number) =&gt; boolean; setCellData: (colIndex: number, rowIndex: number, value: any) =&gt; void; toggleRowExpand: (rowIndex: number) =&gt; void; }, "hasPinnedColumns" \| "numberedRowWidth" \| "zeroColumn"&gt;, Pick&lt;{ columns: import("vue").Ref&lt;{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\], [TableColumn](./atable.tablecolumn.md)<!-- -->\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record&lt;string, any&gt;; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); modalComponentExtraProps?: Record&lt;string, any&gt;; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)<!-- -->) =&gt; string); mask?: (value: any) =&gt; any; }\[\]&gt;; rows: import("vue").Ref&lt;{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)<!-- -->\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]&gt;; config: import("vue").Ref&lt;{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }&gt;; table: import("vue").Ref&lt;{}, {}&gt;; display: import("vue").Ref&lt;{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)<!-- -->\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]&gt;; modal: import("vue").Ref&lt;{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record&lt;string, any&gt;; }&gt;; hasPinnedColumns: import("vue").ComputedRef&lt;boolean&gt;; numberedRowWidth: import("vue").ComputedRef&lt;string&gt;; zeroColumn: import("vue").ComputedRef&lt;boolean&gt;; closeModal: (event: MouseEvent) =&gt; void; getCellData: &lt;T = any&gt;(colIndex: number, rowIndex: number) =&gt; T; getCellDisplayValue: (colIndex: number, rowIndex: number) =&gt; any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) =&gt; any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)<!-- -->) =&gt; CSSProperties; getIndent: (colIndex: number, indentLevel?: number) =&gt; string; getRowExpandSymbol: (rowIndex: number) =&gt; "" \| "-" \| "+"; isRowVisible: (rowIndex: number) =&gt; boolean; setCellData: (colIndex: number, rowIndex: number, value: any) =&gt; void; toggleRowExpand: (rowIndex: number) =&gt; void; }, "closeModal" \| "getCellData" \| "getCellDisplayValue" \| "getFormattedValue" \| "getHeaderCellStyle" \| "getIndent" \| "getRowExpandSymbol" \| "isRowVisible" \| "setCellData" \| "toggleRowExpand"&gt;&gt;
 
 table store instance
 
diff --git a/docs/atable/atable.tablecolumn.md b/docs/atable/atable.tablecolumn.md
index 880fdbe6..548e9956 100644
--- a/docs/atable/atable.tablecolumn.md
+++ b/docs/atable/atable.tablecolumn.md
@@ -19,9 +19,9 @@ export type TableColumn = {
     pinned?: boolean;
     cellComponent?: string;
     cellComponentProps?: Record<string, any>;
-    modalComponent?: string | ((context?: CellContext) => string);
+    modalComponent?: string | ((context: CellContext) => string);
     modalComponentExtraProps?: Record<string, any>;
-    format?: string | ((value: any, context?: CellContext) => string);
+    format?: string | ((value: any, context: CellContext) => string);
     mask?: (value: any) => any;
 };
 ```
diff --git a/examples/aform/assets/basic_table_schema.json b/examples/aform/assets/basic_table_schema.json
index bf38d8a5..6442730f 100644
--- a/examples/aform/assets/basic_table_schema.json
+++ b/examples/aform/assets/basic_table_schema.json
@@ -48,7 +48,7 @@
 				"align": "center",
 				"edit": true,
 				"width": "25ch",
-				"format": "value => { return (new Date(Number(value)).toLocaleDateString('en-US')) }"
+				"format": "value => { return (new Date(value).toLocaleDateString('en-US')) }"
 			}
 		],
 		"config": { "view": "list" },
diff --git a/examples/aform/assets/fieldset_table_schema.json b/examples/aform/assets/fieldset_table_schema.json
index 78b3e1f5..2f144059 100644
--- a/examples/aform/assets/fieldset_table_schema.json
+++ b/examples/aform/assets/fieldset_table_schema.json
@@ -53,7 +53,7 @@
 						"align": "center",
 						"edit": true,
 						"width": "25ch",
-						"format": "value => { return (new Date(Number(value)).toLocaleDateString('en-US')) }"
+						"format": "value => { return (new Date(value).toLocaleDateString('en-US')) }"
 					}
 				],
 				"config": { "view": "list" },
diff --git a/examples/atable/components/DateInput.vue b/examples/atable/components/DateInput.vue
new file mode 100644
index 00000000..4f20a414
--- /dev/null
+++ b/examples/atable/components/DateInput.vue
@@ -0,0 +1,20 @@
+<template>
+	<ADate v-model="date" v-bind="rest" />
+</template>
+
+<script setup lang="ts">
+import { ADate } from '@stonecrop/aform'
+import { createTableStore } from '@stonecrop/atable'
+import { ref, watch } from 'vue'
+
+const { colIndex, rowIndex, store, ...rest } = defineProps<{
+	colIndex: number
+	rowIndex: number
+	store: ReturnType<typeof createTableStore>
+	[key: string]: any
+}>()
+
+const date = ref(store.getCellData<number>(colIndex, rowIndex))
+
+watch(date, newDate => store.setCellData(colIndex, rowIndex, newDate))
+</script>
diff --git a/examples/atable/default.story.vue b/examples/atable/default.story.vue
index aab223c1..533aa47c 100644
--- a/examples/atable/default.story.vue
+++ b/examples/atable/default.story.vue
@@ -16,10 +16,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { CellContext, TableColumn } from '@stonecrop/atable'
-import { ref } from 'vue'
+import type { TableColumn } from '@stonecrop/atable'
+import { reactive } from 'vue'
 
-import data from './sample_data/http_logs.json'
+import rows from './sample_data/http_logs.json'
 
 const columns: TableColumn[] = [
 	{
@@ -29,7 +29,7 @@ const columns: TableColumn[] = [
 		align: 'left',
 		edit: false,
 		width: '40ch',
-		format: (value: { title?: string; value?: any }, context: CellContext) => {
+		format: (value: { title?: string; value?: any }, context) => {
 			return `<a href="${value.title}" target="_blank">${value.title} (IP: ${context.row.ip_address})</a>`
 		},
 	},
@@ -48,10 +48,8 @@ const columns: TableColumn[] = [
 		align: 'center',
 		edit: true,
 		width: '25ch',
-		modalComponent: 'ADate',
-		format: (value: number) => {
-			return new Date(Number(value)).toLocaleDateString('en-US')
-		},
+		modalComponent: 'DateInput',
+		format: (value: number) => new Date(value).toLocaleDateString('en-US'),
 	},
 ]
 
@@ -70,7 +68,7 @@ const readonly_columns: TableColumn[] = [
 		name: 'http_method',
 		type: 'Data',
 		align: 'left',
-		edit: true,
+		edit: false,
 		width: '20ch',
 	},
 	{
@@ -78,38 +76,34 @@ const readonly_columns: TableColumn[] = [
 		name: 'report_date',
 		type: 'component',
 		align: 'center',
-		edit: true,
+		edit: false,
 		width: '25ch',
-		modalComponent: 'ADate',
-		modalComponentExtraProps: {
-			readonly: true,
-		},
-		format: (value: number) => {
-			return new Date(Number(value)).toLocaleDateString('en-US')
-		},
+		modalComponent: 'DateInput',
+		modalComponentExtraProps: { readonly: true },
+		format: (value: number) => new Date(value).toLocaleDateString('en-US'),
 	},
 ]
 
-const default_table = ref({
-	rows: data,
+const default_table = reactive({
+	rows,
 	columns,
 	config: { view: 'list' },
 })
 
-const uncounted_table = ref({
-	rows: data,
+const uncounted_table = reactive({
+	rows,
 	columns,
 	config: { view: 'uncounted' },
 })
 
-const readonly_table = ref({
-	rows: data,
+const readonly_table = reactive({
+	rows,
 	columns: readonly_columns,
 	config: { view: 'list' },
 })
 
-const full_width_table = ref({
-	rows: data,
+const full_width_table = reactive({
+	rows,
 	columns,
 	config: { view: 'list', fullWidth: true },
 })
diff --git a/examples/atable/histoire.setup.ts b/examples/atable/histoire.setup.ts
index ea9cafdd..06b3a015 100644
--- a/examples/atable/histoire.setup.ts
+++ b/examples/atable/histoire.setup.ts
@@ -3,9 +3,12 @@ import { install as AForm } from '@stonecrop/aform'
 import { install as ATable } from '@stonecrop/atable'
 import { createPinia } from 'pinia'
 
+import DateInput from './components/DateInput.vue'
+
 export const setupVue3 = defineSetupVue3(({ app }) => {
 	const pinia = createPinia()
 	app.use(pinia)
 	app.use(AForm)
 	app.use(ATable)
+	app.component('DateInput', DateInput)
 })
diff --git a/examples/atable/list.story.vue b/examples/atable/list.story.vue
index 1df40991..0967ed7b 100644
--- a/examples/atable/list.story.vue
+++ b/examples/atable/list.story.vue
@@ -107,7 +107,7 @@
 </template>
 
 <script lang="ts" setup>
-import { type TableColumn, createTableStore } from '@stonecrop/atable'
+import { type TableColumn } from '@stonecrop/atable'
 import { CSSProperties, ref } from 'vue'
 
 import inbox_data from './sample_data/inbox.json'
@@ -188,10 +188,8 @@ const http_logs = ref({
 			align: 'center',
 			edit: true,
 			width: '25ch',
-			modalComponent: 'ADate',
-			format: (value: number) => {
-				return new Date(Number(value)).toLocaleDateString('en-US')
-			},
+			modalComponent: 'DateInput',
+			format: (value: number) => new Date(value).toLocaleDateString('en-US'),
 		},
 	] as TableColumn[],
 })
@@ -226,10 +224,8 @@ const pinned_logs = ref({
 			edit: true,
 			width: '25ch',
 			pinned: false,
-			modalComponent: 'ADate',
-			format: (value: number) => {
-				return new Date(Number(value)).toLocaleDateString('en-US')
-			},
+			modalComponent: 'DateInput',
+			format: (value: string | number) => new Date(value).toLocaleDateString('en-US'),
 		},
 	],
 })
diff --git a/graphql_client/CHANGELOG.json b/graphql_client/CHANGELOG.json
index 969d3368..b9872c80 100644
--- a/graphql_client/CHANGELOG.json
+++ b/graphql_client/CHANGELOG.json
@@ -1,6 +1,18 @@
 {
   "name": "@stonecrop/graphql-client",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/graphql-client_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/graphql-client_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {}
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/graphql-client_v0.3.0",
diff --git a/graphql_client/CHANGELOG.md b/graphql_client/CHANGELOG.md
index 1f2c2289..43c2b5b7 100644
--- a/graphql_client/CHANGELOG.md
+++ b/graphql_client/CHANGELOG.md
@@ -1,6 +1,16 @@
 # Change Log - @stonecrop/graphql-client
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+_Version update only_
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+_Version update only_
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT
diff --git a/graphql_client/package.json b/graphql_client/package.json
index d5758302..2704374c 100644
--- a/graphql_client/package.json
+++ b/graphql_client/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/graphql-client",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"license": "MIT",
 	"type": "module",
 	"author": {
diff --git a/node_editor/CHANGELOG.json b/node_editor/CHANGELOG.json
index d8f709cc..91cff41a 100644
--- a/node_editor/CHANGELOG.json
+++ b/node_editor/CHANGELOG.json
@@ -1,6 +1,18 @@
 {
   "name": "@stonecrop/node-editor",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/node-editor_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/node-editor_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {}
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/node-editor_v0.3.0",
diff --git a/node_editor/CHANGELOG.md b/node_editor/CHANGELOG.md
index 63b9e54a..864b6dfa 100644
--- a/node_editor/CHANGELOG.md
+++ b/node_editor/CHANGELOG.md
@@ -1,6 +1,16 @@
 # Change Log - @stonecrop/node-editor
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+_Version update only_
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+_Version update only_
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT
diff --git a/node_editor/package.json b/node_editor/package.json
index 18526ccd..6f1bf1c1 100644
--- a/node_editor/package.json
+++ b/node_editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/node-editor",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"description": "Node editor UI for Stonecrop",
 	"license": "MIT",
 	"type": "module",
diff --git a/stonecrop/CHANGELOG.json b/stonecrop/CHANGELOG.json
index dd0a3917..3ad67c83 100644
--- a/stonecrop/CHANGELOG.json
+++ b/stonecrop/CHANGELOG.json
@@ -1,6 +1,18 @@
 {
   "name": "@stonecrop/stonecrop",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/stonecrop_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/stonecrop_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {}
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/stonecrop_v0.3.0",
diff --git a/stonecrop/CHANGELOG.md b/stonecrop/CHANGELOG.md
index ba6a15ad..8f12dc1a 100644
--- a/stonecrop/CHANGELOG.md
+++ b/stonecrop/CHANGELOG.md
@@ -1,6 +1,16 @@
 # Change Log - @stonecrop/stonecrop
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+_Version update only_
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+_Version update only_
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT
diff --git a/stonecrop/package.json b/stonecrop/package.json
index bd3f9915..cb1c4ad3 100644
--- a/stonecrop/package.json
+++ b/stonecrop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/stonecrop",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"description": "schema helper",
 	"license": "MIT",
 	"type": "module",
diff --git a/themes/CHANGELOG.json b/themes/CHANGELOG.json
index 8f024da9..18f88071 100644
--- a/themes/CHANGELOG.json
+++ b/themes/CHANGELOG.json
@@ -1,6 +1,18 @@
 {
   "name": "@stonecrop/themes",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/themes_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/themes_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {}
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/themes_v0.3.0",
diff --git a/themes/CHANGELOG.md b/themes/CHANGELOG.md
index fdcf7f11..408a2712 100644
--- a/themes/CHANGELOG.md
+++ b/themes/CHANGELOG.md
@@ -1,6 +1,16 @@
 # Change Log - @stonecrop/themes
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+_Version update only_
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+_Version update only_
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT
diff --git a/themes/package.json b/themes/package.json
index 0e87f647..92e29af8 100644
--- a/themes/package.json
+++ b/themes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/themes",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"type": "module",
 	"author": {
 		"name": "Tyler Matteson",
diff --git a/utilities/CHANGELOG.json b/utilities/CHANGELOG.json
index 82748783..c94d7e53 100644
--- a/utilities/CHANGELOG.json
+++ b/utilities/CHANGELOG.json
@@ -1,6 +1,24 @@
 {
   "name": "@stonecrop/utilities",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/utilities_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/utilities_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "update deps"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/utilities_v0.3.0",
diff --git a/utilities/CHANGELOG.md b/utilities/CHANGELOG.md
index 6129fef5..956e378b 100644
--- a/utilities/CHANGELOG.md
+++ b/utilities/CHANGELOG.md
@@ -1,6 +1,18 @@
 # Change Log - @stonecrop/utilities
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+_Version update only_
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+### Patches
+
+- update deps
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT
diff --git a/utilities/package.json b/utilities/package.json
index e0b391cc..3bc3959f 100644
--- a/utilities/package.json
+++ b/utilities/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/utilities",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"license": "MIT",
 	"type": "module",
 	"author": {
@@ -38,7 +38,7 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@vueuse/core": "^11.1.0",
+		"@vueuse/core": "^12.0.0",
 		"vue": "^3.5.11"
 	},
 	"devDependencies": {