onSelect -> onSingleSelect, logic + comments around selection in Table

Author: david-crespo

libs/table/QueryTable.tsx

@@ -55,15 +55,23 @@ type QueryTableProps<Item> = {
   emptyState: React.ReactElement
 } & (
   | {
-      onSelect: (selection: string) => void
+      /**
+       * If present, the table will include a select column and make rows
+       * selectable one at a time.
+       */
+      onSingleSelect: (selection: string) => void
       onMultiSelect?: never
     }
   | {
-      onSelect?: never
+      onSingleSelect?: never
+      /**
+       * If present, the table will include a select column and make rows
+       * selectable.
+       */
       onMultiSelect: (selections: string[]) => void
     }
   | {
-      onSelect?: never
+      onSingleSelect?: never
       onMultiSelect?: never
     }
 )
@@ -81,7 +89,7 @@ const makeQueryTable = <Item,>(
     pagination = 'page',
     pageSize = 10,
     emptyState,
-    onSelect,
+    onSingleSelect,
     onMultiSelect,
   }: QueryTableProps<Item>) {
     invariant(
@@ -92,9 +100,9 @@ const makeQueryTable = <Item,>(
     const [rowSelection, setRowSelection] = React.useState({})
     useEffect(() => {
       const selected = Object.keys(rowSelection)
-      onSelect?.(selected[0])
+      onSingleSelect?.(selected[0])
       onMultiSelect?.(selected)
-    }, [rowSelection, onSelect, onMultiSelect])
+    }, [rowSelection, onSingleSelect, onMultiSelect])
 
     const { currentPage, goToNextPage, goToPrevPage, hasPrev } = usePagination()
     const tableHelper = useMemo(() => createTable().setRowType<Item>(), [])
@@ -123,7 +131,7 @@ const makeQueryTable = <Item,>(
         )
       })
 
-      if (onSelect) {
+      if (onSingleSelect) {
         columns.unshift(getSelectCol())
       } else if (onMultiSelect) {
         columns.unshift(getMultiSelectCol())
@@ -134,7 +142,7 @@ const makeQueryTable = <Item,>(
       }
 
       return columns
-    }, [children, tableHelper, makeActions, onSelect, onMultiSelect])
+    }, [children, tableHelper, makeActions, onSingleSelect, onMultiSelect])
 
     const { data, isLoading } = useApiQuery(
       query,
@@ -155,7 +163,7 @@ const makeQueryTable = <Item,>(
         rowSelection,
       },
       manualPagination: true,
-      enableRowSelection: !!onSelect,
+      enableRowSelection: !!onSingleSelect,
       enableMultiRowSelection: !!onMultiSelect,
       onRowSelectionChange: setRowSelection,
     })

libs/table/Table.tsx

@@ -49,29 +49,29 @@ export const Table = <TGenerics extends OurTableGenerics>({
     </UITable.Header>
     <UITable.Body>
       {table.getRowModel().rows.map((row) => {
-        const onSingleSelect = row.getCanSelect()
-          ? () => {
-              table.resetRowSelection()
-              row.toggleSelected()
+        // For single-select, the entire row is clickable
+        const rowProps = row.getCanSelect() // this means single-select only
+          ? {
+              className: cn(rowClassName, 'cursor-pointer'),
+              selected: row.getIsSelected(),
+              // select only this row
+              onClick: () => table.setRowSelection(() => ({ [row.id]: true })),
             }
-          : undefined
-        const onMultiSelect = row.getCanMultiSelect()
-          ? () => row.toggleSelected()
-          : undefined
+          : { className: rowClassName }
+
+        // For multi-select, assume the first cell is the checkbox and make the
+        // whole cell clickable
+        const firstCellProps = row.getCanMultiSelect()
+          ? {
+              className: 'cursor-pointer',
+              onClick: () => row.toggleSelected(),
+            }
+          : {}
+
         const [firstCell, ...cells] = row.getAllCells()
         return (
-          <UITable.Row
-            className={cn(rowClassName, { 'cursor-pointer': !!onSingleSelect })}
-            selected={row.getIsSelected()}
-            key={row.id}
-            onClick={onSingleSelect}
-          >
-            <UITable.Cell
-              onClick={onMultiSelect}
-              className={cn({ 'cursor-pointer': !!onMultiSelect })}
-            >
-              {firstCell.renderCell()}
-            </UITable.Cell>
+          <UITable.Row key={row.id} {...rowProps}>
+            <UITable.Cell {...firstCellProps}>{firstCell.renderCell()}</UITable.Cell>
             {cells.map((cell) => (
               <UITable.Cell key={cell.column.id}>{cell.renderCell()}</UITable.Cell>
             ))}