Cannot remove rows from lit-html rendered table that was decorated using datatables.net

Question

I have lit-html table that is using a template:

export let catalogTemplate=(dataStringifiedDates,sortTableBy,submitsearchEGFNForm,submitsearchForm)=>html`
<div class="tableLarge">
<table id="dashboard" class="no-footer dataTable" role="grid" aria-describedby="dashboard_info">
<thead >
  <tr @click=${sortTableBy}>
    <th ><a id="iApplyId"href="#">IApplyId</a></th>
    <th ><a id="clientName"href="#">Име на клиента</a></th>
    <th ><a id="clientEGFN"href="#">EGFN</a></th>
    <th ><a id="finCenter"href="#">ФЦ</a></th>
    <th ><a id="refferingFinCenter"href="#">Рефериращ</a></th>
    <th ><a id="subjectId"href="#">Subject</a></th>
    <th ><a id="status"href="#">Статус</a></th>
    <th ><a id="statusIncomingDate"href="#">Дата на постъпване</a></th>
    <th ><a id="deadlineDate"href="#">Deadline</a></th>
    <th ><a id="details"href="#">Детайли</a></th>
  </tr>
 </thead>
 <tbody>
 ${repeat(dataStringifiedDates,(request)=>request._id,(request)=>html`<tr>
     <td>${request.iApplyId}</td>
     <td>${request.clientName}</td>
     <td>${request.clientEGFN}</td>
     <td>${request.finCenter}</td>
     <td>${request.refferingFinCenter}</td>
     <td>${request.subjectId.subjectName}</td>
     <td>${request.status.statusName}</td>
     <td>${request.statusIncomingDate}</td>
     <td>${request.deadlineDate}</td>
     <td><a href="/dashboard/${request._id}">Покажи</a></td>
</tr>`)}
</tbody>
</table>
</div>`

This template is used in two of the views in my single page application:

export async function showCatalog(ctx){
  outerCtx=ctx
  setDashBoardContext({path:'/data/catalog'})
  let dashboardContext=getDashBoardContext()
    try{
        let data=await get(getDashBoardContext().path);
        let dataStringifiedDates=stringifyDates(data);
        ctx.renderView(catalogTemplate(dataStringifiedDates,sortTableBy,submitsearchEGFNForm,submitsearchForm));
        $(document).ready(function() {
          $('#dashboard').DataTable();
      } );
    }catch(error){
        errorHandler(error);
    }

}

export async function showDefauaultReport(ctx){

  setDashBoardContext({path:'/reportsController'})
  let dashboardContext=getDashBoardContext()
    try{
        let data=await get(dashboardContext.path);
        let dataStringifiedDates=stringifyDates(data);
        ctx.renderView(catalogTemplate(dataStringifiedDates,sortTableBy,submitsearchEGFNForm,submitsearchForm));
        
        $(document).ready(function() {
            $('#dashboard').DataTable();
        } );
    }catch(error){
        errorHandler(error);
    }

}

When I call the functions one after another the table rows that stay from the previous function call are not removed. Instead the new rows (retrieved from the present function) are added. This happens only when I decorate the table using DataTable() from datatables.net. Otherwise the table works normally. Additionally - if I go throw a different view between calling the above stated functions-the table data is populated normally.

I tried $('#dashboard').DataTable().destroy() prior rendering the template but this doesn't help.

What is the reason lit-html to refuse to remove the old table rows when the table is decorated with DataTable() from datatables.net and how to fix it?

Answer 1

I found a work around solution - every time I render the catalog template, before I doing it, I render an empty template that removes the table. This way lit renders the table correctly.

However, I would really like to understand why this issue occurs and how to solve it.