BC-14: feat: table rows clickable.

client/src/containers/Customers/CustomersLanding/CustomersTable.js

@@ -95,6 +95,11 @@ function CustomersTable({
     openDrawer('contact-detail-drawer', { contactId: id });
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('contact-detail-drawer', { contactId: cell.row.original.id });
+  };
+
   if (isEmptyStatus) {
     return <CustomersEmptyStatus />;
   }
@@ -121,6 +126,7 @@ function CustomersTable({
       autoResetPage={false}
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      onCellClick={handleCellClick}
       payload={{
         onDelete: handleCustomerDelete,
         onEdit: handleCustomerEdit,

client/src/containers/Customers/CustomersLanding/components.js

@@ -104,6 +104,7 @@ export function useCustomersTableColumns() {
         width: 45,
         disableResizing: true,
         disableSortBy: true,
+        clickable: true,
       },
       {
         id: 'display_name',
@@ -111,6 +112,7 @@ export function useCustomersTableColumns() {
         accessor: 'display_name',
         className: 'display_name',
         width: 150,
+        clickable: true,
       },
       {
         id: 'company_name',
@@ -118,6 +120,7 @@ export function useCustomersTableColumns() {
         accessor: 'company_name',
         className: 'company_name',
         width: 150,
+        clickable: true,
       },
       {
         id: 'work_phone',
@@ -125,6 +128,7 @@ export function useCustomersTableColumns() {
         accessor: PhoneNumberAccessor,
         className: 'phone_number',
         width: 100,
+        clickable: true,
       },
       {
         id: 'balance',
@@ -132,6 +136,7 @@ export function useCustomersTableColumns() {
         accessor: BalanceAccessor,
         className: 'receivable_balance',
         width: 100,
+        clickable: true,
       },
     ],
     [],