Creating Table Checkboxes for Selecting Entire Rows in SvelteKit Project

[dalgeom]

In my SvelteKit project, I want to create a table where the first column contains a checkbox for selecting all rows (header), and each individual row has its own checkbox. When I select the checkbox in the header, I want all rows to be selected, and when I select the checkboxes in individual rows, only those specific rows should be selected. I'm unsure how to write the code for this. Please assist.

const defaultColumns: ColumnDef<involvedSawon>[] = [
	{
		accessorKey: 'selected', // Can be changed to any arbitrary column identifier
		id: 'selected',
		header: ({ table }) =>
			renderComponent(CheckBox, {
				checked: table.getIsAllRowsSelected(),
				onChange: table.getToggleAllRowsSelectedHandler()
			}),
		cell: ({ row }) =>
			renderComponent(CheckBox, {
				checked: row.getIsSelected(),
				onChange: row.getToggleSelectedHandler()
			})
	},

---------------------------CheckBox.svelte------------------------

<script lang="ts">
	import { createEventDispatcher } from 'svelte';

	export let checked: boolean;
	export let onChange: (isChecked: boolean) => void;

	const dispatch = createEventDispatcher();

	function check(event: any) {
		const updatedChecked = event.target.checked;
		checked = updatedChecked; // Reflect updated check state
		dispatch('checked', updatedChecked); // Dispatch the event
		onChange(updatedChecked); // Pass the state to the parent component
	}
</script>

<input type="checkbox" bind:checked on:change={check} />

I aim to use the above code to create table checkboxes that allow selecting entire rows in my SvelteKit project. Please provide guidance.