diff --git a/src/containers/Drawers/BillDrawer/utils.js b/src/containers/Drawers/BillDrawer/utils.js
index 2b5871332..641b82e34 100644
--- a/src/containers/Drawers/BillDrawer/utils.js
+++ b/src/containers/Drawers/BillDrawer/utils.js
@@ -13,57 +13,81 @@ import {
 } from '@blueprintjs/core';
 import {
   FormatNumberCell,
+  TextOverviewTooltipCell,
   FormattedMessage as T,
   Choose,
   Icon,
 } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { useBillDrawerContext } from './BillDrawerProvider';
 
 /**
  * Retrieve bill readonly details entries table columns.
  */
-export const useBillReadonlyEntriesTableColumns = () =>
-  React.useMemo(
+export const useBillReadonlyEntriesTableColumns = () => {
+  const {
+    bill: { entries },
+  } = useBillDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
         width: 150,
         className: 'item',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
+        Cell: TextOverviewTooltipCell,
         className: 'description',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};
 
 /**
  * Bill details status.
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/utils.js b/src/containers/Drawers/CreditNoteDetailDrawer/utils.js
index 9b35a08d8..18bcf9005 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/utils.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/utils.js
@@ -10,56 +10,81 @@ import {
   Tag,
   Intent,
 } from '@blueprintjs/core';
+import { getColumnWidth } from 'utils';
 import {
   Icon,
   FormattedMessage as T,
+  TextOverviewTooltipCell,
   FormatNumberCell,
   Choose,
 } from '../../../components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
-export const useCreditNoteReadOnlyEntriesColumns = () =>
-  React.useMemo(
+export const useCreditNoteReadOnlyEntriesColumns = () => {
+  // credit note details drawer context.
+  const {
+    creditNote: { entries },
+  } = useCreditNoteDetailDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
         width: 150,
         className: 'name',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
+        Cell: TextOverviewTooltipCell,
         className: 'description',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};
 
 /**
  * Credit note more actions mneu.
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/utils.js b/src/containers/Drawers/InvoiceDetailDrawer/utils.js
index 1c44d4d10..6c7bcf65d 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/utils.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/utils.js
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import {
   Button,
   Popover,
-  Tooltip,
   PopoverInteractionKind,
   Position,
   MenuItem,
@@ -52,7 +51,6 @@ export const useInvoiceReadonlyEntriesColumns = () => {
         Cell: TextOverviewTooltipCell,
         disableSortBy: true,
         textOverview: true,
-        width: 75,
       },
       {
         Header: intl.get('quantity'),
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js b/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js
index 4698f1ead..5fab85060 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js
+++ b/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js
@@ -3,43 +3,65 @@ import intl from 'react-intl-universal';
 import moment from 'moment';
 
 import { FormatNumberCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-export const usePaymentMadeEntriesColumns = () =>
-  React.useMemo(() => [
-    {
-      Header: intl.get('date'),
-      accessor: (row) => moment(row.date).format('YYYY MMM DD'),
-      width: 100,
-      disableSortBy: true,
-      className: 'date',
-    },
-    {
-      Header: intl.get('bill_number'),
-      accessor: 'bill_no',
-      width: 150,
-      disableSortBy: true,
-      className: 'bill_number',
-    },
-    {
-      Header: intl.get('bill_amount'),
-      accessor: 'bill.amount',
-      Cell: FormatNumberCell,
-      align: 'right',
-    },
-    {
-      Header: intl.get('due_amount'),
-      accessor: 'bill.due_amount',
-      Cell: FormatNumberCell,
-      width: 100,
-      disableSortBy: true,
-      align: 'right',
-    },
-    {
-      Header: intl.get('payment_amount'),
-      accessor: 'payment_amount',
-      Cell: FormatNumberCell,
-      width: 100,
-      disableSortBy: true,
-      align: 'right',
-    },
-  ], []);
+export const usePaymentMadeEntriesColumns = () => {
+  // Payment made details context.
+  const {
+    paymentMade: { entries },
+  } = usePaymentMadeDetailContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: (row) => moment(row.date).format('YYYY MMM DD'),
+        width: 100,
+        disableSortBy: true,
+        className: 'date',
+      },
+      {
+        Header: intl.get('bill_number'),
+        accessor: 'bill_no',
+        width: 150,
+        disableSortBy: true,
+        className: 'bill_number',
+      },
+      {
+        Header: intl.get('bill_amount'),
+        accessor: 'bill.amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'bill.amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+      },
+      {
+        Header: intl.get('due_amount'),
+        accessor: 'bill.due_amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'bill.due_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        disableSortBy: true,
+        align: 'right',
+      },
+      {
+        Header: intl.get('payment_amount'),
+        accessor: 'payment_amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'payment_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        disableSortBy: true,
+        textOverview: true,
+        align: 'right',
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js
index 5bbc999f3..91ca16138 100644
--- a/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js
+++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js
@@ -2,12 +2,18 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
 import { FormatNumberCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
 /**
  * Retrieve payment entries table columns.
  */
-export const usePaymentReceiveEntriesColumns = () =>
-  React.useMemo(
+export const usePaymentReceiveEntriesColumns = () => {
+  const {
+    paymentReceive: { entries },
+  } = usePaymentReceiveDetailContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('date'),
@@ -27,24 +33,38 @@ export const usePaymentReceiveEntriesColumns = () =>
         Header: intl.get('invoice_amount'),
         accessor: 'invoice.balance',
         Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'invoice.balance', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
+        textOverview: true,
       },
       {
         Header: intl.get('amount_due'),
         accessor: 'invoice.due_amount',
         Cell: FormatNumberCell,
         align: 'right',
-        width: 100,
+        width: getColumnWidth(entries, 'invoice.due_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('payment_amount'),
         accessor: 'invoice.payment_amount',
         Cell: FormatNumberCell,
         align: 'right',
-        width: 100,
+        width: getColumnWidth(entries, 'invoice.payment_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};
diff --git a/src/containers/Drawers/ReceiptDetailDrawer/utils.js b/src/containers/Drawers/ReceiptDetailDrawer/utils.js
index 5cd48259c..c1e6ec4d6 100644
--- a/src/containers/Drawers/ReceiptDetailDrawer/utils.js
+++ b/src/containers/Drawers/ReceiptDetailDrawer/utils.js
@@ -1,44 +1,69 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormatNumberCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components';
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider.js';
 
-export const useReceiptReadonlyEntriesTableColumns = () => React.useMemo(() => [
-    {
-      Header: intl.get('product_and_service'),
-      accessor: 'item.name',
-      width: 150,
-      className: 'name',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('description'),
-      accessor: 'description',
-      className: 'description',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('quantity'),
-      accessor: 'quantity',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('rate'),
-      accessor: 'rate',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true
-    },
-    {
-      Header: intl.get('amount'),
-      accessor: 'amount',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true
-    },
-  ], []);
-  
\ No newline at end of file
+export const useReceiptReadonlyEntriesTableColumns = () => {
+  // Receipt details drawer context.
+  const {
+    receipt: { entries },
+  } = useReceiptDetailDrawerContext();
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
+        width: 150,
+        className: 'name',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        Cell: TextOverviewTooltipCell,
+        className: 'description',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/utils.js b/src/containers/Drawers/VendorCreditDetailDrawer/utils.js
index 5784fe8c7..f922b9001 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/utils.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/utils.js
@@ -10,59 +10,82 @@ import {
   Tag,
   Intent,
 } from '@blueprintjs/core';
+import { getColumnWidth } from 'utils';
 import {
   Icon,
   FormattedMessage as T,
+  TextOverviewTooltipCell,
   FormatNumberCell,
   Choose,
 } from '../../../components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
 
 /**
  * Retrieve vendor credit readonly details entries table columns.
  */
-export const useVendorCreditReadonlyEntriesTableColumns = () =>
-  React.useMemo(
+export const useVendorCreditReadonlyEntriesTableColumns = () => {
+  const {
+    vendorCredit: { entries },
+  } = useVendorCreditDetailDrawerContext();
+  return React.useMemo(
     () => [
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
         width: 150,
         className: 'item',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
+        Cell: TextOverviewTooltipCell,
         className: 'description',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};
 
 /**
  * Vendor note more actions menu.