@stonecrop/atable 0.2.40 → 0.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.2.40",
+  "version": "0.2.41",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -35,8 +35,8 @@
     "@vueuse/core": "^11.1.0",
     "uuid": "^10.0.0",
     "vue": "^3.5.6",
-    "@stonecrop/utilities": "0.2.40",
-    "@stonecrop/themes": "0.2.40"
+    "@stonecrop/utilities": "0.2.41",
+    "@stonecrop/themes": "0.2.41"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.25.3",

package/src/components/ACell.vue

@@ -28,6 +28,7 @@
 
 <script setup lang="ts">
 import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
+import { useElementBounding } from '@vueuse/core'
 import { computed, CSSProperties, inject, ref, useTemplateRef } from 'vue'
 
 import TableDataStore from '.'
@@ -57,6 +58,14 @@ const table = tableData.table
 const column = tableData.columns[colIndex]
 const row = tableData.rows[rowIndex]
 
+const textAlign = computed(() => {
+	return column.align || 'center'
+})
+
+const cellWidth = computed(() => {
+	return column.width || '40ch'
+})
+
 const displayValue = computed(() => {
 	const cellData = tableData.cellData<any>(colIndex, rowIndex)
 	const format = column.format
@@ -84,13 +93,13 @@ const handleInput = () => {
 	}
 
 	if (column.modalComponent) {
-		const domRect = cellRef.value.getBoundingClientRect()
+		const { top, left, height } = useElementBounding(cellRef)
 		tableData.modal.visible = true
 		tableData.modal.colIndex = colIndex
 		tableData.modal.rowIndex = rowIndex
 		tableData.modal.parent = cellRef.value
-		tableData.modal.top = domRect.top + domRect.height
-		tableData.modal.left = domRect.left
+		tableData.modal.top = top.value + height.value
+		tableData.modal.left = left.value
 		tableData.modal.width = cellWidth.value
 
 		if (typeof column.modalComponent === 'function') {
@@ -140,14 +149,6 @@ if (addNavigation) {
 // 	}
 // }
 
-const textAlign = computed(() => {
-	return column.align || 'center'
-})
-
-const cellWidth = computed(() => {
-	return column.width || '40ch'
-})
-
 const onFocus = () => {
 	if (cellRef.value) {
 		currentData.value = cellRef.value.textContent

package/src/components/ATable.vue

@@ -63,6 +63,7 @@
 
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components'
+import { useMutationObserver } from '@vueuse/core'
 import { nextTick, provide, watch, onMounted, useTemplateRef } from 'vue'
 
 import TableDataStore from '.'
@@ -102,12 +103,13 @@ watch(
 )
 
 onMounted(() => {
-	assignStickyCellWidths()
+	if (columns.some(col => col.pinned)) {
+		assignStickyCellWidths()
 
-	// in tree view, a mutation observer is needed to capture and adjust expanded rows
-	if (tableData.config.view === 'tree') {
-		const observer = new MutationObserver(() => assignStickyCellWidths())
-		observer.observe(tableRef.value, { childList: true, subtree: true })
+		// in tree view, also add a mutation observer to capture and adjust expanded rows
+		if (tableData.config.view === 'tree') {
+			useMutationObserver(tableRef, assignStickyCellWidths, { childList: true, subtree: true })
+		}
 	}
 })
 
@@ -115,10 +117,14 @@ const assignStickyCellWidths = () => {
 	const table = tableRef.value
 
 	// set header cell width to match sticky cells' width
-	const headerCells = Array.from(table.rows[0].cells)
+	const headerRow = table.rows[0]
+	const firstDataRow = table.rows[1]
+	const headerCells = headerRow ? Array.from(headerRow.cells) : []
 	for (const [index, headerCell] of headerCells.entries()) {
-		const rowCell = table.rows[1].cells[index]
-		headerCell.style.width = `${rowCell.offsetWidth}px`
+		const rowCell = firstDataRow.cells[index]
+		if (rowCell) {
+			headerCell.style.width = `${rowCell.offsetWidth}px`
+		}
 	}
 
 	// pin cells in row that are sticky