feat(ExpenseForm): optimize style fo expense form.

src/containers/Expenses/ExpenseForm/components.js

@@ -62,14 +62,6 @@ const LandedCostHeaderCell = () => {
   );
 };
 
-/**
- * Amount footer cell.
- */
-function AmountFooterCell({ payload: { currencyCode }, rows }) {
-  const total = safeSumBy(rows, 'original.amount');
-  return <span>{formattedAmount(total, currencyCode)}</span>;
-}
-
 /**
  * Expense amount header cell.
  */
@@ -77,34 +69,17 @@ export function ExpenseAmountHeaderCell({ payload: { currencyCode } }) {
   return intl.get('amount_currency', { currency: currencyCode });
 }
 
-/**
- * Expense account footer cell.
- */
-function ExpenseAccountFooterCell() {
-  return <T id={'total'} />;
-}
-
 /**
  * Retrieve expense form table entries columns.
  */
 export function useExpenseFormTableColumns({ landedCost }) {
   return React.useMemo(
     () => [
-      {
-        Header: '#',
-        accessor: 'index',
-        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
-        className: 'index',
-        width: 40,
-        disableResizing: true,
-        disableSortBy: true,
-      },
       {
         Header: ExpenseCategoryHeaderCell,
         id: 'expense_account_id',
         accessor: 'expense_account_id',
         Cell: AccountsListFieldCell,
-        Footer: ExpenseAccountFooterCell,
         className: 'expense_account_id',
         disableSortBy: true,
         width: 40,
@@ -115,7 +90,6 @@ export function useExpenseFormTableColumns({ landedCost }) {
         Header: ExpenseAmountHeaderCell,
         accessor: 'amount',
         Cell: MoneyFieldCell,
-        Footer: AmountFooterCell,
         disableSortBy: true,
         width: 40,
         className: 'amount',