feature/delete-with-validation

frontend/src/lib/components/dashboard/customs_brokers/data-table.svelte

@@ -1,18 +1,17 @@
 <script lang="ts" generics="TData, TValue">
-	import {
-		type ColumnDef,
-		getCoreRowModel
-	} from "@tanstack/table-core";
-	import { createSvelteTable, FlexRender } from "$lib/components/ui/data-table/index.js";
-	import * as Table from "$lib/components/ui/table/index.js";
+	import { type ColumnDef, getCoreRowModel } from '@tanstack/table-core';
+	import { createSvelteTable, FlexRender } from '$lib/components/ui/data-table/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
 
 	type DataTableProps<TData, TValue> = {
 		columns: ColumnDef<TData, TValue>[];
 		data: TData[];
+		onRowClick?: (row: TData) => void;
+		selectedId?: string | number | null;
+		idField?: keyof TData;
 	};
 
-	let { data, columns }: DataTableProps<TData, TValue> = $props();
-
+	let { data, columns, onRowClick, selectedId, idField }: DataTableProps<TData, TValue> = $props();
 
 	const table = $derived(
 		createSvelteTable({
@@ -45,13 +44,17 @@
 
 			<Table.Body>
 				{#each table.getRowModel().rows as row (row.id)}
-					<Table.Row>
+					<Table.Row
+						onclick={() => onRowClick?.(row.original)}
+						class="cursor-pointer transition-colors hover:bg-muted/50 {selectedId &&
+						idField &&
+						row.original[idField] === selectedId
+							? 'bg-muted'
+							: ''}"
+					>
 						{#each row.getVisibleCells() as cell (cell.id)}
 							<Table.Cell>
-								<FlexRender
-									content={cell.column.columnDef.cell}
-									context={cell.getContext()}
-								/>
+								<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
 							</Table.Cell>
 						{/each}
 					</Table.Row>