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/atable/src/components/ACell.vue b/atable/src/components/ACell.vue
index aeee28ea..ffe8f1f7 100644
--- a/atable/src/components/ACell.vue
+++ b/atable/src/components/ACell.vue
@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
 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'
@@ -53,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)
 
@@ -63,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/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/common/changes/@stonecrop/aform/fix-atable-modal-update_2024-12-17-10-02.json b/common/changes/@stonecrop/aform/fix-atable-modal-update_2024-12-17-10-02.json
new file mode 100644
index 00000000..29f09c61
--- /dev/null
+++ b/common/changes/@stonecrop/aform/fix-atable-modal-update_2024-12-17-10-02.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/aform",
+      "comment": "format adate emit response to fit native datepicker",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/aform"
+}
\ No newline at end of file
diff --git a/common/changes/@stonecrop/atable/fix-atable-modal-update_2024-12-17-10-02.json b/common/changes/@stonecrop/atable/fix-atable-modal-update_2024-12-17-10-02.json
new file mode 100644
index 00000000..37a2cd6f
--- /dev/null
+++ b/common/changes/@stonecrop/atable/fix-atable-modal-update_2024-12-17-10-02.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/atable",
+      "comment": "update table cell value reactively",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/atable"
+}
\ No newline at end of file
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/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'),
 		},
 	],
 })