diff --git a/src/index.js b/src/index.js
index ce804f2..664a7bf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -238,7 +238,7 @@ Component.register('DataTable', container => {
 	container.onMainMouseDown = e => {
 		const cell = e.target.closest('.dt-cell'), row = cell?.closest('.dt-row');
 		if (!row || row.classList.contains('dt-header-row')) return;
-		const fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.children).indexOf(cell);
+		const fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll('.dt-cell')).indexOf(cell);
 		const rIdx = row._ref?.rIdx ?? Array.from(container.querySelectorAll('.dt-body-row')).indexOf(row);
 		selection.startSelect(rIdx + state._listStartIndex, fIdx, e);
 	};
@@ -247,7 +247,7 @@ Component.register('DataTable', container => {
 		if (state.isSelecting) {
 			const cell = e.target.closest('.dt-cell'), row = cell?.closest('.dt-row');
 			if (row && !row.classList.contains('dt-header-row')) {
-				const fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.children).indexOf(cell);
+				const fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll('.dt-cell')).indexOf(cell);
 				const rIdx = row._ref?.rIdx ?? Array.from(container.querySelectorAll('.dt-body-row')).indexOf(row);
 				selection.updateSelect(rIdx + state._listStartIndex, fIdx);
 			}
@@ -257,7 +257,7 @@ Component.register('DataTable', container => {
 	container.onMainDblClick = e => {
 		const cell = e.target.closest('.dt-cell'), row = cell?.closest('.dt-row');
 		if (row && !row.classList.contains('dt-header-row')) {
-			const item = row._ref?.item, fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.children).indexOf(cell);
+			const item = row._ref?.item, fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll('.dt-cell')).indexOf(cell);
 			if (item && state.fields[fIdx]) container.editCell(item, state.fields[fIdx], cell);
 		}
 	};
@@ -350,6 +350,7 @@ Component.register('DataTable', container => {
 	.dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; }
 	.dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
 	.dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }
+	.dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; }
 	.dt-body-row:hover { background-color: var(--bs-secondary-bg) !important; }
 	.header-cell .header-menu-btn { opacity: 0; transition: opacity 0.2s; }
 	.header-cell:hover .header-menu-btn { opacity: 1; }