diff --git a/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
index 645e3fcce..c0243e831 100644
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
@@ -73,6 +73,11 @@ function ManualJournalsDataTable({
     });
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('journal-drawer', { manualJournalId: cell.row.original.id });
+  };
+
   // Handle fetch data once the page index, size or sort by of the table change.
   const handleFetchData = React.useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -111,6 +116,7 @@ function ManualJournalsDataTable({
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
       onFetchData={handleFetchData}
+      onCellClick={handleCellClick}
       payload={{
         onDelete: handleDeleteJournal,
         onPublish: handlePublishJournal,
diff --git a/client/src/containers/Accounting/JournalsLanding/utils.js b/client/src/containers/Accounting/JournalsLanding/utils.js
index 03fd12010..18bca9dca 100644
--- a/client/src/containers/Accounting/JournalsLanding/utils.js
+++ b/client/src/containers/Accounting/JournalsLanding/utils.js
@@ -20,6 +20,7 @@ export const useManualJournalsColumns = () => {
         accessor: DateAccessor,
         width: 115,
         className: 'date',
+        clickable: true,
       },
       {
         id: 'amount',
@@ -27,6 +28,7 @@ export const useManualJournalsColumns = () => {
         accessor: 'formatted_amount',
         className: 'amount',
         width: 115,
+        clickable: true,
       },
       {
         id: 'journal_number',
@@ -34,6 +36,7 @@ export const useManualJournalsColumns = () => {
         accessor: (row) => `#${row.journal_number}`,
         className: 'journal_number',
         width: 100,
+        clickable: true,
       },
       {
         id: 'journal_type',
@@ -41,6 +44,7 @@ export const useManualJournalsColumns = () => {
         accessor: 'journal_type',
         width: 110,
         className: 'journal_type',
+        clickable: true,
       },
       {
         id: 'status',
@@ -48,6 +52,7 @@ export const useManualJournalsColumns = () => {
         accessor: (row) => StatusAccessor(row),
         width: 95,
         className: 'status',
+        clickable: true,
       },
       {
         id: 'note',
@@ -56,6 +61,7 @@ export const useManualJournalsColumns = () => {
         disableSortBy: true,
         width: 85,
         className: 'note',
+        clickable: true,
       },
       {
         id: 'created_at',
@@ -63,8 +69,9 @@ export const useManualJournalsColumns = () => {
         accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
         width: 125,
         className: 'created_at',
+        clickable: true,
       },
     ],
     [],
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/containers/Customers/CustomersLanding/CustomersTable.js b/client/src/containers/Customers/CustomersLanding/CustomersTable.js
index 741570929..b590cdf01 100644
--- a/client/src/containers/Customers/CustomersLanding/CustomersTable.js
+++ b/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,
diff --git a/client/src/containers/Customers/CustomersLanding/components.js b/client/src/containers/Customers/CustomersLanding/components.js
index 8b23d3bbd..3b45559c3 100644
--- a/client/src/containers/Customers/CustomersLanding/components.js
+++ b/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,
       },
     ],
     [],
diff --git a/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js b/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js
index 2c42c9957..dda1055b5 100644
--- a/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js
@@ -78,6 +78,11 @@ function ExpensesDataTable({
     });
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('expense-drawer', { expenseId: cell.row.original.id });
+  };
+
   // Display empty status instead of the table.
   if (isEmptyStatus) {
     return <ExpensesEmptyStatus />;
@@ -103,6 +108,7 @@ function ExpensesDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onPublish: handlePublishExpense,
         onDelete: handleDeleteExpense,
diff --git a/client/src/containers/Expenses/ExpensesLanding/components.js b/client/src/containers/Expenses/ExpensesLanding/components.js
index 25a91a252..462e95304 100644
--- a/client/src/containers/Expenses/ExpensesLanding/components.js
+++ b/client/src/containers/Expenses/ExpensesLanding/components.js
@@ -138,6 +138,7 @@ export function useExpensesTableColumns() {
         accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'),
         width: 140,
         className: 'payment_date',
+        clickable: true,
       },
       {
         id: 'amount',
@@ -145,6 +146,7 @@ export function useExpensesTableColumns() {
         accessor: TotalAmountAccessor,
         className: 'amount',
         width: 150,
+        clickable: true,
       },
       {
         id: 'payment_account',
@@ -152,6 +154,7 @@ export function useExpensesTableColumns() {
         accessor: 'payment_account.name',
         className: 'payment_account',
         width: 150,
+        clickable: true,
       },
       {
         id: 'expense_account',
@@ -160,6 +163,7 @@ export function useExpensesTableColumns() {
         width: 160,
         className: 'expense_account',
         disableSortBy: true,
+        clickable: true,
       },
       {
         id: 'published',
@@ -167,6 +171,7 @@ export function useExpensesTableColumns() {
         accessor: PublishAccessor,
         width: 100,
         className: 'publish',
+        clickable: true,
       },
       {
         id: 'description',
@@ -175,6 +180,7 @@ export function useExpensesTableColumns() {
         width: 150,
         className: 'description',
         disableSortBy: true,
+        clickable: true,
       },
     ],
     [],
diff --git a/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js b/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js
index 07bde3169..4f4af0535 100644
--- a/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js
+++ b/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js
@@ -66,7 +66,12 @@ function InventoryAdjustmentDataTable({
     },
     [setInventoryAdjustmentTableState],
   );
-
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('inventory-adjustment-drawer', {
+      inventoryId: cell.row.original.id,
+    });
+  };
   return (
     <DataTable
       columns={columns}
@@ -83,6 +88,7 @@ function InventoryAdjustmentDataTable({
       pagesCount={pagination.pagesCount}
       autoResetSortBy={false}
       autoResetPage={false}
+      onCellClick={handleCellClick}
       payload={{
         onDelete: handleDeleteAdjustment,
         onPublish: handlePublishInventoryAdjustment,
diff --git a/client/src/containers/InventoryAdjustments/components.js b/client/src/containers/InventoryAdjustments/components.js
index 9d4302442..4fdf98f52 100644
--- a/client/src/containers/InventoryAdjustments/components.js
+++ b/client/src/containers/InventoryAdjustments/components.js
@@ -143,6 +143,7 @@ export const useInventoryAdjustmentsColumns = () => {
         accessor: (r) => moment(r.date).format('YYYY MMM DD'),
         width: 115,
         className: 'date',
+        clickable: true,
       },
       {
         id: 'type',
@@ -150,6 +151,7 @@ export const useInventoryAdjustmentsColumns = () => {
         accessor: TypeAccessor,
         className: 'type',
         width: 100,
+        clickable: true,
       },
       {
         id: 'reason',
@@ -157,6 +159,7 @@ export const useInventoryAdjustmentsColumns = () => {
         accessor: 'reason',
         className: 'reason',
         width: 115,
+        clickable: true,
       },
       {
         id: 'reference_no',
@@ -164,6 +167,7 @@ export const useInventoryAdjustmentsColumns = () => {
         accessor: 'reference_no',
         className: 'reference_no',
         width: 100,
+        clickable: true,
       },
       {
         id: 'published_at',
@@ -171,6 +175,7 @@ export const useInventoryAdjustmentsColumns = () => {
         accessor: PublishAccessor,
         width: 95,
         className: 'publish',
+        clickable: true,
       },
       {
         id: 'description',
@@ -179,6 +184,7 @@ export const useInventoryAdjustmentsColumns = () => {
         disableSorting: true,
         width: 85,
         className: 'description',
+        clickable: true,
       },
       {
         id: 'created_at',
@@ -186,6 +192,7 @@ export const useInventoryAdjustmentsColumns = () => {
         accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
         width: 125,
         className: 'created_at',
+        clickable: true,
       },
     ],
     [],
diff --git a/client/src/containers/Items/ItemsDataTable.js b/client/src/containers/Items/ItemsDataTable.js
index 62847e127..72fd0e053 100644
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/client/src/containers/Items/ItemsDataTable.js
@@ -107,6 +107,11 @@ function ItemsDataTable({
     return <ItemsEmptyStatus />;
   }
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('item-detail-drawer', { itemId: cell.row.original.id });
+  };
+
   return (
     <DataTable
       columns={columns}
@@ -131,6 +136,7 @@ function ItemsDataTable({
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ItemsActionMenuList}
       onFetchData={handleFetchData}
+      onCellClick={handleCellClick}
       payload={{
         onDeleteItem: handleDeleteItem,
         onEditItem: handleEditItem,
diff --git a/client/src/containers/Items/components.js b/client/src/containers/Items/components.js
index 37b4df40b..7eae9b44c 100644
--- a/client/src/containers/Items/components.js
+++ b/client/src/containers/Items/components.js
@@ -155,6 +155,7 @@ export const useItemsTableColumns = () => {
         accessor: 'name',
         className: 'name',
         width: 180,
+        clickable: true,
       },
       {
         id: 'code',
@@ -162,6 +163,7 @@ export const useItemsTableColumns = () => {
         accessor: 'code',
         className: 'code',
         width: 120,
+        clickable: true,
       },
       {
         id: 'type',
@@ -169,6 +171,7 @@ export const useItemsTableColumns = () => {
         accessor: ItemTypeAccessor,
         className: 'item_type',
         width: 120,
+        clickable: true,
       },
       {
         id: 'category',
@@ -176,6 +179,7 @@ export const useItemsTableColumns = () => {
         accessor: 'category.name',
         className: 'category',
         width: 150,
+        clickable: true,
       },
       {
         id: 'sell_price',
@@ -183,6 +187,7 @@ export const useItemsTableColumns = () => {
         accessor: 'sell_price_formatted',
         className: 'sell-price',
         width: 150,
+        clickable: true,
       },
       {
         id: 'cost_price',
@@ -190,6 +195,7 @@ export const useItemsTableColumns = () => {
         accessor: 'cost_price_formatted',
         className: 'cost-price',
         width: 150,
+        clickable: true,
       },
       {
         id: 'quantity_on_hand',
@@ -197,6 +203,7 @@ export const useItemsTableColumns = () => {
         accessor: 'quantity_on_hand',
         Cell: QuantityOnHandCell,
         width: 140,
+        clickable: true,
       },
     ],
     [],
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
index f2edded7d..13548472e 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
@@ -86,6 +86,11 @@ function BillsDataTable({
     openDrawer('bill-drawer', { billId: id });
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('bill-drawer', { billId: cell.row.original.id });
+  };
+
   if (isEmptyStatus) {
     return <BillsEmptyStatus />;
   }
@@ -108,6 +113,7 @@ function BillsDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onDelete: handleDeleteBill,
         onEdit: handleEditBill,
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/components.js b/client/src/containers/Purchases/Bills/BillsLanding/components.js
index 2c4845706..32a9972ec 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -159,6 +159,7 @@ export function useBillsTableColumns() {
         accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
         width: 110,
         className: 'bill_date',
+        clickable: true,
       },
       {
         id: 'vendor',
@@ -166,6 +167,7 @@ export function useBillsTableColumns() {
         accessor: 'vendor.display_name',
         width: 180,
         className: 'vendor',
+        clickable: true,
       },
       {
         id: 'bill_number',
@@ -173,6 +175,7 @@ export function useBillsTableColumns() {
         accessor: (row) => (row.bill_number ? `#${row.bill_number}` : null),
         width: 100,
         className: 'bill_number',
+        clickable: true,
       },
       {
         id: 'amount',
@@ -180,6 +183,7 @@ export function useBillsTableColumns() {
         accessor: AmountAccessor,
         width: 120,
         className: 'amount',
+        clickable: true,
       },
       {
         id: 'status',
@@ -187,6 +191,7 @@ export function useBillsTableColumns() {
         accessor: StatusAccessor,
         width: 160,
         className: 'status',
+        clickable: true,
       },
       {
         id: 'due_date',
@@ -194,6 +199,7 @@ export function useBillsTableColumns() {
         accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
         width: 110,
         className: 'due_date',
+        clickable: true,
       },
       {
         id: 'reference_no',
@@ -201,6 +207,7 @@ export function useBillsTableColumns() {
         accessor: 'reference_no',
         width: 90,
         className: 'reference_no',
+        clickable: true,
       },
     ],
     [],
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
index 993ceeff2..00af42200 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
@@ -63,6 +63,13 @@ function PaymentMadesTable({
     openDrawer('payment-made-detail-drawer', { paymentMadeId: id });
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('payment-made-detail-drawer', {
+      paymentMadeId: cell.row.original.id,
+    });
+  };
+
   // Handle datatable fetch data once the table state change.
   const handleDataTableFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -96,6 +103,7 @@ function PaymentMadesTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onEdit: handleEditPaymentMade,
         onDelete: handleDeletePaymentMade,
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
index ea55630ce..bef7be79e 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
@@ -78,6 +78,7 @@ export function usePaymentMadesTableColumns() {
         accessor: 'payment_date',
         width: 140,
         className: 'payment_date',
+        clickable: true,
       },
       {
         id: 'vendor',
@@ -85,6 +86,7 @@ export function usePaymentMadesTableColumns() {
         accessor: 'vendor.display_name',
         width: 140,
         className: 'vendor_id',
+        clickable: true,
       },
       {
         id: 'payment_number',
@@ -93,6 +95,7 @@ export function usePaymentMadesTableColumns() {
           row.payment_number ? `#${row.payment_number}` : null,
         width: 140,
         className: 'payment_number',
+        clickable: true,
       },
       {
         id: 'payment_account',
@@ -100,6 +103,7 @@ export function usePaymentMadesTableColumns() {
         accessor: 'payment_account.name',
         width: 140,
         className: 'payment_account_id',
+        clickable: true,
       },
       {
         id: 'amount',
@@ -107,6 +111,7 @@ export function usePaymentMadesTableColumns() {
         accessor: AmountAccessor,
         width: 140,
         className: 'amount',
+        clickable: true,
       },
       {
         id: 'reference_no',
@@ -114,6 +119,7 @@ export function usePaymentMadesTableColumns() {
         accessor: 'reference',
         width: 140,
         className: 'reference',
+        clickable: true,
       },
     ],
     [],
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
index 242855779..6caffd3af 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
@@ -90,6 +90,10 @@ function EstimatesDataTable({
     openDialog('estimate-pdf-preview', { estimateId: id });
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('estimate-detail-drawer', { estimateId: cell.row.original.id });
+  };
   // Handles fetch data.
   const handleFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -125,6 +129,7 @@ function EstimatesDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onApprove: handleApproveEstimate,
         onEdit: handleEditEstimate,
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
index f7d25c3ec..87141ddcc 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -164,6 +164,7 @@ export function useEstiamtesTableColumns() {
         Cell: DateCell,
         width: 140,
         className: 'estimate_date',
+        clickable: true,
       },
       {
         id: 'customer',
@@ -171,6 +172,7 @@ export function useEstiamtesTableColumns() {
         accessor: 'customer.display_name',
         width: 140,
         className: 'customer_id',
+        clickable: true,
       },
       {
         id: 'expiration_date',
@@ -179,6 +181,7 @@ export function useEstiamtesTableColumns() {
         Cell: DateCell,
         width: 140,
         className: 'expiration_date',
+        clickable: true,
       },
       {
         id: 'estimate_number',
@@ -187,6 +190,7 @@ export function useEstiamtesTableColumns() {
           row.estimate_number ? `#${row.estimate_number}` : null,
         width: 140,
         className: 'estimate_number',
+        clickable: true,
       },
       {
         id: 'amount',
@@ -194,6 +198,7 @@ export function useEstiamtesTableColumns() {
         accessor: AmountAccessor,
         width: 140,
         className: 'amount',
+        clickable: true,
       },
       {
         id: 'status',
@@ -201,6 +206,7 @@ export function useEstiamtesTableColumns() {
         accessor: (row) => statusAccessor(row),
         width: 140,
         className: 'status',
+        clickable: true,
       },
       {
         id: 'reference_no',
@@ -208,6 +214,7 @@ export function useEstiamtesTableColumns() {
         accessor: 'reference',
         width: 90,
         className: 'reference',
+        clickable: true,
       },
     ],
     [],
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
index c48450da6..3e1bd8f35 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
@@ -86,6 +86,10 @@ function InvoicesDataTable({
     openDialog('invoice-pdf-preview', { invoiceId: id });
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('invoice-detail-drawer', { invoiceId: cell.row.original.id });
+  };
   // Handles fetch data once the table state change.
   const handleDataTableFetchData = useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -124,6 +128,7 @@ function InvoicesDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onDelete: handleDeleteInvoice,
         onDeliver: handleDeliverInvoice,
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
index d00e88598..8af13011e 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -174,6 +174,7 @@ export function useInvoicesTableColumns() {
         accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
         width: 110,
         className: 'invoice_date',
+        clickable: true,
       },
       {
         id: 'customer',
@@ -181,6 +182,7 @@ export function useInvoicesTableColumns() {
         accessor: 'customer.display_name',
         width: 180,
         className: 'customer_id',
+        clickable: true,
       },
 
       {
@@ -189,6 +191,7 @@ export function useInvoicesTableColumns() {
         accessor: 'invoice_no',
         width: 100,
         className: 'invoice_no',
+        clickable: true,
       },
       {
         id: 'balance',
@@ -198,6 +201,7 @@ export function useInvoicesTableColumns() {
         ),
         width: 120,
         className: 'balance',
+        clickable: true,
       },
       {
         id: 'status',
@@ -205,6 +209,7 @@ export function useInvoicesTableColumns() {
         accessor: (row) => statusAccessor(row),
         width: 160,
         className: 'status',
+        clickable: true,
       },
       {
         id: 'due_date',
@@ -212,6 +217,7 @@ export function useInvoicesTableColumns() {
         accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
         width: 110,
         className: 'due_date',
+        clickable: true,
       },
       {
         id: 'reference_no',
@@ -219,8 +225,9 @@ export function useInvoicesTableColumns() {
         accessor: 'reference_no',
         width: 90,
         className: 'reference_no',
+        clickable: true,
       },
     ],
     [],
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
index 51f20b337..c2e220847 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
@@ -66,6 +66,13 @@ function PaymentReceivesDataTable({
     openDrawer('payment-receive-detail-drawer', { paymentReceiveId: id });
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('payment-receive-detail-drawer', {
+      paymentReceiveId: cell.row.original.id,
+    });
+  };
+
   // Handle datatable fetch once the table's state changing.
   const handleDataTableFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -103,6 +110,7 @@ function PaymentReceivesDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onDelete: handleDeletePaymentReceive,
         onEdit: handleEditPaymentReceive,
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
index 6753d9c36..013198bcd 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -89,6 +89,7 @@ export function usePaymentReceivesColumns() {
         accessor: PaymentDateAccessor,
         width: 140,
         className: 'payment_date',
+        clickable: true,
       },
       {
         id: 'customer',
@@ -96,6 +97,7 @@ export function usePaymentReceivesColumns() {
         accessor: 'customer.display_name',
         width: 160,
         className: 'customer_id',
+        clickable: true,
       },
       {
         id: 'amount',
@@ -103,6 +105,7 @@ export function usePaymentReceivesColumns() {
         accessor: AmountAccessor,
         width: 120,
         className: 'amount',
+        clickable: true,
       },
       {
         id: 'payment_receive_no',
@@ -111,6 +114,7 @@ export function usePaymentReceivesColumns() {
           row.payment_receive_no ? `#${row.payment_receive_no}` : null,
         width: 140,
         className: 'payment_receive_no',
+        clickable: true,
       },
       {
         id: 'deposit_account',
@@ -118,6 +122,7 @@ export function usePaymentReceivesColumns() {
         accessor: 'deposit_account.name',
         width: 140,
         className: 'deposit_account_id',
+        clickable: true,
       },
       {
         id: 'reference_no',
@@ -125,6 +130,7 @@ export function usePaymentReceivesColumns() {
         accessor: 'reference_no',
         width: 140,
         className: 'reference_no',
+        clickable: true,
       },
     ],
     [],
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
index 1a30b2e7c..9e8b69e29 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
@@ -95,6 +95,10 @@ function ReceiptsDataTable({
   if (isEmptyStatus) {
     return <ReceiptsEmptyStatus />;
   }
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('receipt-detail-drawer', { receiptId: cell.row.original.id });
+  };
 
   return (
     <DataTable
@@ -117,6 +121,7 @@ function ReceiptsDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onEdit: handleEditReceipt,
         onDelete: handleDeleteReceipt,
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
index f04df881b..25d972141 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -106,6 +106,7 @@ export function useReceiptsTableColumns() {
         accessor: (r) => moment(r.receipt_date).format('YYYY MMM DD'),
         width: 140,
         className: 'receipt_date',
+        clickable: true,
       },
       {
         id: 'customer',
@@ -113,6 +114,7 @@ export function useReceiptsTableColumns() {
         accessor: 'customer.display_name',
         width: 140,
         className: 'customer_id',
+        clickable: true,
       },
       {
         id: 'receipt_number',
@@ -120,6 +122,7 @@ export function useReceiptsTableColumns() {
         accessor: 'receipt_number',
         width: 140,
         className: 'receipt_number',
+        clickable: true,
       },
       {
         id: 'deposit_account',
@@ -127,6 +130,7 @@ export function useReceiptsTableColumns() {
         accessor: 'deposit_account.name',
         width: 140,
         className: 'deposit_account',
+        clickable: true,
       },
       {
         id: 'amount',
@@ -134,6 +138,7 @@ export function useReceiptsTableColumns() {
         accessor: (r) => <Money amount={r.amount} currency={r.currency_code} />,
         width: 140,
         className: 'amount',
+        clickable: true,
       },
       {
         id: 'status',
@@ -141,6 +146,7 @@ export function useReceiptsTableColumns() {
         accessor: StatusAccessor,
         width: 140,
         className: 'status',
+        clickable: true,
       },
       {
         id: 'reference_no',
@@ -148,6 +154,7 @@ export function useReceiptsTableColumns() {
         accessor: 'reference_no',
         width: 140,
         className: 'reference_no',
+        clickable: true,
       },
     ],
     [],
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorsTable.js b/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
index ed9b6e8dd..1f6a04945 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
@@ -85,7 +85,11 @@ function VendorsTable({
   const handleViewDetailVendor = ({ id }) => {
     openDrawer('contact-detail-drawer', { contactId: id });
   };
-  
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('contact-detail-drawer', { contactId: cell.row.original.id });
+  };
   // Handle fetch data once the page index, size or sort by of the table change.
   const handleFetchData = React.useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -124,6 +128,7 @@ function VendorsTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onEdit: handleEditVendor,
         onDelete: handleDeleteVendor,
diff --git a/client/src/containers/Vendors/VendorsLanding/components.js b/client/src/containers/Vendors/VendorsLanding/components.js
index 30646f94b..355effbf3 100644
--- a/client/src/containers/Vendors/VendorsLanding/components.js
+++ b/client/src/containers/Vendors/VendorsLanding/components.js
@@ -117,6 +117,7 @@ export function useVendorsTableColumns() {
         width: 45,
         disableResizing: true,
         disableSortBy: true,
+        clickable: true,
       },
       {
         id: 'display_name',
@@ -124,6 +125,7 @@ export function useVendorsTableColumns() {
         accessor: 'display_name',
         className: 'display_name',
         width: 150,
+        clickable: true,
       },
       {
         id: 'company_name',
@@ -131,6 +133,7 @@ export function useVendorsTableColumns() {
         accessor: 'company_name',
         className: 'company_name',
         width: 150,
+        clickable: true,
       },
       {
         id: 'work_phone',
@@ -138,6 +141,7 @@ export function useVendorsTableColumns() {
         accessor: PhoneNumberAccessor,
         className: 'work_phone',
         width: 100,
+        clickable: true,
       },
       {
         id: 'balance',
@@ -145,6 +149,7 @@ export function useVendorsTableColumns() {
         accessor: BalanceAccessor,
         className: 'receivable_balance',
         width: 100,
+        clickable: true,
       },
     ],
     [],