diff --git a/aform/src/components/form/ADate.vue b/aform/src/components/form/ADate.vue
index ca2e6dfe..970249bf 100644
--- a/aform/src/components/form/ADate.vue
+++ b/aform/src/components/form/ADate.vue
@@ -47,6 +47,8 @@ const showPicker = () => {
 <style scoped>
 div {
 	min-width: 40ch;
+	width: 100%;
+	box-sizing: border-box;
 	border: 1px solid transparent;
 	padding: 0rem;
 	margin: 0rem;
@@ -55,6 +57,7 @@ div {
 
 input {
 	width: calc(100% - 1ch);
+	box-sizing: border-box;
 	outline: 1px solid transparent;
 	border: 1px solid var(--sc-input-border-color);
 	padding: 1ch 0.5ch 0.5ch 1ch;
@@ -72,12 +75,14 @@ label {
 	margin: 0rem;
 	border: 1px solid transparent;
 	margin-bottom: 0.25rem;
+	box-sizing: border-box;
 }
 
 p {
 	width: 100%;
 	color: red;
 	font-size: 85%;
+	box-sizing: border-box;
 }
 
 label {
@@ -87,6 +92,7 @@ label {
 	background: white;
 	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
 	padding: 0 0.25ch 0 0.25ch;
+	box-sizing: border-box;
 }
 
 input:focus {
diff --git a/atable/src/components/ACell.vue b/atable/src/components/ACell.vue
index ffe8f1f7..0c612a8e 100644
--- a/atable/src/components/ACell.vue
+++ b/atable/src/components/ACell.vue
@@ -49,7 +49,7 @@ const {
 }>()
 
 const cellRef = useTemplateRef<HTMLTableCellElement>('cell')
-const { bottom, left } = useElementBounding(cellRef)
+const { width, height } = useElementBounding(cellRef)
 
 // keep a shallow copy of the original cell value for comparison
 const originalData = store.getCellData(colIndex, rowIndex)
@@ -97,9 +97,10 @@ const showModal = () => {
 			state.modal.colIndex = colIndex
 			state.modal.rowIndex = rowIndex
 			state.modal.parent = cellRef.value
-			state.modal.top = bottom.value
-			state.modal.left = left.value
-			state.modal.width = cellWidth
+			state.modal.top = cellRef.value.offsetTop + cellRef.value.offsetHeight
+			state.modal.left = cellRef.value.offsetLeft
+			state.modal.width = width.value
+			state.modal.height = height.value
 
 			if (typeof column.modalComponent === 'function') {
 				state.modal.component = column.modalComponent({ table: state.table, row, column })
diff --git a/atable/src/components/ATable.vue b/atable/src/components/ATable.vue
index d5435b8f..9bbb1d67 100644
--- a/atable/src/components/ATable.vue
+++ b/atable/src/components/ATable.vue
@@ -37,11 +37,7 @@
 				:colIndex="store.modal.colIndex"
 				:rowIndex="store.modal.rowIndex"
 				:store="store"
-				:style="{
-					left: store.modal.left + 'px',
-					top: store.modal.top + 'px',
-					maxWidth: store.modal.width + 'px',
-				}">
+				:container="tableRef">
 				<template #default>
 					<component
 						:key="`${store.modal.rowIndex}:${store.modal.colIndex}`"
@@ -249,6 +245,7 @@ td.sticky-index {
 <style scoped>
 @import url('@stonecrop/themes/default.css');
 .atable {
+	position: relative;
 	font-family: var(--sc-atable-font-family);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
diff --git a/atable/src/components/ATableModal.vue b/atable/src/components/ATableModal.vue
index 36851d5e..13dcce7e 100644
--- a/atable/src/components/ATableModal.vue
+++ b/atable/src/components/ATableModal.vue
@@ -1,26 +1,49 @@
 <template>
-	<div class="amodal" tabindex="-1" @click="handleInput" @input="handleInput">
+	<div class="amodal" ref="amodal" tabindex="-1" @click="handleInput" @input="handleInput" :style="amodalStyles">
 		<slot />
 	</div>
 </template>
 
 <script setup lang="ts">
+import { useElementBounding } from '@vueuse/core'
+import { useTemplateRef, computed } from 'vue'
+
 import { createTableStore } from '../stores/table'
 
-/* const { colIndex, rowIndex, store } = */ defineProps<{
+const { store, container } = defineProps<{
 	colIndex?: number
 	rowIndex?: number
 	store?: ReturnType<typeof createTableStore>
+	container?: HTMLElement
 }>()
 
-// const cellBackgroundColor = computed(() => {
-// 	if (store.modal.parent) {
-// 		let computedstyle = window.getComputedStyle(store.modal.parent)
-// 		return 'blue'
-// 	} else {
-// 		return 'inherit'
-// 	}
-// })
+const amodalRef = useTemplateRef('amodal')
+const { width, height } = useElementBounding(amodalRef)
+
+const amodalStyles = computed(() => {
+	// the modal usually will appear left align with and below the element it is associated with,
+	// but needs to detect and adjust its position if it would overflow the rightr or bottom edges
+
+	// get the dimensions of whatever container is holding this modal, e.g. Table, Window, div so the modal can detect edges
+	const containerWidth = container?.offsetWidth || 0
+	const containerHeight = container?.offsetHeight || 0
+
+	// if this modal would go outside the edge of its container, instead place it above the element (Y) or along the right side (X)
+	const modalLeft =
+		store.modal.left + width.value > containerWidth
+			? store.modal.left - (width.value - store.modal.width)
+			: store.modal.left
+
+	const modalTop =
+		store.modal.top + height.value > containerHeight
+			? store.modal.top - height.value - store.modal.height
+			: store.modal.top
+
+	return {
+		left: `${modalLeft}px`,
+		top: `${modalTop}px`,
+	}
+})
 
 const handleInput = (event: Event) => {
 	event.stopPropagation()
@@ -31,7 +54,7 @@ const handleInput = (event: Event) => {
 @import url('@stonecrop/themes/default.css');
 
 .amodal {
-	position: fixed;
+	position: absolute;
 	background-color: var(--sc-row-color-zebra-dark);
 	z-index: 100;
 }
diff --git a/atable/src/types/index.ts b/atable/src/types/index.ts
index 18201000..e5c79111 100644
--- a/atable/src/types/index.ts
+++ b/atable/src/types/index.ts
@@ -93,12 +93,13 @@ export type TableRow = {
 export type TableModal = {
 	colIndex?: number
 	event?: string
+	height?: number
 	left?: number
 	parent?: HTMLElement
 	rowIndex?: number
 	top?: number
 	visible?: boolean
-	width?: string
+	width?: number
 
 	component?: string
 	componentProps?: Record<string, any>
diff --git a/common/changes/@stonecrop/aform/fix-atable-modal-attach-to-cell_2024-12-12-17-57.json b/common/changes/@stonecrop/aform/fix-atable-modal-attach-to-cell_2024-12-12-17-57.json
new file mode 100644
index 00000000..b48a82c1
--- /dev/null
+++ b/common/changes/@stonecrop/aform/fix-atable-modal-attach-to-cell_2024-12-12-17-57.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/aform",
+      "comment": "small style update to Adate",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/aform"
+}
\ No newline at end of file
diff --git a/common/changes/@stonecrop/atable/fix-atable-modal-attach-to-cell_2024-12-12-17-57.json b/common/changes/@stonecrop/atable/fix-atable-modal-attach-to-cell_2024-12-12-17-57.json
new file mode 100644
index 00000000..9d05b43d
--- /dev/null
+++ b/common/changes/@stonecrop/atable/fix-atable-modal-attach-to-cell_2024-12-12-17-57.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/atable",
+      "comment": "modal scrolls with cells and detects edges",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/atable"
+}
\ No newline at end of file
diff --git a/common/reviews/api/atable.api.md b/common/reviews/api/atable.api.md
index 47762489..342e1572 100644
--- a/common/reviews/api/atable.api.md
+++ b/common/reviews/api/atable.api.md
@@ -117,23 +117,25 @@ rowModified?: boolean;
 modal: Ref<    {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }, TableModal | {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }>;
@@ -219,23 +221,25 @@ rowModified?: boolean;
 modal: Ref<    {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }, TableModal | {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }>;
@@ -321,23 +325,25 @@ rowModified?: boolean;
 modal: Ref<    {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }, TableModal | {
 colIndex?: number;
 event?: string;
+height?: number;
 left?: number;
 parent?: HTMLElement;
 rowIndex?: number;
 top?: number;
 visible?: boolean;
-width?: string;
+width?: number;
 component?: string;
 componentProps?: Record<string, any>;
 }>;
@@ -398,12 +404,13 @@ export type TableDisplay = {
 export type TableModal = {
     colIndex?: number;
     event?: string;
+    height?: number;
     left?: number;
     parent?: HTMLElement;
     rowIndex?: number;
     top?: number;
     visible?: boolean;
-    width?: string;
+    width?: number;
     component?: string;
     componentProps?: Record<string, any>;
 };
diff --git a/docs/atable/atable.createtablestore.md b/docs/atable/atable.createtablestore.md
index d16165ae..79e1012e 100644
--- a/docs/atable/atable.createtablestore.md
+++ b/docs/atable/atable.createtablestore.md
@@ -88,23 +88,25 @@ createTableStore: (initData: {
     modal: import("vue").Ref<{
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }, TableModal | {
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }>;
@@ -190,23 +192,25 @@ createTableStore: (initData: {
     modal: import("vue").Ref<{
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }, TableModal | {
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }>;
@@ -292,23 +296,25 @@ createTableStore: (initData: {
     modal: import("vue").Ref<{
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }, TableModal | {
         colIndex?: number;
         event?: string;
+        height?: number;
         left?: number;
         parent?: HTMLElement;
         rowIndex?: number;
         top?: number;
         visible?: boolean;
-        width?: string;
+        width?: number;
         component?: string;
         componentProps?: Record<string, any>;
     }>;
@@ -367,5 +373,6 @@ Initial data for the table store
 
 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.tablemodal.md b/docs/atable/atable.tablemodal.md
index cd0f7d57..c12a1a9d 100644
--- a/docs/atable/atable.tablemodal.md
+++ b/docs/atable/atable.tablemodal.md
@@ -12,12 +12,13 @@ Table modal definition.
 export type TableModal = {
     colIndex?: number;
     event?: string;
+    height?: number;
     left?: number;
     parent?: HTMLElement;
     rowIndex?: number;
     top?: number;
     visible?: boolean;
-    width?: string;
+    width?: number;
     component?: string;
     componentProps?: Record<string, any>;
 };