From b61be3c242d5cf4b0ce8dd77105895cc0e38b94b Mon Sep 17 00:00:00 2001
From: Arthur Degonde <44548105+ArthurD1@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:43:25 +0200
Subject: [PATCH] feat: updatable key row of data table

---
 .../frontend/src/ui/Components/DataTable/DataTable.tsx       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/harp_apps/dashboard/frontend/src/ui/Components/DataTable/DataTable.tsx b/harp_apps/dashboard/frontend/src/ui/Components/DataTable/DataTable.tsx
index 97eb0d4b..ac16a544 100644
--- a/harp_apps/dashboard/frontend/src/ui/Components/DataTable/DataTable.tsx
+++ b/harp_apps/dashboard/frontend/src/ui/Components/DataTable/DataTable.tsx
@@ -22,6 +22,7 @@ interface DataTableProps<TRow extends BaseRow, TComputed extends BaseRow> extend
   columns?: Array<keyof (TRow & TComputed) | Array<keyof (TRow & TComputed)>>
   onRowClick?: (row: TRow) => unknown
   selected?: TRow
+  rowKey?: keyof TRow
 }
 
 const StyledTable = styled.table<DataTableVariantsProps>(() => [tw`min-w-full divide-y divide-gray-300 text-left`])
@@ -60,6 +61,7 @@ export function DataTable<TRow extends BaseRow, TComputed extends BaseRow = Base
   types,
   variant = "default",
   selected = undefined,
+  rowKey = "id",
 }: DataTableProps<TRow, TComputed>) {
   return (
     <StyledTable variant={variant}>
@@ -91,7 +93,8 @@ export function DataTable<TRow extends BaseRow, TComputed extends BaseRow = Base
                   : undefined
               }
               className={
-                "hover:bg-slate-50 cursor-pointer" + (selected && selected.id === row.id ? " bg-slate-100" : "")
+                "hover:bg-slate-50 cursor-pointer" +
+                (selected && selected[rowKey] === row[rowKey] ? " bg-slate-100" : "")
               }
             >
               {columns?.map((name, index) => {