Table

<script lang="ts">
	import {
		Badge,
		Button,
		Menu,
		MenuItem,
		MenuSeparator,
		Table,
		type BadgeVariant,
		type TableColumn,
		type TableKey,
		type TableSort
	} from '@archeblack/ui';
	import { IconDots, IconEdit, IconRocket, IconTrash } from '@archeblack/ui/icons';

	type Status = 'active' | 'degraded' | 'error' | 'deploying' | 'stopped';

	interface Project {
		id: string;
		name: string;
		status: Status;
		region: string;
		requests: number;
		updated: number;
	}

	const statuses: Record<Status, { label: string; variant: BadgeVariant }> = {
		active: { label: 'Activo', variant: 'success' },
		degraded: { label: 'Degradado', variant: 'warning' },
		error: { label: 'Error', variant: 'danger' },
		deploying: { label: 'Desplegando', variant: 'info' },
		stopped: { label: 'Detenido', variant: 'neutral' }
	};

	const rows: Project[] = [
		{
			id: 'prj_7f3a92c1',
			name: 'Portal de clientes',
			status: 'active',
			region: 'Sudamérica',
			requests: 184302,
			updated: 2
		},
		{
			id: 'prj_2b91d0e4',
			name: 'API de pagos',
			status: 'degraded',
			region: 'EE. UU. Este',
			requests: 92418,
			updated: 6
		},
		{
			id: 'prj_c40e7a18',
			name: 'Motor de búsqueda',
			status: 'error',
			region: 'Sudamérica',
			requests: 12077,
			updated: 14
		},
		{
			id: 'prj_5d88f3b2',
			name: 'Notificaciones',
			status: 'deploying',
			region: 'EE. UU. Este',
			requests: 45910,
			updated: 1
		},
		{
			id: 'prj_91aa0c67',
			name: 'Panel interno',
			status: 'stopped',
			region: 'Europa',
			requests: 0,
			updated: 4320
		}
	];

	const number = new Intl.NumberFormat('es-AR');
	const ago = (minutes: number) =>
		minutes < 60 ? `hace ${minutes} min` : `hace ${Math.round(minutes / 1440)} días`;

	const columns: TableColumn<Project>[] = [
		{ key: 'name', label: 'Proyecto', sortable: true },
		{ key: 'status', label: 'Estado', format: (row) => statuses[row.status].label },
		{ key: 'region', label: 'Región', sortable: true },
		{
			key: 'requests',
			label: 'Solicitudes (24 h)',
			numeric: true,
			sortable: true,
			format: (row) => number.format(row.requests)
		},
		{ key: 'updated', label: 'Actualizado', sortable: true, format: (row) => ago(row.updated) },
		{ key: 'actions', label: 'Acciones', hideLabel: true, align: 'end', width: '3rem' }
	];

	let sort = $state<TableSort>({ key: 'requests', direction: 'descending' });
	let selected = $state<TableKey[]>(['prj_2b91d0e4']);
</script>

<div style:inline-size="100%">
	<Table
		caption="Proyectos"
		hideCaption
		{columns}
		{rows}
		rowKey="id"
		bind:sort
		sortRows
		selectable
		bind:selected
	>
		{#snippet cell(row, column, text)}
			{#if column.key === 'name'}
				<div>{row.name}</div>
				<div style:font="var(--arche-typography-code)" style:color="var(--arche-color-text-muted)">
					{row.id}
				</div>
			{:else if column.key === 'status'}
				<Badge variant={statuses[row.status].variant} dot={row.status !== 'stopped'}>{text}</Badge>
			{:else if column.key === 'actions'}
				<Menu align="end">
					{#snippet trigger(props)}
						<Button
							{...props}
							variant="ghost"
							size="sm"
							icon={IconDots}
							aria-label="Acciones de {row.name}"
						/>
					{/snippet}
					<MenuItem icon={IconEdit}>Renombrar</MenuItem>
					<MenuItem icon={IconRocket}>Desplegar ahora</MenuItem>
					<MenuSeparator />
					<MenuItem icon={IconTrash} variant="danger">Eliminar</MenuItem>
				</Menu>
			{:else}
				{text}
			{/if}
		{/snippet}
	</Table>
</div>

<script lang="ts">
	import { Badge, Table, type BadgeVariant, type TableColumn, type TableSort } from '@archeblack/ui';
	import { number, projects, type Project, type ProjectStatus } from './projects.ts';

	// El estado se ordena por gravedad, no por orden alfabético.
	const severity: ProjectStatus[] = ['error', 'degraded', 'deploying', 'active', 'stopped'];
	const statuses: Record<ProjectStatus, { label: string; variant: BadgeVariant }> = {
		error: { label: 'Error', variant: 'danger' },
		degraded: { label: 'Degradado', variant: 'warning' },
		deploying: { label: 'Desplegando', variant: 'info' },
		active: { label: 'Activo', variant: 'success' },
		stopped: { label: 'Detenido', variant: 'neutral' }
	};

	const columns: TableColumn<Project>[] = [
		{ key: 'name', label: 'Proyecto', sortable: true },
		{
			key: 'status',
			label: 'Estado',
			sortable: true,
			format: (row) => statuses[row.status].label,
			compare: (a, b) => severity.indexOf(a.status) - severity.indexOf(b.status)
		},
		{
			key: 'requests',
			label: 'Solicitudes (24 h)',
			numeric: true,
			sortable: true,
			format: (row) => number.format(row.requests)
		}
	];

	let sort = $state<TableSort>({ key: 'status', direction: 'ascending' });
</script>

<div style:inline-size="100%">
	<Table
		caption="Proyectos por estado"
		hideCaption
		{columns}
		rows={projects}
		rowKey="id"
		bind:sort
		sortRows
	>
		{#snippet cell(row, column, text)}
			{#if column.key === 'status'}
				<Badge variant={statuses[row.status].variant}>{text}</Badge>
			{:else}
				{text}
			{/if}
		{/snippet}
	</Table>
</div>

<script lang="ts">
	import { Table, type TableColumn, type TableSort } from '@archeblack/ui';
	import { ago, number, projects, type Project } from './projects.ts';

	const columns: TableColumn<Project>[] = [
		{ key: 'name', label: 'Proyecto', sortable: true },
		{ key: 'region', label: 'Región' },
		{ key: 'updated', label: 'Actualizado', sortable: true, format: (row) => ago(row.updated) },
		{
			key: 'requests',
			label: 'Solicitudes (24 h)',
			numeric: true,
			sortable: true,
			format: (row) => number.format(row.requests)
		}
	];

	let sort = $state<TableSort | undefined>();
	let rows = $state(projects);
	let status = $state('');

	// Sin sortRows, la tabla no reordena: el producto pide las filas en el orden nuevo (aquí las
	// ordena en el cliente para simular la respuesta del servidor) y anuncia el cambio.
	function load(next: TableSort) {
		const sign = next.direction === 'ascending' ? 1 : -1;
		const key = next.key as keyof Project;
		rows = [...projects].sort(
			(a, b) => sign * String(a[key]).localeCompare(String(b[key]), 'es', { numeric: true })
		);
		const label = columns.find((column) => column.key === next.key)?.label;
		status = `Ordenado por ${label}, ${next.direction === 'ascending' ? 'ascendente' : 'descendente'}.`;
	}
</script>

<div style:display="grid" style:gap="var(--arche-spacing-3)" style:inline-size="100%">
	<Table
		caption="Proyectos"
		hideCaption
		{columns}
		{rows}
		rowKey="id"
		bind:sort
		onSortChange={load}
	/>
	<p role="status" style:margin="0" style:color="var(--arche-color-text-muted)">
		{status || 'Sin orden: las filas llegan como las guarda el servidor.'}
	</p>
</div>

<script lang="ts">
	import { Button, Table, type TableColumn, type TableKey } from '@archeblack/ui';
	import { number, projects, type Project } from './projects.ts';

	const columns: TableColumn<Project>[] = [
		{ key: 'name', label: 'Proyecto' },
		{ key: 'region', label: 'Región' },
		{
			key: 'requests',
			label: 'Solicitudes (24 h)',
			numeric: true,
			format: (row) => number.format(row.requests)
		}
	];

	let selected = $state<TableKey[]>([]);
	const count = $derived(selected.length);
</script>

<div style:display="grid" style:gap="var(--arche-spacing-3)" style:inline-size="100%">
	<div
		style:display="flex"
		style:flex-wrap="wrap"
		style:align-items="center"
		style:justify-content="space-between"
		style:gap="var(--arche-spacing-3)"
		style:min-block-size="2rem"
	>
		<p role="status" style:margin="0" style:color="var(--arche-color-text-muted)">
			{count === 0
				? 'Ningún proyecto elegido.'
				: `${count} de ${projects.length} proyectos elegidos.`}
		</p>
		<Button size="sm" variant="ghost" disabled={count === 0} onclick={() => (selected = [])}>
			Quitar la selección
		</Button>
	</div>
	<Table
		caption="Proyectos"
		hideCaption
		{columns}
		rows={projects}
		rowKey="id"
		selectable
		bind:selected
	/>
</div>

<script lang="ts">
	import { Button, Table, type TableColumn } from '@archeblack/ui';
	import { IconPlus } from '@archeblack/ui/icons';
	import type { Project } from './projects.ts';

	const columns: TableColumn<Project>[] = [
		{ key: 'name', label: 'Proyecto' },
		{ key: 'region', label: 'Región' },
		{ key: 'requests', label: 'Solicitudes (24 h)', numeric: true }
	];
	const rows: Project[] = [];
</script>

<div style:inline-size="100%">
	<Table caption="Proyectos" hideCaption {columns} {rows} rowKey="id" selectable>
		{#snippet empty()}
			<div style:display="grid" style:justify-items="center" style:gap="var(--arche-spacing-3)">
				<p style:margin="0">Todavía no hay proyectos.</p>
				<Button size="sm" iconStart={IconPlus}>Crear proyecto</Button>
			</div>
		{/snippet}
	</Table>
</div>

<script lang="ts">
	import { Table, type TableColumn } from '@archeblack/ui';
	import { ago, number, projects, type Project } from './projects.ts';

	const columns: TableColumn<Project>[] = [
		{ key: 'name', label: 'Proyecto' },
		{ key: 'id', label: 'Identificador' },
		{ key: 'region', label: 'Región' },
		{ key: 'updated', label: 'Actualizado', format: (row) => ago(row.updated) },
		{
			key: 'requests',
			label: 'Solicitudes (24 h)',
			numeric: true,
			format: (row) => number.format(row.requests)
		}
	];
</script>

<!-- El título visible es el <caption>: también nombra la tabla para los lectores de pantalla. -->
<div style:inline-size="100%">
	<Table
		caption="Tráfico de las últimas 24 horas"
		size="sm"
		{columns}
		rows={projects}
		rowKey="id"
		selectable
	/>
</div>

<script lang="ts">
	import { Table, type TableColumn } from '@archeblack/ui';

	interface Deploy {
		id: number;
		commit: string;
		author: string;
		duration: number;
	}

	const authors = ['Ana', 'Bruno', 'Carla', 'Diego'];
	const rows: Deploy[] = Array.from({ length: 16 }, (_, index) => ({
		id: 1240 - index,
		commit: (0x7f3a92c1 - index * 0x1b3d).toString(16).slice(0, 7),
		author: authors[index % authors.length],
		duration: 38 + ((index * 17) % 90)
	}));

	const columns: TableColumn<Deploy>[] = [
		{ key: 'id', label: 'Despliegue', format: (row) => `#${row.id}` },
		{ key: 'commit', label: 'Commit' },
		{ key: 'author', label: 'Autor' },
		{ key: 'duration', label: 'Duración (s)', numeric: true }
	];
</script>

<!-- Con maxHeight la tabla se desplaza dentro de su contenedor y el encabezado queda fijo. -->
<div style:inline-size="100%">
	<Table
		caption="Últimos despliegues"
		hideCaption
		size="sm"
		stickyHeader
		maxHeight="18rem"
		{columns}
		{rows}
		rowKey="id"
	/>
</div>