workign on the funcitonality of the recommendation table

src/app/components/building-passport/RecommendationCard.tsx

@@ -23,13 +23,7 @@ export const uvalueColumns: ColumnDef<ComponentRecommendation>[] = [
   {
     accessorKey: "default",
     id: "default",
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected()}
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
+    header: "Selected?",
     cell: ({ row }) => (
       <Checkbox
         checked={row.getIsSelected()}
@@ -58,8 +52,18 @@ export function RecommendationModal({
   const [selectedOutcome, setSelectedOutcome] = useState<string>("None");
   const [buttonDisabled, setButtonDisabled] = useState(true);
 
+  // Find the row where default is true
+  const defaultRowIndex = recommendationData.findIndex((d) => d.default);
+
+  // Initialise the state with the default row index
+  const [rowSelection, setRowSelection] = useState(
+    defaultRowIndex !== -1 ? { [defaultRowIndex]: true } : {}
+  );
+
   function closeModal() {
     setIsOpen(false);
+    // If the user closes the modal, re-set the state of the row selection to the default, since nothing has changed
+    setRowSelection({ [defaultRowIndex]: true });
   }
 
   function handlePortfolioNameChange(e: React.ChangeEvent<HTMLInputElement>) {
@@ -108,13 +112,16 @@ export function RecommendationModal({
                   <RecommendationTable
                     data={recommendationData}
                     columns={uvalueColumns}
+                    defaultRowIndex={defaultRowIndex}
+                    rowSelection={rowSelection}
+                    setRowSelection={setRowSelection}
                   />
                   <div className="mt-4 flex justify-end gap-2">
                     <button
                       type="button"
                       className="inline-flex justify-center rounded-md border border-transparent hover:text-red-600 bg-gray-200 px-4 py-2 text-sm font-medium text-red-600 hover:bg-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:none focus-visible:ring-offset-2"
                       onClick={() => {
-                        console.log("Remove recommendation");
+                        setRowSelection({});
                       }}
                     >
                       Remove Recommendation

src/app/components/building-passport/RecommendationTable.tsx

@@ -26,6 +26,9 @@ interface DataTableProps<T extends ComponentRecommendation> {
 export default function RecommendationTable<T extends ComponentRecommendation>({
   data,
   columns,
+  defaultRowIndex,
+  rowSelection,
+  setRowSelection,
 }: DataTableProps<T>) {
   // Initialise the table
 
@@ -33,6 +36,12 @@ export default function RecommendationTable<T extends ComponentRecommendation>({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
+    onRowSelectionChange: setRowSelection,
+    enableMultiRowSelection: false,
+    enableSubRowSelection: false,
+    state: {
+      rowSelection,
+    },
   });
 
   return (