<script>
import { onMount } from 'svelte';
let users=[{id:1,name:"Adam",age:30},{id:2,name:"David",age:28}];
const delete_user = (id)=>{
users = users.filter((user) => user.id !== id);
}
onMount(async () => {
setTimeout(()=>{jQuery('#table').bootstrapTable()}, 5000);//delete button works fine before bootstrap-table is enabled
});
</script>
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.20.2/dist/bootstrap-table.min.css">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.20.2/dist/bootstrap-table.min.js"></script>
</svelte:head>
<table class="table table-bordered table-striped m-4" id="table" data-search="true" >
<thead>
<tr><th data-sortable="true" >Name</th>
<th data-sortable="true">Age</th>
<th >Delete</th></tr>
</thead>
<tbody>
{#each users as user}
<tr>
<td>{user.name}</td><td>{user.age}</td>
<td><button on:click={() => delete_user(user.id)} >Delete</button></td>
</tr>