phishingclub/frontend/src/lib/components/table/TableHeader.svelte

<script>
	import { onMount } from 'svelte';
	import TableHead from './TableHead.svelte';
	import TableHeadCell from './TableHeadCell.svelte';
	import TableHeadCellAction from './TableHeadCellAction.svelte';
	import TableHeadCellEmpty from './TableHeadCellEmpty.svelte';
	import TableRow from './TableRow.svelte';
	import TableRowEmpty from './TableRowEmpty.svelte';
	import TableHeadCellCheckbox from './TableHeadCellCheckbox.svelte';
	import GhostText from '../GhostText.svelte';

	export let columns = [];
	export let sortable = [];
	export let isGhost = false;
	export let hasActions = true;
	/** @type {*|null} */
	export let pagination = null;
	export let selectable = false;
	/** @type {'none'|'some'|'all'} */
	export let headerState = 'none';
	// the checkbox column keeps its width whenever selectable is set; showSelect
	// controls whether the select all control is actually shown, so an empty or
	// loading table reserves the gutter without a dangling control
	export let showSelect = false;

	$: sortableMap = {};

	onMount(() => {
		sortable.forEach((column) => {
			sortableMap[column.toLowerCase()] = true;
		});
	});
</script>

<TableHead>
	<TableRow>
		{#if selectable}
			<TableHeadCellCheckbox state={headerState} disabled={isGhost || !showSelect} on:toggleAll />
		{/if}
		{#each columns as column, i (typeof column === 'object' ? column.column : column)}
			{#if typeof column === 'object'}
				<TableHeadCell
					{...column}
					{...columns.length === 1 ? { size: '' } : {}}
					{pagination}
					{isGhost}
					sortable={sortableMap[column.column.toLowerCase()]}
					last={i === columns.length - 1}
				/>
			{:else}
				<TableHeadCell
					{column}
					{pagination}
					sortable={sortableMap[column.toLowerCase()]}
					last={i === columns.length - 1}
				/>
			{/if}
		{/each}
		{#if hasActions}
			<TableHeadCellEmpty />
			<TableHeadCellAction>
				{#if !isGhost}
					Actions
				{:else}
					<GhostText center />
				{/if}
			</TableHeadCellAction>
		{/if}
	</TableRow>
	<TableRowEmpty />
</TableHead>