[SalesForce] Need to delete row from lightning datatable in lwc

On the assumption I've understood your question correctly, we have done this as follows:

1. Extend the data table to support a custom cell data type:

import LightningDatatable from 'lightning/datatable';
import matchCell from './exampleMatchCell.html';

/**
 * Extends the lightning-datatable component to add a custom matchScore cell type.
 * This custom cell uses a lightning-accordion to show a single collapsible section with an icon.
 */
export default class ExampleResultsTable extends LightningDatatable {
    static customTypes = {
        matchScore: {
            template: matchCell
        }
    }
}

2. Provide the custom cell rendering (exampleMatchCell.html):

<template>
    <lightning-accordion allow-multiple-sections-open>
        <lightning-accordion-section name="breakdown" label={value.percentage}>
            <lightning-icon slot="actions" icon-name={value.icon} variant={value.iconVariant}></lightning-icon>
            <template for:each={value.notes} for:item="note">
                <p class="slds-truncate" title={note.value} key={note.key}>{note.value}</p>
            </template>
        </lightning-accordion-section>
    </lightning-accordion>
</template>

3. Use this custom component in the parent rendering instead of the standard data table:

        ...
        <c-example-results-table
                key-field="Id"
                data={_results}
                columns={_columns}
                onrowaction={handleRowActions}
                hide-checkbox-column>
        </c-example-results-table>

4. Have the parent define the columns including the custom type:

            ...
            this._columns.push({
                fieldName: 'score',
                label: this.Label.ColumnMatch,
                type: 'matchScore',
                initialWidth: 250,
                fixedWidth: undefined,
                typeAttributes: {}
            });
            ...

For us, our datatable gets rendered like the following example, where the "Match" column is the one containing an accordion:

The row height adjusts depending on whether the accordion is open or closed, as illustrated.

You will find documentation about handling columns with "custom data types" under "Creating Custom Data Types".

You need to keep a separate list of all selections in one variable, then update this variable accordingly as you navigate pages (and also keep track of any changes).

allSelectedRows = [];
preselectedRows = [];
changePage(pageNumber) {
    let pageData = this.getPageData();
    this.allSelectedRows = this.allSelectedRows
        .filter((rowId) => !pageData.find((record) => record.UserId === rowId)) // Preserve rows outside current page
        .concat(this.template.querySelector('lightning-datatable').selectedRows); // and add rows from current page
    this.page = pageNumber;
    pageData = this.getPageData();
    this.preslectedRows = this.allSelectedRows.filter(
        (rowId) => pageData.find((record) => record.UserId === rowId) // And now find records in current page
    );
}
onFirst() {
    this.changePage(1);
}
onNext() {
    this.changePage(this.page + 1);
}
// ... etc ...

Also, some general notes...

First, don't use await and then() together:

try {
// other code here
  let userList = await getUserList();
  // rest of code here
} catch(error) {
  this.error = error;
}
this.showLoadingSpinner = false;

Or:

getUserList().then(
  userList => {
    // success logic here
  })
  .catch(error => this.error = error)
  .finally(() => this.showLoadingSpinner = false);

Second, you really didn't need to JSON.serialize and JSON.parse, you can return the wrappers directly.