svelte-table row select/de-select from Javascript

Question

I am trying to implement row selection functionalty to svelte component I am developing. I am creating component using svelte-table component where I list items from database and the component should allow selection of only two items and remove first row when third is added. Row id's are then recorded in svelte store and passed to an other component. This all works in program level, that is not a problem. The problem is to highlight correct rows in the table so that user is on map which rows are selected. I can get the highlighting working using classNameRowSelected property on svelte-table but the problem is removing the highlighting from the first selected row when that third row is selected. I seem to fail find any example or reference how to do this from Javasctipt...

Here is my SvelteTable element:

<SvelteTable 
    columns="{COLUMNS}"
    rows="{rows}"
    rowKey="key"
    selectOnClick="{true}"
    on:clickRow="{rowSelected}" 
    classNameTable={['table table-striped']}
    classNameThead={['table-primary']}
    classNameRowSelected="row-selected"
/>
<style>
    :global(.row-selected) {
        background-color: #f8c;
     }
</style>

and the rowSelected function then row is clicked:

function rowSelected(event)
    {
        let found = false;
        compare_tests.forEach((test,index, compare_tests) => {
            console.log(test);
            if (test == event.detail.row.key)
            {
                found = true;
                event.detail.row.selected = false;
                compare_tests[index] = "";
            }
        });
        if (!found)
        {
            compare_tests.shift();
            compare_tests.push(event.detail.row.key);
            event.detail.row.selected = true;
            found = false;
        }
        $testids = compare_tests;
    }

Ideally there is some function/property on "row" parameter that I can use to de-select the row based on row.key before I shift it away from the array. I am relatively new to JavaScript and Svelte so any help where to find information on how to accomplish this would be appreciated.

Answer 1

By using selected (‡ optional array of key values of selected rows) instead of selectOnClick this would be a way >> REPL

<script>
    import SvelteTable from "svelte-table";
    import {rows, columns} from './data'

    let selectedRowIds = []

    function handleRowClick(event) {
        const rowId = event.detail.row.id
        if(selectedRowIds.includes(rowId)) {
            selectedRowIds = selectedRowIds.filter(id => id !== rowId)
        } else {
            selectedRowIds = [rowId, ...selectedRowIds].slice(0,2)
        }
    }
    
</script>

<SvelteTable columns="{columns}"
                         rows="{rows}"
                         rowKey="id"
                         on:clickRow={handleRowClick} 
                         selected={selectedRowIds}
                         classNameRowSelected="row-selected"
                         >
</SvelteTable>

<style>
    :global(.row-selected) {
        background-color: #f8c;
    }
</style>