I have the following js in my electron app to resize table columns:
const resizerMouseDown = (e) => {
let th = e.target.parentNode
let startOffset = th.offsetWidth - e.x
window.addEventListener('mousemove', function (e) {
if (th) {
th.style.width = startOffset + e.x + 'px'
}
})
window.addEventListener('mouseup', function () {
th = undefined
})
}
Example Table: (Arrays from json files populate the table contents)
<table>
<thead>
<tr>
<th>
<div>Column 1</div>
<button on:mousedown={resizerMouseDown} class="resizer"></button>
</th>
<th>
<div>Column 2</div>
<button on:mousedown={resizerMouseDown} class="resizer"></button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
When the table rows are more that 100, resizing the columns are very slow. I’m not even going to mention when the json files are huge (1000+ table rows).
Any suggestions to get better performance out of the code, or would this be a limitation of electron?