fix(DataTable): cells type.

src/containers/Accounting/MakeJournal/components.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import { Intent, Position, Button, Tooltip } from '@blueprintjs/core';
+import { Menu, MenuItem, Position, Button } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
+import { useFormikContext } from 'formik';
 import intl from 'react-intl-universal';
-import { Icon, Hint, FormattedMessage as T } from 'components';
+
+import { ExchangeRateInputGroup, Icon, Hint, FormattedMessage as T } from 'components';
 import {
   AccountsListFieldCell,
   MoneyFieldCell,
@@ -9,12 +12,12 @@ import {
   ContactsListFieldCell,
   BranchesListFieldCell,
 } from 'components/DataTableCells';
+
+import { CellType, Features } from 'common';
+
 import { useFeatureCan } from 'hooks/state';
-import { useFormikContext } from 'formik';
-import { ExchangeRateInputGroup } from 'components';
 import { useCurrentOrganization } from 'hooks/state';
 import { useJournalIsForeign } from './utils';
-import { Features } from 'common';
 
 /**
  * Contact header cell.
@@ -55,22 +58,26 @@ export const ActionsCellRenderer = ({
   data,
   payload,
 }) => {
-  const onClickRemoveRole = () => {
+  const handleClickRemoveRole = () => {
     payload.removeRow(index);
   };
+  const exampleMenu = (
+    <Menu>
+      <MenuItem onClick={handleClickRemoveRole} text="Remove line" />
+    </Menu>
+  );
   return (
-    <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
+    <Popover2 content={exampleMenu} placement="left-start">
       <Button
-        icon={<Icon icon="times-circle" iconSize={14} />}
+        icon={<Icon icon={'more-13'} iconSize={13} />}
         iconSize={14}
-        className="ml2"
+        className="m12"
         minimal={true}
-        intent={Intent.DANGER}
-        onClick={onClickRemoveRole}
       />
-    </Tooltip>
+    </Popover2>
   );
 };
+ActionsCellRenderer.cellType = CellType.Button;
 
 /**
  * Retrieve columns of make journal entries table.
@@ -140,7 +147,6 @@ export const useJournalTableEntriesColumns = () => {
         Header: '',
         accessor: 'action',
         Cell: ActionsCellRenderer,
-        className: 'actions',
         disableSortBy: true,
         disableResizing: true,
         width: 45,
@@ -154,7 +160,7 @@ export const useJournalTableEntriesColumns = () => {
  * Journal exchange rate input field.
  * @returns {JSX.Element}
  */
- export function JournalExchangeRateInputField({ ...props }) {
+export function JournalExchangeRateInputField({ ...props }) {
   const currentOrganization = useCurrentOrganization();
   const { values } = useFormikContext();
 

src/containers/Entries/components.js

@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { MenuItem, Menu, Button, Position } from '@blueprintjs/core';
 import { Popover2 } from '@blueprintjs/popover2';
 
-import { Align } from 'common';
+import { Align, CellType } from 'common';
 import { Hint, Icon, FormattedMessage as T } from 'components';
 import { formattedAmount } from 'utils';
 import {
@@ -58,6 +58,7 @@ export function ActionsCellRenderer({
     </Popover2>
   );
 }
+ActionsCellRenderer.cellType = CellType.Button;
 
 /**
  * Total accessor.

src/containers/Expenses/ExpenseForm/components.js

@@ -1,16 +1,23 @@
 import React from 'react';
-import { Button, Tooltip, Intent, Position, Checkbox } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { Icon, Hint } from 'components';
+import { Button, Menu, MenuItem } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
 import intl from 'react-intl-universal';
+import { useFormikContext } from 'formik';
+
+import {
+  Icon,
+  Hint,
+  ExchangeRateInputGroup,
+  FormattedMessage as T,
+} from 'components';
 import {
   InputGroupCell,
   MoneyFieldCell,
   AccountsListFieldCell,
   CheckBoxFieldCell,
 } from 'components/DataTableCells';
-import { useFormikContext } from 'formik';
-import { ExchangeRateInputGroup } from 'components';
+import { CellType } from 'common';
+
 import { useCurrentOrganization } from 'hooks/state';
 import { useExpensesIsForeign } from './utils';
 
@@ -36,22 +43,26 @@ const ActionsCellRenderer = ({
   data,
   payload,
 }) => {
-  const onClickRemoveRole = () => {
+  const handleClickRemoveRole = () => {
     payload.removeRow(index);
   };
+  const exampleMenu = (
+    <Menu>
+      <MenuItem onClick={handleClickRemoveRole} text="Remove line" />
+    </Menu>
+  );
   return (
-    <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
+    <Popover2 content={exampleMenu} placement="left-start">
       <Button
-        icon={<Icon icon="times-circle" iconSize={14} />}
+        icon={<Icon icon={'more-13'} iconSize={13} />}
         iconSize={14}
-        className="ml2"
+        className="m12"
         minimal={true}
-        intent={Intent.DANGER}
-        onClick={onClickRemoveRole}
       />
-    </Tooltip>
+    </Popover2>
   );
 };
+ActionsCellRenderer.cellType = CellType.Button;
 
 /**
  * Landed cost header cell.
@@ -122,7 +133,6 @@ export function useExpenseFormTableColumns({ landedCost }) {
         Header: '',
         accessor: 'action',
         Cell: ActionsCellRenderer,
-        className: 'actions',
         disableSortBy: true,
         disableResizing: true,
         width: 45,
@@ -131,8 +141,6 @@ export function useExpenseFormTableColumns({ landedCost }) {
     [],
   );
 }
-;
-
 /**
  * Expense exchange rate input field.
  * @returns {JSX.Element}

src/containers/Purchases/PaymentMades/PaymentForm/components.js

@@ -29,40 +29,39 @@ export function usePaymentMadeEntriesTableColumns() {
   return React.useMemo(
     () => [
       {
-        Header: intl.get('Date'),
+        Header: 'Bill date',
         id: 'bill_date',
         accessor: 'bill_date',
         Cell: BillDateCell,
         disableSortBy: true,
-        width: 250,
-        className: 'bill_date',
+        width: 120,
       },
       {
         Header: intl.get('bill_number'),
         accessor: BillNumberAccessor,
         disableSortBy: true,
-        className: 'bill_number',
+        width: 120,
       },
       {
         Header: intl.get('bill_amount'),
         accessor: 'amount',
         Cell: MoneyTableCell,
         disableSortBy: true,
-        className: 'amount',
+        width: 150,
       },
       {
         Header: intl.get('amount_due'),
         accessor: 'due_amount',
         Cell: MoneyTableCell,
         disableSortBy: true,
-        className: 'due_amount',
+        width: 150,
       },
       {
         Header: intl.get('payment_amount'),
         accessor: 'payment_amount',
         Cell: MoneyFieldCell,
         disableSortBy: true,
-        className: 'payment_amount',
+        width: 150,
       },
     ],
     [],