Untitled

{#if $getEventAllowlistedAttendeesStore.response?.data?.attendees}
				<DataTable
					items={$getEventAllowlistedAttendeesStore.response.data.attendees}
					{headers}
					selectAll={false}
				>
					<div let:item slot="slot-1" class="my-3 flex min-w-40 items-center gap-2">
						<img
							aria-hidden="true"
							src={blockiesAvatar(item.user.walletAddress)}
							alt="Profile image"
							class="h-6 w-6 rounded-full"
						/>
						<h1 class="text-sm font-semibold">{item.user.name}</h1>
					</div>
					<div let:item slot="slot-2">
						<h1 class="text-sm font-semibold">{item.user.email}</h1>
					</div>
					<div let:item slot="slot-3" class="w-fit min-w-52 max-w-[216px]">
						<h1 class="flex items-center gap-1 text-sm font-medium underline">
							{shortenString(item.user.walletAddress, 10, 11)}
							<img src="/icons/copy-outline.svg" alt="Copy icon" class="h-auto w-5" />
						</h1>
					</div>
					<div slot="slot-4" class="flex w-full min-w-6 justify-center">
						<Button
							class="shrink-0 bg-transparent p-0 !ring-0"
							on:click={() => {
								removeAttendeeConfirmationDialog = true
							}}
						>
							<img src="/icons/close-circle.svg" alt="Close circle icon" class="h-5 w-5" />
						</Button>
					</div>
				</DataTable>
				<Pagination />
			{/if}