fix(Datatable): actions cell align center.

src/components/Datatable/TableCell.js

@@ -67,6 +67,7 @@ export default function TableCell({ cell, row, index }) {
           'is-text-overview': cell.column.textOverview,
           clickable: cell.column.clickable,
           'align-right': cell.column.align === 'right',
+          'align-center': cell.column.align === 'center',
           [`td-${cell.column.id}`]: cell.column.id,
           [`td-${cellType}-type`]: !!cellType,
         }),

src/containers/Entries/components.js

@@ -67,11 +67,6 @@ export function TotalCell({ payload: { currencyCode }, value }) {
   return <span>{formattedAmount(value, currencyCode, { noZero: true })}</span>;
 }
 
-// Index table cell.
-export function IndexTableCell({ row: { index } }) {
-  return <span>{index + 1}</span>;
-}
-
 /**
  * Landed cost header cell.
  */
@@ -161,6 +156,7 @@ export function useEditableItemsEntriesColumns({ landedCost }) {
         disableSortBy: true,
         disableResizing: true,
         width: 45,
+        align: Align.Center,
       },
     ],
     [],

src/containers/Expenses/ExpenseForm/components.js

@@ -16,7 +16,7 @@ import {
   AccountsListFieldCell,
   CheckBoxFieldCell,
 } from 'components/DataTableCells';
-import { CellType } from 'common';
+import { CellType, Align } from 'common';
 
 import { useCurrentOrganization } from 'hooks/state';
 import { useExpensesIsForeign } from './utils';
@@ -106,14 +106,13 @@ export function useExpenseFormTableColumns({ landedCost }) {
         Cell: MoneyFieldCell,
         disableSortBy: true,
         width: 40,
-        className: 'amount',
+        align: Align.Right,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
         Cell: InputGroupCell,
         disableSortBy: true,
-        className: 'description',
         width: 100,
       },
       ...(landedCost
@@ -125,7 +124,7 @@ export function useExpenseFormTableColumns({ landedCost }) {
               disableSortBy: true,
               disableResizing: true,
               width: 100,
-              className: 'landed-cost',
+              align: Align.Center,
             },
           ]
         : []),
@@ -136,6 +135,7 @@ export function useExpenseFormTableColumns({ landedCost }) {
         disableSortBy: true,
         disableResizing: true,
         width: 45,
+        align: Align.Center,
       },
     ],
     [],
@@ -163,3 +163,4 @@ export function ExpensesExchangeRateInputField({ ...props }) {
     />
   );
 }
+ExpensesExchangeRateInputField.cellType = CellType.Field;

src/containers/WarehouseTransfers/utils.js

@@ -4,6 +4,7 @@ import { find, get } from 'lodash';
 import { Button, Menu, MenuItem } from '@blueprintjs/core';
 import { Popover2 } from '@blueprintjs/popover2';
 
+import { Align, CellType } from 'common';
 import { MoneyFieldCell, Icon, T } from 'components';
 import { InputGroupCell, ItemsListCell } from 'components/DataTableCells';
 
@@ -17,9 +18,6 @@ export function IndexTableCell({ row: { index } }) {
  */
 export function ActionsCellRenderer({
   row: { index },
-  column: { id },
-  cell: { value },
-  data,
   payload: { removeRow },
 }) {
   const onRemoveRole = () => {
@@ -43,6 +41,7 @@ export function ActionsCellRenderer({
     </Popover2>
   );
 }
+ActionsCellRenderer.cellType = CellType.Button;
 
 function SourceWarehouseAccessorCell({ row: { original }, payload }) {
   // Ignore display zero if the item not selected yet.
@@ -97,7 +96,7 @@ export const useWarehouseTransferTableColumns = () => {
         accessor: 'source_warehouse',
         disableSortBy: true,
         Cell: SourceWarehouseAccessorCell,
-        align: 'right',
+        align: Align.Right,
         width: 100,
       },
       {
@@ -106,7 +105,7 @@ export const useWarehouseTransferTableColumns = () => {
         accessor: 'destination_warehouse',
         Cell: DistentionWarehouseAccessorCell,
         disableSortBy: true,
-        align: 'right',
+        align: Align.Right,
         width: 100,
       },
       {
@@ -114,14 +113,14 @@ export const useWarehouseTransferTableColumns = () => {
         accessor: 'quantity',
         Cell: MoneyFieldCell,
         disableSortBy: true,
-        align: 'right',
+        align: Align.Right,
         width: 100,
       },
       {
         Header: intl.get('warehouse_transfer.column.cost_price'),
         accessor: 'cost',
         disableSortBy: true,
-        align: 'right',
+        align: Align.Right,
         width: 80,
       },
       {
@@ -131,8 +130,9 @@ export const useWarehouseTransferTableColumns = () => {
         disableSortBy: true,
         disableResizing: true,
         width: 45,
+        align: Align.Center,
       },
     ],
     [],
   );
-};
+};