Select Cells On A Table By Dragging with svelte

Question

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

Answer 1

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>

Demo REPL