I have been trying for 2 days now to integrate a table into svelte where I can select with mouseDown and dragging.
I´m new in js and svelte and did a few courses.
But at this moment is not possible for me to get this working.
Thats what i try to build in svelte: TableSelect
Hope anyone can help me.
Many thanx, Chris
It turned out slightly more complicated than suggested in my comment.
The idea is to listen to mousedown and mouseup events on the entire window (through <svelte:window>) to toggle an isDrag state on/off, listen to mouseenter events on table cells, then toggle the cells on/off only if isDrag is on.
Additionally, you will have to listen to the mousedown event on cells as well, in case the dragging is started inside a cell.
The on/off state of a single cell can be shown visually with a class:selected attribute.
<script>
let columns = new Array(5) // number of columns
let rows = new Array(3) // number of rows
let state = new Array(rows.length*columns.length).fill(false)
let isDrag = false
const beginDrag = () => {
isDrag = true
}
const endDrag = () => {
isDrag = false
}
const toggle = (r, c) => {
state[r*columns.length+c] = !state[r*columns.length+c]
}
const mouseHandler = (r, c) => (e) => {
if (isDrag || e.type === 'mousedown') {
toggle(r, c)
}
}
</script>
<style>
td {
width: 80px;
height: 80px;
background-color: pink;
}
.selected {
background-color: blue;
}
</style>
<svelte:window on:mousedown={beginDrag} on:mouseup={endDrag} />
<table>
{#each rows as _row, r}
<tr>
{#each columns as _column, c}
<td on:mousedown={mouseHandler(r, c)} on:mouseenter={mouseHandler(r, c)} class:selected="{state[r*columns.length+c]}"></td>
{/each}
</tr>
{/each}
</table>