@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/ui/table/Table.svelte

@@ -1,396 +1,396 @@
-<script lang="ts">
-	import { Checkbox, Dropdown, DropdownItem, type TableProps } from '../../index.js';
-	import { clickOutsideAction } from '../../utils/svelte-legos.js';
-	import { createTable, Render, Subscribe } from 'svelte-headless-table';
-	import {
-		addColumnOrder,
-		addHiddenColumns,
-		addResizedColumns,
-		addSelectedRows,
-		addSortBy
-	} from 'svelte-headless-table/plugins';
-	import { writable } from 'svelte/store';
-
-	let {
-		data = [],
-		headerColor = 'white',
-		height = 780,
-		bgWhite = false,
-		headerTextColor = 'black',
-		tableColumns = [],
-		showActions = false,
-		showCheckBox = false,
-		showViewDetails = true,
-		showEdit = false,
-		showMiniWidth = false,
-		rowClickable = false,
-		hideWhiteSpace = true,
-		hiddenColumns = $bindable([]),
-		sortedColumns = $bindable([]),
-		initialSortKeys = [],
-		actionLists = [],
-		showIndex = false,
-		selectedRows = $bindable([]),
-		selectAllChecked = $bindable(false),
-		showDelete = false,
-		handleCheckbox,
-		onActionClicked,
-		onDelete,
-		onEdit,
-		onView,
-		onRowClicked,
-		showTableBottomPadding = true,
-		tableBottomContent
-	}: TableProps = $props();
-
-	let dropdown = $state(-1);
-	let openDropDown = $state(false);
-	let tableData = writable(data);
-
-	$effect(() => {
-		tableData.set(data);
-	});
-
-	const table = createTable(tableData, {
-		sort: addSortBy({
-			disableMultiSort: false,
-			serverSide: true,
-			initialSortKeys: initialSortKeys
-		}),
-		colOrder: addColumnOrder(),
-		select: addSelectedRows(),
-		hideCols: addHiddenColumns({
-			initialHiddenColumnIds: hiddenColumns
-		}),
-		resize: addResizedColumns()
-	});
-	const columns = tableColumns.map((x: any) => table.column({ ...x }));
-	const { headerRows, flatColumns, rows, tableAttrs, tableBodyAttrs, pluginStates, pageRows } =
-		table.createViewModel(columns);
-	// $allColumns = flatColumns;
-	const { hiddenColumnIds } = pluginStates.hideCols;
-
-	$effect(() => hiddenColumnIds.set(hiddenColumns));
-
-	const { sortKeys } = pluginStates.sort;
-	$effect(() => {
-		sortedColumns = $sortKeys;
-	});
-
-	function handleRowCheckboxChange(checked: boolean, row: any) {
-		let updatedSelectedRows;
-
-		if (checked) {
-			updatedSelectedRows = [...selectedRows, row];
-		} else {
-			updatedSelectedRows = selectedRows.filter((item) => item !== row);
-		}
-
-		selectedRows = updatedSelectedRows;
-		if (handleCheckbox) handleCheckbox(updatedSelectedRows);
-	}
-
-	const handleSelectAllChange = () => {
-		if (selectAllChecked) {
-			selectedRows = [];
-			if (handleCheckbox) handleCheckbox([]);
-		} else {
-			const allRows = data.map((x) => x);
-			selectedRows = allRows;
-			if (handleCheckbox) handleCheckbox(allRows);
-		}
-		selectAllChecked = !selectAllChecked;
-	};
-
-	function toggleSubmenu(index: any) {
-		dropdown = dropdown === index ? -1 : index;
-	}
-
-	function closeDropDown() {
-		openDropDown = false;
-		dropdown = -1;
-	}
-	function getRow(row: any) {
-		const { original } = row;
-		return original;
-	}
-</script>
-
-<div class="h-full w-full flex-auto">
-	<div class="grid grid-cols-1 gap-2">
-		<div
-			class=" scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch h-full w-full max-h-[{height}px] overflow-x-auto"
-			style="max-height: {height}px; min-height: {showMiniWidth && '250px'};"
-		>
-			<table {...$tableAttrs} class="mb-6 w-full pb-6">
-				<thead
-					class=" sticky top-0"
-					class:bg-[#92cbdf]={headerColor === 'sky'}
-					class:bg-green-300={headerColor === 'green'}
-					class:bg-[#CF9B14]={headerColor === 'orange'}
-					class:bg-[#cbc3fa]={headerColor === 'purple'}
-					class:bg-blue-300={headerColor === 'blue'}
-					class:bg-red-300={headerColor === 'red'}
-					class:bg-pink-300={headerColor === 'pink'}
-					class:bg-white={headerColor === 'white'}
-					class:text-gray-700={headerTextColor === 'gray'}
-					class:text-white={headerTextColor === 'white'}
-					class:text-black={headerTextColor === 'black'}
-					class:border-b-2={headerColor === 'white'}
-				>
-					{#each $headerRows as headerRow (headerRow.id)}
-						<Subscribe rowAttrs={headerRow.attrs()}>
-							{#snippet children({ rowAttrs })}
-								<tr {...rowAttrs}>
-									{#if showCheckBox}
-										<th
-											class="px-6 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
-										>
-											<Checkbox
-												class="h-5 w-5 cursor-pointer"
-												checked={selectAllChecked}
-												onchange={handleSelectAllChange}
-											/>
-										</th>
-									{/if}
-									{#if showActions}
-										<th
-											class="px-4 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
-											>Actions</th
-										>
-									{/if}
-									{#if showIndex}
-										<th
-											class="px-6 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
-											>#</th
-										>
-									{/if}
-									{#each headerRow.cells as cell (cell.id)}
-										<Subscribe attrs={cell.attrs()} props={cell.props()}>
-											{#snippet children({ attrs, props })}
-												<!-- use:props.resize : apply to th -->
-												<th
-													{...attrs}
-													onclick={props.sort.toggle}
-													class="relative cursor-pointer px-6 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
-												>
-													<div class="flex items-center gap-1">
-														<Render of={cell.render()} />
-														{#if props.sort?.order === 'asc'}
-															<iconify-icon icon="ph:caret-up" class="text-gray-500"></iconify-icon>
-														{:else if props.sort?.order === 'desc'}
-															<iconify-icon icon="ph:caret-down" class="text-gray-500"
-															></iconify-icon>
-														{:else if props.sort?.disabled == false}
-															<iconify-icon icon="ph:caret-up-down" class="text-gray-500"
-															></iconify-icon>
-														{/if}
-														<!-- {#if !props.resize.disabled}
-															<div class="resizer" use:props.resize.drag />
-														{/if} -->
-													</div>
-												</th>
-											{/snippet}
-										</Subscribe>
-									{/each}
-								</tr>
-							{/snippet}
-						</Subscribe>
-					{/each}
-				</thead>
-				<tbody
-					{...$tableBodyAttrs}
-					class="divide-y divide-gray-300"
-					class:bg-white={bgWhite}
-					use:clickOutsideAction
-					onclickoutside={closeDropDown}
-				>
-					{#each $pageRows as row, index (row.id)}
-						<Subscribe rowAttrs={row.attrs()}>
-							{#snippet children({ rowAttrs })}
-								<tr
-									{...rowAttrs}
-									class:bg-slate-100={index % 2 !== 0}
-									class:cursor-pointer={rowClickable}
-									class:hover:bg-gray-100={rowClickable}
-									class="dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
-									onclick={(e) => {
-										if (rowClickable) {
-											const target = e.target as HTMLElement | null;
-											if (
-												target &&
-												(target.localName === 'iconify-icon' ||
-													target.localName === 'button' ||
-													target.localName === 'input' ||
-													target.localName === 'checkbox')
-											) {
-												return;
-											}
-											onRowClicked && onRowClicked(getRow(row));
-											closeDropDown();
-										}
-									}}
-								>
-									{#if showCheckBox}
-										<td class="px-6 py-2">
-											<Checkbox
-												class="h-5 w-5 cursor-pointer"
-												onchange={(e) => {
-													const checked = e?.target?.checked;
-													handleRowCheckboxChange(checked, getRow(row));
-													e.stopPropagation();
-												}}
-												checked={selectedRows.find((x) => x.id === getRow(row).id) ?? false}
-											/>
-										</td>
-									{/if}
-									{#if showActions}
-										<td class="px-5 py-2">
-											<!-- svelte-ignore a11y_consider_explicit_label -->
-											<button
-												class="dropdown-{row.id} grid h-7 w-7 place-content-center rounded-[5px] border border-gray-300 bg-gray-200 hover:bg-gray-300 dark:bg-gray-900 dark:hover:bg-gray-700"
-											>
-												<iconify-icon class="dots-menu dark:text-white" icon="tabler:dots-vertical"
-												></iconify-icon>
-											</button>
-											<!-- {#if dropdown === index && openDropDown} -->
-											<Dropdown
-												triggeredBy=".dropdown-{row.id}"
-												placement="right"
-												class="list-none"
-											>
-												{#each actionLists as { name, icon, otherClasses, visible }}
-													{#if visible}
-														{#if visible(getRow(row))}
-															<DropdownItem
-																data-dropdown-id={`dropdown-${row.id}`}
-																class="flex w-full items-center gap-1 px-4 py-2 text-sm whitespace-nowrap hover:bg-gray-100 {otherClasses}"
-																onclick={(e) => {
-																	onActionClicked && onActionClicked({ name, row: getRow(row) });
-																	closeDropDown();
-																	e.stopPropagation();
-																}}
-															>
-																{#if icon}
-																	<iconify-icon {icon} style="font-size: 18px;"></iconify-icon>
-																{/if}
-																{name}
-															</DropdownItem>
-														{/if}
-													{:else}
-														<DropdownItem
-															data-dropdown-id={`dropdown-${row.id}`}
-															class=" flex w-full items-center gap-1 px-4 py-2 text-sm whitespace-nowrap hover:bg-gray-100 {otherClasses}"
-															onclick={(e) => {
-																onActionClicked && onActionClicked({ name, row: getRow(row) });
-																closeDropDown();
-																e.stopPropagation();
-															}}
-														>
-															{#if icon}
-																<iconify-icon {icon} style="font-size: 18px;"></iconify-icon>
-															{/if}
-															{name}
-														</DropdownItem>
-													{/if}
-												{:else}
-													{#if showViewDetails}
-														<DropdownItem
-															data-dropdown-id={`dropdown-${row.id}`}
-															class="flex items-center px-4 py-2 gap-1 hover:bg-gray-100 w-full text-sm"
-															onclick={(e) => {
-																onView && onView(getRow(row));
-																closeDropDown();
-																e.stopPropagation();
-															}}
-														>
-															<iconify-icon icon="ion:eye" style="font-size: 18px;"
-															></iconify-icon>View Details
-														</DropdownItem>
-													{/if}
-
-													{#if showEdit}
-														<DropdownItem
-															data-dropdown-id={`dropdown-${row.id}`}
-															class="flex items-center px-4 py-2 gap-1 hover:bg-gray-100 w-full text-sm"
-															onclick={(e) => {
-																onEdit && onEdit(getRow(row));
-																closeDropDown();
-																e.stopPropagation();
-															}}
-														>
-															<iconify-icon icon="ri:edit-2-fill" style="font-size: 18px;"
-															></iconify-icon>Edit Details
-														</DropdownItem>
-													{/if}
-													{#if showDelete}
-														<DropdownItem
-															data-dropdown-id={`dropdown-${row.id}`}
-															class="flex items-center px-4 py-2 gap-1 text-red-600 hover:bg-red-100 w-full text-sm"
-															onclick={(e) => {
-																onDelete && onDelete(getRow(row));
-																closeDropDown();
-																e.stopPropagation();
-															}}
-														>
-															<iconify-icon icon="mdi:trash" style="font-size: 18px;"
-															></iconify-icon>Delete Details
-														</DropdownItem>
-													{/if}
-												{/each}
-											</Dropdown>
-
-											<!-- {/if} -->
-										</td>
-									{/if}
-									{#if showIndex}
-										<td class="px-6 py-2">
-											{index + 1}
-										</td>
-									{/if}
-									{#each row.cells as cell (cell.id)}
-										<Subscribe attrs={cell.attrs()}>
-											{#snippet children({ attrs })}
-												<td
-													{...attrs}
-													class="px-6 py-2 text-left text-sm rtl:text-right"
-													class:whitespace-nowrap={hideWhiteSpace}
-												>
-													<Render of={cell.render()} />
-												</td>
-											{/snippet}
-										</Subscribe>
-									{/each}
-								</tr>
-							{/snippet}
-						</Subscribe>
-					{/each}
-				</tbody>
-			</table>
-			{#if tableBottomContent}
-				{@render tableBottomContent?.()}
-			{:else if showTableBottomPadding}
-				<div class="h-12"></div>
-			{/if}
-
-			{#if !$pageRows.length}
-				<div class="flex h-72 w-full items-center justify-center">
-					<div class="rounded-md bg-yellow-200 px-6 py-4">No records found</div>
-				</div>
-			{/if}
-		</div>
-	</div>
-</div>
-
-<style>
-	.resizer {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		right: -4px;
-		width: 8px;
-		background: #6194d9;
-		cursor: col-resize;
-		z-index: 1;
-	}
-</style>
+<script lang="ts">
+	import { Checkbox, Dropdown, DropdownItem, type TableProps } from '../../index.js';
+	import { clickOutsideAction } from '../../utils/svelte-legos.js';
+	import { createTable, Render, Subscribe } from 'svelte-headless-table';
+	import {
+		addColumnOrder,
+		addHiddenColumns,
+		addResizedColumns,
+		addSelectedRows,
+		addSortBy
+	} from 'svelte-headless-table/plugins';
+	import { writable } from 'svelte/store';
+
+	let {
+		data = [],
+		headerColor = 'white',
+		height = 780,
+		bgWhite = false,
+		headerTextColor = 'black',
+		tableColumns = [],
+		showActions = false,
+		showCheckBox = false,
+		showViewDetails = true,
+		showEdit = false,
+		showMiniWidth = false,
+		rowClickable = false,
+		hideWhiteSpace = true,
+		hiddenColumns = $bindable([]),
+		sortedColumns = $bindable([]),
+		initialSortKeys = [],
+		actionLists = [],
+		showIndex = false,
+		selectedRows = $bindable([]),
+		selectAllChecked = $bindable(false),
+		showDelete = false,
+		handleCheckbox,
+		onActionClicked,
+		onDelete,
+		onEdit,
+		onView,
+		onRowClicked,
+		showTableBottomPadding = true,
+		tableBottomContent
+	}: TableProps = $props();
+
+	let dropdown = $state(-1);
+	let openDropDown = $state(false);
+	let tableData = writable(data);
+
+	$effect(() => {
+		tableData.set(data);
+	});
+
+	const table = createTable(tableData, {
+		sort: addSortBy({
+			disableMultiSort: false,
+			serverSide: true,
+			initialSortKeys: initialSortKeys
+		}),
+		colOrder: addColumnOrder(),
+		select: addSelectedRows(),
+		hideCols: addHiddenColumns({
+			initialHiddenColumnIds: hiddenColumns
+		}),
+		resize: addResizedColumns()
+	});
+	const columns = tableColumns.map((x: any) => table.column({ ...x }));
+	const { headerRows, flatColumns, rows, tableAttrs, tableBodyAttrs, pluginStates, pageRows } =
+		table.createViewModel(columns);
+	// $allColumns = flatColumns;
+	const { hiddenColumnIds } = pluginStates.hideCols;
+
+	$effect(() => hiddenColumnIds.set(hiddenColumns));
+
+	const { sortKeys } = pluginStates.sort;
+	$effect(() => {
+		sortedColumns = $sortKeys;
+	});
+
+	function handleRowCheckboxChange(checked: boolean, row: any) {
+		let updatedSelectedRows;
+
+		if (checked) {
+			updatedSelectedRows = [...selectedRows, row];
+		} else {
+			updatedSelectedRows = selectedRows.filter((item) => item !== row);
+		}
+
+		selectedRows = updatedSelectedRows;
+		if (handleCheckbox) handleCheckbox(updatedSelectedRows);
+	}
+
+	const handleSelectAllChange = () => {
+		if (selectAllChecked) {
+			selectedRows = [];
+			if (handleCheckbox) handleCheckbox([]);
+		} else {
+			const allRows = data.map((x) => x);
+			selectedRows = allRows;
+			if (handleCheckbox) handleCheckbox(allRows);
+		}
+		selectAllChecked = !selectAllChecked;
+	};
+
+	function toggleSubmenu(index: any) {
+		dropdown = dropdown === index ? -1 : index;
+	}
+
+	function closeDropDown() {
+		openDropDown = false;
+		dropdown = -1;
+	}
+	function getRow(row: any) {
+		const { original } = row;
+		return original;
+	}
+</script>
+
+<div class="h-full w-full flex-auto">
+	<div class="grid grid-cols-1 gap-2">
+		<div
+			class=" scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch h-full w-full max-h-[{height}px] overflow-x-auto"
+			style="max-height: {height}px; min-height: {showMiniWidth && '250px'};"
+		>
+			<table {...$tableAttrs} class="mb-6 w-full pb-6">
+				<thead
+					class=" sticky top-0"
+					class:bg-[#92cbdf]={headerColor === 'sky'}
+					class:bg-green-300={headerColor === 'green'}
+					class:bg-[#CF9B14]={headerColor === 'orange'}
+					class:bg-[#cbc3fa]={headerColor === 'purple'}
+					class:bg-blue-300={headerColor === 'blue'}
+					class:bg-red-300={headerColor === 'red'}
+					class:bg-pink-300={headerColor === 'pink'}
+					class:bg-white={headerColor === 'white'}
+					class:text-gray-700={headerTextColor === 'gray'}
+					class:text-white={headerTextColor === 'white'}
+					class:text-black={headerTextColor === 'black'}
+					class:border-b-2={headerColor === 'white'}
+				>
+					{#each $headerRows as headerRow (headerRow.id)}
+						<Subscribe rowAttrs={headerRow.attrs()}>
+							{#snippet children({ rowAttrs })}
+								<tr {...rowAttrs}>
+									{#if showCheckBox}
+										<th
+											class="px-6 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
+										>
+											<Checkbox
+												class="h-5 w-5 cursor-pointer"
+												checked={selectAllChecked}
+												onchange={handleSelectAllChange}
+											/>
+										</th>
+									{/if}
+									{#if showActions}
+										<th
+											class="px-4 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
+											>Actions</th
+										>
+									{/if}
+									{#if showIndex}
+										<th
+											class="px-6 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
+											>#</th
+										>
+									{/if}
+									{#each headerRow.cells as cell (cell.id)}
+										<Subscribe attrs={cell.attrs()} props={cell.props()}>
+											{#snippet children({ attrs, props })}
+												<!-- use:props.resize : apply to th -->
+												<th
+													{...attrs}
+													onclick={props.sort.toggle}
+													class="relative cursor-pointer px-6 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
+												>
+													<div class="flex items-center gap-1">
+														<Render of={cell.render()} />
+														{#if props.sort?.order === 'asc'}
+															<iconify-icon icon="ph:caret-up" class="text-gray-500"></iconify-icon>
+														{:else if props.sort?.order === 'desc'}
+															<iconify-icon icon="ph:caret-down" class="text-gray-500"
+															></iconify-icon>
+														{:else if props.sort?.disabled == false}
+															<iconify-icon icon="ph:caret-up-down" class="text-gray-500"
+															></iconify-icon>
+														{/if}
+														<!-- {#if !props.resize.disabled}
+															<div class="resizer" use:props.resize.drag />
+														{/if} -->
+													</div>
+												</th>
+											{/snippet}
+										</Subscribe>
+									{/each}
+								</tr>
+							{/snippet}
+						</Subscribe>
+					{/each}
+				</thead>
+				<tbody
+					{...$tableBodyAttrs}
+					class="divide-y divide-gray-300"
+					class:bg-white={bgWhite}
+					use:clickOutsideAction
+					onclickoutside={closeDropDown}
+				>
+					{#each $pageRows as row, index (row.id)}
+						<Subscribe rowAttrs={row.attrs()}>
+							{#snippet children({ rowAttrs })}
+								<tr
+									{...rowAttrs}
+									class:bg-slate-100={index % 2 !== 0}
+									class:cursor-pointer={rowClickable}
+									class:hover:bg-gray-100={rowClickable}
+									class="dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
+									onclick={(e) => {
+										if (rowClickable) {
+											const target = e.target as HTMLElement | null;
+											if (
+												target &&
+												(target.localName === 'iconify-icon' ||
+													target.localName === 'button' ||
+													target.localName === 'input' ||
+													target.localName === 'checkbox')
+											) {
+												return;
+											}
+											onRowClicked && onRowClicked(getRow(row));
+											closeDropDown();
+										}
+									}}
+								>
+									{#if showCheckBox}
+										<td class="px-6 py-2">
+											<Checkbox
+												class="h-5 w-5 cursor-pointer"
+												onchange={(e) => {
+													const checked = e?.target?.checked;
+													handleRowCheckboxChange(checked, getRow(row));
+													e.stopPropagation();
+												}}
+												checked={selectedRows.find((x) => x.id === getRow(row).id) ?? false}
+											/>
+										</td>
+									{/if}
+									{#if showActions}
+										<td class="px-5 py-2">
+											<!-- svelte-ignore a11y_consider_explicit_label -->
+											<button
+												class="dropdown-{row.id} grid h-7 w-7 place-content-center rounded-[5px] border border-gray-300 bg-gray-200 hover:bg-gray-300 dark:bg-gray-900 dark:hover:bg-gray-700"
+											>
+												<iconify-icon class="dots-menu dark:text-white" icon="tabler:dots-vertical"
+												></iconify-icon>
+											</button>
+											<!-- {#if dropdown === index && openDropDown} -->
+											<Dropdown
+												triggeredBy=".dropdown-{row.id}"
+												placement="right"
+												class="list-none"
+											>
+												{#each actionLists as { name, icon, otherClasses, visible }}
+													{#if visible}
+														{#if visible(getRow(row))}
+															<DropdownItem
+																data-dropdown-id={`dropdown-${row.id}`}
+																class="flex w-full items-center gap-1 px-4 py-2 text-sm whitespace-nowrap hover:bg-gray-100 {otherClasses}"
+																onclick={(e) => {
+																	onActionClicked && onActionClicked({ name, row: getRow(row) });
+																	closeDropDown();
+																	e.stopPropagation();
+																}}
+															>
+																{#if icon}
+																	<iconify-icon {icon} style="font-size: 18px;"></iconify-icon>
+																{/if}
+																{name}
+															</DropdownItem>
+														{/if}
+													{:else}
+														<DropdownItem
+															data-dropdown-id={`dropdown-${row.id}`}
+															class=" flex w-full items-center gap-1 px-4 py-2 text-sm whitespace-nowrap hover:bg-gray-100 {otherClasses}"
+															onclick={(e) => {
+																onActionClicked && onActionClicked({ name, row: getRow(row) });
+																closeDropDown();
+																e.stopPropagation();
+															}}
+														>
+															{#if icon}
+																<iconify-icon {icon} style="font-size: 18px;"></iconify-icon>
+															{/if}
+															{name}
+														</DropdownItem>
+													{/if}
+												{:else}
+													{#if showViewDetails}
+														<DropdownItem
+															data-dropdown-id={`dropdown-${row.id}`}
+															class="flex items-center px-4 py-2 gap-1 hover:bg-gray-100 w-full text-sm"
+															onclick={(e) => {
+																onView && onView(getRow(row));
+																closeDropDown();
+																e.stopPropagation();
+															}}
+														>
+															<iconify-icon icon="ion:eye" style="font-size: 18px;"
+															></iconify-icon>View Details
+														</DropdownItem>
+													{/if}
+
+													{#if showEdit}
+														<DropdownItem
+															data-dropdown-id={`dropdown-${row.id}`}
+															class="flex items-center px-4 py-2 gap-1 hover:bg-gray-100 w-full text-sm"
+															onclick={(e) => {
+																onEdit && onEdit(getRow(row));
+																closeDropDown();
+																e.stopPropagation();
+															}}
+														>
+															<iconify-icon icon="ri:edit-2-fill" style="font-size: 18px;"
+															></iconify-icon>Edit Details
+														</DropdownItem>
+													{/if}
+													{#if showDelete}
+														<DropdownItem
+															data-dropdown-id={`dropdown-${row.id}`}
+															class="flex items-center px-4 py-2 gap-1 text-red-600 hover:bg-red-100 w-full text-sm"
+															onclick={(e) => {
+																onDelete && onDelete(getRow(row));
+																closeDropDown();
+																e.stopPropagation();
+															}}
+														>
+															<iconify-icon icon="mdi:trash" style="font-size: 18px;"
+															></iconify-icon>Delete Details
+														</DropdownItem>
+													{/if}
+												{/each}
+											</Dropdown>
+
+											<!-- {/if} -->
+										</td>
+									{/if}
+									{#if showIndex}
+										<td class="px-6 py-2">
+											{index + 1}
+										</td>
+									{/if}
+									{#each row.cells as cell (cell.id)}
+										<Subscribe attrs={cell.attrs()}>
+											{#snippet children({ attrs })}
+												<td
+													{...attrs}
+													class="px-6 py-2 text-left text-sm rtl:text-right"
+													class:whitespace-nowrap={hideWhiteSpace}
+												>
+													<Render of={cell.render()} />
+												</td>
+											{/snippet}
+										</Subscribe>
+									{/each}
+								</tr>
+							{/snippet}
+						</Subscribe>
+					{/each}
+				</tbody>
+			</table>
+			{#if tableBottomContent}
+				{@render tableBottomContent?.()}
+			{:else if showTableBottomPadding}
+				<div class="h-12"></div>
+			{/if}
+
+			{#if !$pageRows.length}
+				<div class="flex h-72 w-full items-center justify-center">
+					<div class="rounded-md bg-yellow-200 px-6 py-4">No records found</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.resizer {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: -4px;
+		width: 8px;
+		background: #6194d9;
+		cursor: col-resize;
+		z-index: 1;
+	}
+</style>