# Table click and drag to select multiple rows?

**URL:** <https://forum.inductiveautomation.com/t/table-click-and-drag-to-select-multiple-rows/78653>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 1, 2023, 5:47am UTC](https://forum.inductiveautomation.com/t/table-click-and-drag-to-select-multiple-rows/78653 "2023-09-01T05:47:14Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 1, 2023, 8:20am UTC](https://forum.inductiveautomation.com/t/table-click-and-drag-to-select-multiple-rows/78653/2 "2023-09-01T08:20:24Z")

</div>

its a bit janky, doesnt always seems to catch the start... but its something  
its not drawing a sqaure though, that doesnt really work well with scrollable content

> **Summary**
>
> ```auto
> 	
> code = """<img style='display:none' src='/favicon.ico' onload=\"		
> let start;
> function onmousestart(ev){
> start = ev.target;
> };
> function onmousestop(ev){			
> let stop = ev.target;
> var clickEvent = new MouseEvent('click', {bubbles:true, shiftKey:true});						
> start.dispatchEvent(clickEvent);
> stop.dispatchEvent(clickEvent);
> start=null;
> };		
> const callbackTable = (mutationList, observer) => {		
> document.querySelectorAll('.tr-group.ia_table__rowGroup .content').forEach(e => {					
> e.onmouseup = onmousestop;
> e.onmousedown = onmousestart;										
> });	
> };
> const observerTable = new MutationObserver(callbackTable); 
> const tables = document.querySelectorAll('.ia_tableComponent .t.ia_table > .tb');
> tables.forEach(table => observerTable.observe(table, { attributes: false, childList: true, subtree: true }));	
> document.querySelectorAll('.tr-group.ia_table__rowGroup .content').forEach(e => {					
> e.onmouseup = onmousestop;
> e.onmousedown = onmousestart;													
> });	
> 				
> \"></img>""".replace("\n", "").replace("\t", "")
> return code
> 		
> 
> ```

this adds in a cursor style too, to atleast see something while dragging.

> **Summary**
>
> ```auto
> 	
> code = """<img style='display:none' src='/favicon.ico' onload=\"		
> let start;
> const tables = document.querySelectorAll('.ia_tableComponent .t.ia_table > .tb');
> function onmousestart(ev){
> start = ev.target;
> tables.forEach(table=> table.style.cursor = 'row-resize');
> };
> function onmousestop(ev){			
> let stop = ev.target;
> var clickEvent = new MouseEvent('click', {bubbles:true, shiftKey:true});						
> start.dispatchEvent(clickEvent);
> stop.dispatchEvent(clickEvent);
> start=null;
> tables.forEach(table=> table.style.cursor = 'auto');
> };		
> const callbackTable = (mutationList, observer) => {		
> document.querySelectorAll('.tr-group.ia_table__rowGroup .content').forEach(e => {					
> e.onmouseup = onmousestop;
> e.onmousedown = onmousestart;										
> });	
> };
> const observerTable = new MutationObserver(callbackTable); 
> 		
> tables.forEach(table => observerTable.observe(table, { attributes: false, childList: true, subtree: true }));	
> document.querySelectorAll('.tr-group.ia_table__rowGroup .content').forEach(e => {					
> e.onmouseup = onmousestop;
> e.onmousedown = onmousestart;													
> });	
> 				
> \"></img>""".replace("\n", "").replace("\t", "")
> return code
> 		
> 
> ```

---

_[View the full topic](https://forum.inductiveautomation.com/t/table-click-and-drag-to-select-multiple-rows/78653)._