From 460ee2718e049c700ab92e992bfc6fcd5ae7bddc Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 23 Sep 2021 15:39:49 +0200
Subject: [PATCH] BIG-5: add switching between compact and medium row size.

---
 .../ManualJournalActionsBar.js                | 24 ++++++++++++++
 .../CustomersLanding/CustomersActionsBar.js   | 30 ++++++++++++++++--
 .../ExpensesLanding/ExpenseActionsBar.js      | 27 +++++++++++++++-
 .../Bills/BillsLanding/BillsActionsBar.js     | 28 ++++++++++++++++-
 .../PaymentsLanding/PaymentMadeActionsBar.js  | 31 +++++++++++++++++--
 .../EstimatesLanding/EstimatesActionsBar.js   | 28 ++++++++++++++++-
 .../InvoicesLanding/InvoicesActionsBar.js     | 24 ++++++++++++++
 .../PaymentReceiveActionsBar.js               | 28 ++++++++++++++++-
 .../ReceiptsLanding/ReceiptActionsBar.js      | 26 ++++++++++++++++
 .../VendorsLanding/VendorActionsBar.js        | 25 ++++++++++++++-
 10 files changed, 262 insertions(+), 9 deletions(-)

diff --git a/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js b/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
index be2265a75..c75fc1a57 100644
--- a/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
+++ b/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
@@ -12,6 +12,7 @@ import { useHistory } from 'react-router-dom';
 import {
   AdvancedFilterPopover,
   DashboardFilterButton,
+  DashboardRowsHeightButton,
   FormattedMessage as T,
 } from 'components';
 
@@ -22,6 +23,8 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withManualJournalsActions from './withManualJournalsActions';
 import withManualJournals from './withManualJournals';
+import withSettingsActions from '../../Settings/withSettingsActions';
+import withSettings from '../../Settings/withSettings';
 
 import { If, DashboardActionViewsList } from 'components';
 
@@ -36,6 +39,12 @@ function ManualJournalActionsBar({
 
   // #withManualJournals
   manualJournalsFilterConditions,
+
+  // #withSettings
+  manualJournalsTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   // History context.
   const history = useHistory();
@@ -62,6 +71,11 @@ function ManualJournalActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('manual_journal', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -119,6 +133,12 @@ function ManualJournalActionsBar({
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={manualJournalsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
@@ -134,7 +154,11 @@ function ManualJournalActionsBar({
 export default compose(
   withDialogActions,
   withManualJournalsActions,
+  withSettingsActions,
   withManualJournals(({ manualJournalsTableState }) => ({
     manualJournalsFilterConditions: manualJournalsTableState.filterRoles,
   })),
+  withSettings(({ manualJournalsSettings }) => ({
+    manualJournalsTableSize: manualJournalsSettings?.tableSize,
+  })),
 )(ManualJournalActionsBar);
diff --git a/src/containers/Customers/CustomersLanding/CustomersActionsBar.js b/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
index d8ef13c27..f90fd24fa 100644
--- a/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
+++ b/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
@@ -8,16 +8,17 @@ import {
   Switch,
   Alignment,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
 import { useHistory } from 'react-router-dom';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
   Icon,
+  FormattedMessage as T,
   DashboardActionViewsList,
   AdvancedFilterPopover,
   DashboardFilterButton,
+  DashboardRowsHeightButton,
 } from 'components';
 
 import { useCustomersListContext } from './CustomersListProvider';
@@ -26,6 +27,8 @@ import { useRefreshCustomers } from 'hooks/query/customers';
 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
+import withSettingsActions from '../../Settings/withSettingsActions';
+import withSettings from '../../Settings/withSettings';
 
 import { compose } from 'utils';
 
@@ -43,6 +46,12 @@ function CustomerActionsBar({
 
   // #withAlertActions
   openAlert,
+
+  // #withSettings
+  customersTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   // History context.
   const history = useHistory();
@@ -74,7 +83,14 @@ function CustomerActionsBar({
   };
 
   // Handle click a refresh customers
-  const handleRefreshBtnClick = () => { refresh(); };
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+  
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('customer', 'tableSize', size);
+  };
 
   return (
     <DashboardActionsBar>
@@ -130,6 +146,12 @@ function CustomerActionsBar({
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={customersTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
         <Switch
           labelElement={<T id={'inactive'} />}
           defaultChecked={accountsInactiveMode}
@@ -149,10 +171,14 @@ function CustomerActionsBar({
 
 export default compose(
   withCustomersActions,
+  withSettingsActions,
   withCustomers(({ customersSelectedRows, customersTableState }) => ({
     customersSelectedRows,
     accountsInactiveMode: customersTableState.inactiveMode,
     customersFilterConditions: customersTableState.filterRoles,
   })),
+  // withSettings(({  }) => ({
+  //   customersTableSize:
+  // })),
   withAlertActions,
 )(CustomerActionsBar);
diff --git a/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js b/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
index dc44b0f49..75b10b937 100644
--- a/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
+++ b/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
@@ -9,16 +9,17 @@ import {
   Alignment,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import {
   If,
+  DashboardRowsHeightButton,
   DashboardActionViewsList,
   DashboardFilterButton,
   AdvancedFilterPopover,
+  FormattedMessage as T,
 } from 'components';
 
 import { useRefreshExpenses } from 'hooks/query/expenses';
@@ -27,6 +28,9 @@ import { useExpensesListContext } from './ExpensesListProvider';
 import withExpensesActions from './withExpensesActions';
 import withExpenses from './withExpenses';
 
+import withSettingsActions from '../../Settings/withSettingsActions';
+import withSettings from '../../Settings/withSettings';
+
 import { compose } from 'utils';
 
 /**
@@ -38,6 +42,12 @@ function ExpensesActionsBar({
 
   // #withExpenses
   expensesFilterConditions,
+
+  // #withSettings
+  expensesTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   // History context.
   const history = useHistory();
@@ -67,6 +77,11 @@ function ExpensesActionsBar({
   const handleRefreshBtnClick = () => {
     refresh();
   };
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('expense', 'tableSize', size);
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -124,6 +139,12 @@ function ExpensesActionsBar({
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={expensesTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
@@ -139,7 +160,11 @@ function ExpensesActionsBar({
 export default compose(
   withDialogActions,
   withExpensesActions,
+  withSettingsActions,
   withExpenses(({ expensesTableState }) => ({
     expensesFilterConditions: expensesTableState.filterRoles,
   })),
+  withSettings(({ expenseSettings }) => ({
+    expensesTableSize: expenseSettings?.tableSize,
+  })),
 )(ExpensesActionsBar);
diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js b/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
index 385378ce0..403757ae8 100644
--- a/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
+++ b/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
@@ -10,18 +10,22 @@ import {
 } from '@blueprintjs/core';
 
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
+  FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
   AdvancedFilterPopover,
+  DashboardRowsHeightButton,
 } from 'components';
 
 import withBillsActions from './withBillsActions';
 import withBills from './withBills';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
+
 import { useBillsListContext } from './BillsListProvider';
 import { useRefreshBills } from 'hooks/query/bills';
 import { compose } from 'utils';
@@ -35,6 +39,12 @@ function BillActionsBar({
 
   // #withBills
   billsConditionsRoles,
+
+  // #withSettings
+  billsTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   const history = useHistory();
 
@@ -60,6 +70,11 @@ function BillActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('bill', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -116,6 +131,13 @@ function BillActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
         />
+
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={billsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
@@ -130,7 +152,11 @@ function BillActionsBar({
 
 export default compose(
   withBillsActions,
+  withSettingsActions,
   withBills(({ billsTableState }) => ({
     billsConditionsRoles: billsTableState.filterRoles,
   })),
+  withSettings(({ billPaymentSettings }) => ({
+    billsTableSize: billPaymentSettings?.tableSize, // fix to bill
+  })),
 )(BillActionsBar);
diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
index 013f66f6c..fbc79001a 100644
--- a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
+++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
@@ -10,19 +10,23 @@ import {
 } from '@blueprintjs/core';
 
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
+  FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
   AdvancedFilterPopover,
+  DashboardRowsHeightButton,
 } from 'components';
 
 import withPaymentMade from './withPaymentMade';
 import withPaymentMadeActions from './withPaymentMadeActions';
 
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
+
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import { useRefreshPaymentMades } from 'hooks/query/paymentMades';
 
@@ -36,7 +40,13 @@ function PaymentMadeActionsBar({
   setPaymentMadesTableState,
 
   // #withPaymentMades
-  paymentMadesFilterConditions
+  paymentMadesFilterConditions,
+
+  // #withSettings
+  paymentMadesTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   const history = useHistory();
 
@@ -60,6 +70,12 @@ function PaymentMadeActionsBar({
   const handleRefreshBtnClick = () => {
     refresh();
   };
+  
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('payment_made', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -114,6 +130,13 @@ function PaymentMadeActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
         />
+
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={paymentMadesTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
@@ -128,7 +151,11 @@ function PaymentMadeActionsBar({
 
 export default compose(
   withPaymentMadeActions,
+  withSettingsActions,
   withPaymentMade(({ paymentMadesTableState }) => ({
     paymentMadesFilterConditions: paymentMadesTableState.filterRoles,
   })),
+  withSettings(({ billPaymentSettings }) => ({
+    paymentMadesTableSize: billPaymentSettings?.tableSize,
+  })),
 )(PaymentMadeActionsBar);
diff --git a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
index eb550c448..ea754ee67 100644
--- a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
+++ b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
@@ -9,19 +9,23 @@ import {
   Alignment,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'components';
 
 import {
+  FormattedMessage as T,
   AdvancedFilterPopover,
   If,
   DashboardActionViewsList,
   DashboardFilterButton,
+  DashboardRowsHeightButton,
 } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import withEstimatesActions from './withEstimatesActions';
 import withEstimates from './withEstimates';
 
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
+
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { useRefreshEstimates } from 'hooks/query/estimates';
 
@@ -36,6 +40,12 @@ function EstimateActionsBar({
 
   // #withEstimates
   estimatesFilterRoles,
+
+  // #withSettings
+  estimatesTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   const history = useHistory();
 
@@ -61,6 +71,11 @@ function EstimateActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('estimate', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -118,7 +133,14 @@ function EstimateActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
         />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={estimatesTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
+
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
           className={Classes.MINIMAL}
@@ -132,7 +154,11 @@ function EstimateActionsBar({
 
 export default compose(
   withEstimatesActions,
+  withSettingsActions,
   withEstimates(({ estimatesTableState }) => ({
     estimatesFilterRoles: estimatesTableState.filterRoles,
   })),
+  withSettings(({ estimatesSettings }) => ({
+    estimatesTableSize: estimatesSettings?.tableSize,
+  })),
 )(EstimateActionsBar);
diff --git a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
index 4df9c507a..f78af696d 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
@@ -13,6 +13,7 @@ import {
   FormattedMessage as T,
   AdvancedFilterPopover,
   DashboardFilterButton,
+  DashboardRowsHeightButton,
 } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -22,6 +23,8 @@ import { If, DashboardActionViewsList } from 'components';
 import { useRefreshInvoices } from 'hooks/query/invoices';
 import { useInvoicesListContext } from './InvoicesListProvider';
 
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
 import withInvoiceActions from './withInvoiceActions';
 import withInvoices from './withInvoices';
 
@@ -36,6 +39,12 @@ function InvoiceActionsBar({
 
   // #withInvoices
   invoicesFilterRoles,
+
+  // #withSettings
+  invoicesTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   const history = useHistory();
 
@@ -60,6 +69,11 @@ function InvoiceActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('invoice', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -114,6 +128,12 @@ function InvoiceActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
         />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={invoicesTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
@@ -128,7 +148,11 @@ function InvoiceActionsBar({
 
 export default compose(
   withInvoiceActions,
+  withSettingsActions,
   withInvoices(({ invoicesTableState }) => ({
     invoicesFilterRoles: invoicesTableState.filterRoles,
   })),
+  withSettings(({ invoiceSettings }) => ({
+    invoicesTableSize: invoiceSettings?.tableSize,
+  })),
 )(InvoiceActionsBar);
diff --git a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
index 8d36ff8c5..02a449b6c 100644
--- a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
+++ b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
@@ -14,6 +14,7 @@ import {
   DashboardFilterButton,
   AdvancedFilterPopover,
   FormattedMessage as T,
+  DashboardRowsHeightButton,
 } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -23,6 +24,9 @@ import { If, DashboardActionViewsList } from 'components';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withPaymentReceives from './withPaymentReceives';
 
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
+
 import { compose } from 'utils';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 import { useRefreshPaymentReceive } from 'hooks/query/paymentReceives';
@@ -35,7 +39,13 @@ function PaymentReceiveActionsBar({
   setPaymentReceivesTableState,
 
   // #withPaymentReceives
-  paymentFilterConditions
+  paymentFilterConditions,
+
+  // #withSettings
+  paymentReceivesTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   // History context.
   const history = useHistory();
@@ -61,6 +71,11 @@ function PaymentReceiveActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('payment_receive', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -115,6 +130,13 @@ function PaymentReceiveActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
         />
+
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={paymentReceivesTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
@@ -129,8 +151,12 @@ function PaymentReceiveActionsBar({
 
 export default compose(
   withPaymentReceivesActions,
+  withSettingsActions,
   withPaymentReceives(({ paymentReceivesTableState }) => ({
     paymentReceivesTableState,
     paymentFilterConditions: paymentReceivesTableState.filterRoles,
   })),
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceivesTableSize: paymentReceiveSettings?.tableSize,
+  })),
 )(PaymentReceiveActionsBar);
diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
index 51867c83c..ad365a3c2 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
@@ -14,6 +14,7 @@ import {
   AdvancedFilterPopover,
   DashboardFilterButton,
   FormattedMessage as T,
+  DashboardRowsHeightButton,
 } from 'components';
 
 import { If, DashboardActionViewsList } from 'components';
@@ -22,6 +23,9 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withReceiptsActions from './withReceiptsActions';
 import withReceipts from './withReceipts';
 
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
+
 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useRefreshReceipts } from 'hooks/query/receipts';
 import { compose } from 'utils';
@@ -35,6 +39,12 @@ function ReceiptActionsBar({
 
   // #withReceipts
   receiptsFilterConditions,
+
+  // #withSettings
+  receiptsTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   const history = useHistory();
 
@@ -60,6 +70,11 @@ function ReceiptActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('receipt', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -117,6 +132,13 @@ function ReceiptActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
         />
+
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={receiptsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
@@ -131,7 +153,11 @@ function ReceiptActionsBar({
 
 export default compose(
   withReceiptsActions,
+  withSettingsActions,
   withReceipts(({ receiptTableState }) => ({
     receiptsFilterConditions: receiptTableState.filterRoles,
   })),
+  withSettings(({ receiptSettings }) => ({
+    receiptsTableSize: receiptSettings?.tableSize,
+  })),
 )(ReceiptActionsBar);
diff --git a/src/containers/Vendors/VendorsLanding/VendorActionsBar.js b/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
index 6fb00f48e..a2a322567 100644
--- a/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
+++ b/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
@@ -8,14 +8,15 @@ import {
   Switch,
   Alignment,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import {
   If,
+  FormattedMessage as T,
   DashboardActionViewsList,
   DashboardFilterButton,
+  DashboardRowsHeightButton,
   AdvancedFilterPopover,
 } from 'components';
 
@@ -26,6 +27,9 @@ import { useHistory } from 'react-router-dom';
 import withVendorsActions from './withVendorsActions';
 import withVendors from './withVendors';
 
+import withSettingsActions from '../../Settings/withSettingsActions';
+import withSettings from '../../Settings/withSettings';
+
 import { compose } from 'utils';
 
 /**
@@ -38,6 +42,12 @@ function VendorActionsBar({
   // #withVendorActions
   setVendorsTableState,
   vendorsInactiveMode,
+
+  // #withSettings
+  vendorsTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   const history = useHistory();
 
@@ -68,6 +78,9 @@ function VendorActionsBar({
     refresh();
   };
 
+  const handleTableRowSizeChange = (size) => {
+    addSetting('vendor', 'tableSize', size);
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -117,6 +130,12 @@ function VendorActionsBar({
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={vendorsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
         <Switch
           labelElement={<T id={'inactive'} />}
           defaultChecked={vendorsInactiveMode}
@@ -136,8 +155,12 @@ function VendorActionsBar({
 
 export default compose(
   withVendorsActions,
+  withSettingsActions,
   withVendors(({ vendorsTableState }) => ({
     vendorsInactiveMode: vendorsTableState.inactiveMode,
     vendorsFilterConditions: vendorsTableState.filterRoles,
   })),
+  // withSettings(({  }) => ({
+  //   vendorsTableSize:
+  // })),
 )(VendorActionsBar);