BiG-5: Complete, add switch small and medium table row size.

src/containers/Vendors/VendorsLanding/VendorActionsBar.js

@@ -79,7 +79,7 @@ function VendorActionsBar({
   };
 
   const handleTableRowSizeChange = (size) => {
-    addSetting('vendor', 'tableSize', size);
+    addSetting('vendors', 'tableSize', size);
   };
   return (
     <DashboardActionsBar>
@@ -160,7 +160,7 @@ export default compose(
     vendorsInactiveMode: vendorsTableState.inactiveMode,
     vendorsFilterConditions: vendorsTableState.filterRoles,
   })),
-  // withSettings(({  }) => ({
-  //   vendorsTableSize:
-  // })),
+  withSettings(({ vendorsSettings }) => ({
+    vendorsTableSize: vendorsSettings?.tableSize,
+  })),
 )(VendorActionsBar);

src/containers/Vendors/VendorsLanding/VendorsTable.js

@@ -17,6 +17,7 @@ import withVendors from './withVendors';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../Settings/withSettings';
 
 import { ActionsMenu, useVendorsTableColumns } from './components';
 
@@ -40,6 +41,9 @@ function VendorsTable({
 
   // #withDialogActions
   openDialog,
+
+  // #withSettings
+  vendorsTableSize,
 }) {
   // Vendors list context.
   const {
@@ -141,6 +145,7 @@ function VendorsTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={vendorsTableSize}
         payload={{
           onEdit: handleEditVendor,
           onDelete: handleDeleteVendor,
@@ -161,4 +166,7 @@ export default compose(
   withDrawerActions,
 
   withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
+  withSettings(({ vendorsSettings }) => ({
+    vendorsTableSize: vendorsSettings?.tableSize,
+  })),
 )(VendorsTable);

src/containers/Vendors/VendorsLanding/components.js

@@ -10,7 +10,7 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { Icon, Money, If } from 'components';
+import { Icon, Money, If, AvaterCell } from 'components';
 import { safeCallback, firstLettersArgs } from 'utils';
 
 /**
@@ -113,7 +113,7 @@ export function useVendorsTableColumns() {
       {
         id: 'avatar',
         Header: '',
-        accessor: AvatarAccessor,
+        Cell: AvaterCell,
         className: 'avatar',
         width: 45,
         disableResizing: true,