fix(DataTable): cells type.

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}