feat: optimize table of item associated transactions.

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js

@@ -66,6 +66,7 @@ export const useEstimateTransactionsColumns = () => {
         id: 'qunatity',
         Header: intl.get('item.drawer_quantity_sold'),
         accessor: 'quantity',
+        align: 'right',
         width: 100,
       },
       {

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js

@@ -2,6 +2,9 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { DataTable } from '../../../../../components';
+import { TableStyle } from 'common';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
 import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
 import { useItemAssociatedEstimateTransactions } from 'hooks/query';
 import { useEstimateTransactionsColumns, ActionsMenu } from './components';
@@ -61,6 +64,8 @@ function EstimatePaymentTransactions({
         onEdit: handleEditPaymentTransactions,
         onDelete: handleDeletePaymentTransactons,
       }}
+      styleName={TableStyle.Constrant}
+      TableLoadingRenderer={TableSkeletonRows}
     />
   );
 }