Merge branch 'master' of https://github.com/abouolia/Bigcapital

client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js

@@ -2,10 +2,12 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { DataTable, DashboardContentTable } from 'components';
+import { TABLES } from 'common/tables';
 
 import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import { ActionsMenu } from './components';
 
 import withManualJournals from './withManualJournals';
 import withManualJournalsActions from './withManualJournalsActions';
@@ -13,8 +15,8 @@ import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { useManualJournalsContext } from './ManualJournalsListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
 import { useManualJournalsColumns } from './utils';
-import { ActionsMenu } from './components';
 
 import { compose } from 'utils';
 
@@ -78,6 +80,10 @@ function ManualJournalsDataTable({
     openDrawer('journal-drawer', { manualJournalId: cell.row.original.id });
   };
 
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.MANUAL_JOURNALS);
+
   // Handle fetch data once the page index, size or sort by of the table change.
   const handleFetchData = React.useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -101,7 +107,6 @@ function ManualJournalsDataTable({
         noInitialFetch={true}
         columns={columns}
         data={manualJournals}
-        initialState={manualJournalsTableState}
         manualSortBy={true}
         selectionColumn={true}
         expandable={true}
@@ -118,6 +123,8 @@ function ManualJournalsDataTable({
         ContextMenu={ActionsMenu}
         onFetchData={handleFetchData}
         onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
         payload={{
           onDelete: handleDeleteJournal,
           onPublish: handlePublishJournal,

client/src/containers/Accounts/AccountsDataTable.js

@@ -5,18 +5,19 @@ import { compose } from 'utils';
 
 import { useAccountsTableColumns, rowClassNames } from './utils';
 import { ActionsMenu } from './components';
+import { TABLES } from 'common/tables';
 
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
 import { useAccountsChartContext } from './AccountsChartProvider';
+import { useMemorizedColumnsWidths } from '../../hooks';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { useMemorizedColumnsWidths } from '../../hooks';
-
 /**
  * Accounts data-table.
  */
@@ -51,12 +52,6 @@ function AccountsDataTable({
     openAlert('account-inactivate', { accountId: account.id });
   };
 
-  // Handle select accounts datatable rows.
-  //   const handleSelectedRowsChange = (selectedRows) => {
-  //     const selectedRowsIds = selectedRows.map((r) => r.id);
-  //     setSelectedRowsAccounts(selectedRowsIds);
-  //   };
-
   // Handle edit account action.
   const handleEditAccount = (account) => {
     openDialog('account-form', { action: 'edit', id: account.id });
@@ -81,7 +76,7 @@ function AccountsDataTable({
   };
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
-    useMemorizedColumnsWidths('accounts');
+    useMemorizedColumnsWidths(TABLES.ACCOUNTS);
 
   return (
     <DataTable

client/src/containers/Customers/CustomersLanding/CustomersList.js

@@ -24,18 +24,14 @@ function CustomersList({
   customersTableStateChanged,
 
   // #withCustomersActions
-  setCustomersTableState,
+  resetCustomersTableState,
 }) {
   // Resets the accounts table state once the page unmount.
   useEffect(
     () => () => {
-      setCustomersTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetCustomersTableState();
     },
-    [setCustomersTableState],
+    [resetCustomersTableState],
   );
 
   return (

client/src/containers/Customers/CustomersLanding/CustomersTable.js

@@ -5,7 +5,9 @@ import CustomersEmptyStatus from './CustomersEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
+import { TABLES } from 'common/tables';
 import { DataTable, DashboardContentTable } from 'components';
+import { ActionsMenu, useCustomersTableColumns } from './components';
 
 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
@@ -14,7 +16,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { useCustomersListContext } from './CustomersListProvider';
-import { ActionsMenu, useCustomersTableColumns } from './components';
+import { useMemorizedColumnsWidths } from 'hooks';
 
 import { compose } from 'utils';
 
@@ -51,6 +53,10 @@ function CustomersTable({
     isCustomersFetching,
   } = useCustomersListContext();
 
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.CUSTOMERS);
+
   // Handle fetch data once the page index, size or sort by of the table change.
   const handleFetchData = React.useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -110,7 +116,6 @@ function CustomersTable({
         noInitialFetch={true}
         columns={columns}
         data={customers}
-        initialState={customersTableState}
         loading={isCustomersLoading}
         headerLoading={isCustomersLoading}
         progressBarLoading={isCustomersFetching}
@@ -128,6 +133,8 @@ function CustomersTable({
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
         payload={{
           onDelete: handleCustomerDelete,
           onEdit: handleCustomerEdit,

client/src/containers/Customers/CustomersLanding/withCustomersActions.js

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
 import {
-  setCustomersTableState
+  setCustomersTableState,
+  resetCustomersTableState
 } from 'store/customers/customers.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
   setCustomersTableState: (state) => dispatch(setCustomersTableState(state)),
+  resetCustomersTableState: () => dispatch(resetCustomersTableState()),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js

@@ -3,6 +3,8 @@ import { useHistory } from 'react-router-dom';
 
 import { compose } from 'utils';
 import { useExpensesListContext } from './ExpensesListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
+import { TABLES } from 'common/tables';
 
 import { DashboardContentTable } from 'components';
 import DataTable from 'components/DataTable';
@@ -45,6 +47,10 @@ function ExpensesDataTable({
   // Expenses table columns.
   const columns = useExpensesTableColumns();
 
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.EXPENSES);
+
   // Handle fetch data of manual jouranls datatable.
   const handleFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -111,6 +117,8 @@ function ExpensesDataTable({
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}
         onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
         payload={{
           onPublish: handlePublishExpense,
           onDelete: handleDeleteExpense,

client/src/containers/Expenses/ExpensesLanding/ExpensesList.js

@@ -24,18 +24,14 @@ function ExpensesList({
   expensesTableStateChanged,
 
   // #withExpensesActions
-  setExpensesTableState,
+  resetExpensesTableState,
 }) {
   // Resets the accounts table state once the page unmount.
   useEffect(
     () => () => {
-      setExpensesTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetExpensesTableState();
     },
-    [setExpensesTableState],
+    [resetExpensesTableState],
   );
 
   return (

client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js

@@ -1,14 +1,18 @@
 import React, { useCallback } from 'react';
-import { DataTable } from 'components';
-import { useInventoryAdjustmentsColumns, ActionsMenu } from './components';
 import intl from 'react-intl-universal';
 
+import { DataTable } from 'components';
+import { TABLES } from 'common/tables';
+
+import { useInventoryAdjustmentsColumns, ActionsMenu } from './components';
+import { useMemorizedColumnsWidths } from 'hooks';
+import { useInventoryAdjustmentsContext } from './InventoryAdjustmentsProvider';
+
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withInventoryAdjustmentActions from './withInventoryAdjustmentActions';
-
-import { useInventoryAdjustmentsContext } from './InventoryAdjustmentsProvider';
 import withInventoryAdjustments from './withInventoryAdjustments';
+
 import { compose } from 'utils';
 
 /**
@@ -55,6 +59,9 @@ function InventoryAdjustmentDataTable({
   // Inventory adjustments columns.
   const columns = useInventoryAdjustmentsColumns();
 
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.INVENTORY_ADJUSTMENTS);
+
   // Handle the table fetch data once states changing.
   const handleDataTableFetchData = useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -79,7 +86,6 @@ function InventoryAdjustmentDataTable({
       loading={isAdjustmentsLoading}
       headerLoading={isAdjustmentsLoading}
       progressBarLoading={isAdjustmentsFetching}
-      initialState={inventoryAdjustmentTableState}
       noInitialFetch={true}
       onFetchData={handleDataTableFetchData}
       manualSortBy={true}
@@ -89,6 +95,8 @@ function InventoryAdjustmentDataTable({
       autoResetSortBy={false}
       autoResetPage={false}
       onCellClick={handleCellClick}
+      initialColumnsWidths={initialColumnsWidths}
+      onColumnResizing={handleColumnResizing}
       payload={{
         onDelete: handleDeleteAdjustment,
         onPublish: handlePublishInventoryAdjustment,

client/src/containers/Items/ItemsDataTable.js

@@ -8,6 +8,8 @@ import ItemsEmptyStatus from './ItemsEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
+import { TABLES } from 'common/tables';
+
 import withItems from 'containers/Items/withItems';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -16,6 +18,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { useItemsListContext } from './ItemsListProvider';
 import { useItemsTableColumns, ItemsActionMenuList } from './components';
+import { useMemorizedColumnsWidths } from 'hooks';
 import { compose } from 'utils';
 
 /**
@@ -55,6 +58,10 @@ function ItemsDataTable({
     inactive: !row.original.active,
   });
 
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.ITEMS);
+
   // Handle fetch data once the page index, size or sort by of the table change.
   const handleFetchData = React.useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -117,7 +124,6 @@ function ItemsDataTable({
       <DataTable
         columns={columns}
         data={items}
-        initialState={itemsTableState}
         loading={isItemsLoading}
         headerLoading={isItemsLoading}
         progressBarLoading={isItemsFetching}
@@ -138,6 +144,8 @@ function ItemsDataTable({
         ContextMenu={ItemsActionMenuList}
         onFetchData={handleFetchData}
         onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
         payload={{
           onDeleteItem: handleDeleteItem,
           onEditItem: handleEditItem,

client/src/containers/Purchases/Bills/BillsLanding/BillsList.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DashboardContentTable, DashboardPageContent } from 'components';
+import { DashboardPageContent } from 'components';
 
 import 'style/pages/Bills/List.scss';
 
@@ -24,18 +24,14 @@ function BillsList({
   billsTableStateChanged,
 
   // #withBillsActions
-  setBillsTableState,
+  resetBillsTableState,
 }) {
   // Resets the accounts table state once the page unmount.
   useEffect(
     () => () => {
-      setBillsTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetBillsTableState();
     },
-    [setBillsTableState],
+    [resetBillsTableState],
   );
 
   return (

client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { compose } from 'utils';
-
 import DataTable from 'components/DataTable';
+
+import { TABLES } from 'common/tables';
 import { DashboardContentTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
@@ -15,8 +15,12 @@ import withBillActions from './withBillsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
 import { useBillsTableColumns, ActionsMenu } from './components';
 import { useBillsListContext } from './BillsListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
+
+import { compose } from 'utils';
 
 /**
  * Bills transactions datatable.
@@ -92,39 +96,44 @@ function BillsDataTable({
     openDrawer('bill-drawer', { billId: cell.row.original.id });
   };
 
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.BILLS);
+
   if (isEmptyStatus) {
     return <BillsEmptyStatus />;
   }
 
   return (
     <DashboardContentTable>
-    <DataTable
-      columns={columns}
-      data={bills}
-      initialState={billsTableState}
-      loading={isBillsLoading}
-      headerLoading={isBillsLoading}
-      progressBarLoading={isBillsFetching}
-      onFetchData={handleFetchData}
-      manualSortBy={true}
-      selectionColumn={true}
-      noInitialFetch={true}
-      sticky={true}
-      pagination={true}
-      pagesCount={pagination.pagesCount}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      ContextMenu={ActionsMenu}
-      onCellClick={handleCellClick}
-      payload={{
-        onDelete: handleDeleteBill,
-        onEdit: handleEditBill,
-        onOpen: handleOpenBill,
-        onQuick: handleQuickPaymentMade,
-        onAllocateLandedCost: handleAllocateLandedCost,
-        onViewDetails: handleViewDetailBill,
-      }}
-    />
+      <DataTable
+        columns={columns}
+        data={bills}
+        loading={isBillsLoading}
+        headerLoading={isBillsLoading}
+        progressBarLoading={isBillsFetching}
+        onFetchData={handleFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        payload={{
+          onDelete: handleDeleteBill,
+          onEdit: handleEditBill,
+          onOpen: handleOpenBill,
+          onQuick: handleQuickPaymentMade,
+          onAllocateLandedCost: handleAllocateLandedCost,
+          onViewDetails: handleViewDetailBill,
+        }}
+      />
     </DashboardContentTable>
   );
 }

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js

@@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom';
 
 import { compose } from 'utils';
 
+import { TABLES } from 'common/tables';
 import { DataTable, DashboardContentTable } from 'components';
 
 import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
@@ -15,8 +16,10 @@ import withCurrentOrganization from 'containers/Organization/withCurrentOrganiza
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
 import { usePaymentMadesTableColumns, ActionsMenu } from './components';
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
 
 /**
  * Payment made datatable transactions.
@@ -71,6 +74,10 @@ function PaymentMadesTable({
     });
   };
 
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.PAYMENT_MADES);
+
   // Handle datatable fetch data once the table state change.
   const handleDataTableFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -89,7 +96,6 @@ function PaymentMadesTable({
       <DataTable
         columns={columns}
         data={paymentMades}
-        initialState={paymentMadesTableState}
         onFetchData={handleDataTableFetchData}
         loading={isPaymentsLoading}
         headerLoading={isPaymentsLoading}
@@ -106,6 +112,8 @@ function PaymentMadesTable({
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}
         onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
         payload={{
           onEdit: handleEditPaymentMade,
           onDelete: handleDeletePaymentMade,

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js

@@ -1,8 +1,6 @@
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { compose } from 'utils';
-
 import { DataTable, DashboardContentTable } from 'components';
 import EstimatesEmptyStatus from './EstimatesEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
@@ -14,7 +12,11 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { useEstimatesListContext } from './EstimatesListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
 import { ActionsMenu, useEstiamtesTableColumns } from './components';
+import { TABLES } from 'common/tables';
+
+import { compose } from 'utils';
 
 /**
  * Estimates datatable.
@@ -89,6 +91,11 @@ function EstimatesDataTable({
   const handleCellClick = (cell, event) => {
     openDrawer('estimate-detail-drawer', { estimateId: cell.row.original.id });
   };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.ESTIMATES);
+
   // Handles fetch data.
   const handleFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -126,6 +133,8 @@ function EstimatesDataTable({
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}
         onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
         payload={{
           onApprove: handleApproveEstimate,
           onEdit: handleEditEstimate,

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js

@@ -3,8 +3,10 @@ import { useHistory } from 'react-router-dom';
 
 import InvoicesEmptyStatus from './InvoicesEmptyStatus';
 
-import { compose } from 'utils';
 import { DataTable, DashboardContentTable } from 'components';
+import { TABLES } from 'common/tables';
+import { useMemorizedColumnsWidths } from 'hooks';
+
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
@@ -18,6 +20,8 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import { useInvoicesTableColumns, ActionsMenu } from './components';
 import { useInvoicesListContext } from './InvoicesListProvider';
 
+import { compose } from 'utils';
+
 /**
  * Invoices datatable.
  */
@@ -85,6 +89,11 @@ function InvoicesDataTable({
   const handleCellClick = (cell, event) => {
     openDrawer('invoice-detail-drawer', { invoiceId: cell.row.original.id });
   };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.INVOICES);
+
   // Handles fetch data once the table state change.
   const handleDataTableFetchData = useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -107,7 +116,6 @@ function InvoicesDataTable({
       <DataTable
         columns={columns}
         data={invoices}
-        initialState={invoicesTableState}
         loading={isInvoicesLoading}
         headerLoading={isInvoicesLoading}
         progressBarLoading={isInvoicesFetching}
@@ -125,6 +133,8 @@ function InvoicesDataTable({
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}
         onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
         payload={{
           onDelete: handleDeleteInvoice,
           onDeliver: handleDeliverInvoice,

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { compose } from 'utils';
+import { TABLES } from 'common/tables';
 
 import { DataTable, DashboardContentTable } from 'components';
 import PaymentReceivesEmptyStatus from './PaymentReceivesEmptyStatus';
@@ -12,8 +13,10 @@ import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
 import { usePaymentReceivesColumns, ActionsMenu } from './components';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
 
 /**
  * Payment receives datatable.
@@ -73,6 +76,10 @@ function PaymentReceivesDataTable({
     });
   };
 
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.PAYMENT_RECEIVES);
+
   // Handle datatable fetch once the table's state changing.
   const handleDataTableFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -95,7 +102,6 @@ function PaymentReceivesDataTable({
       <DataTable
         columns={columns}
         data={paymentReceives}
-        initialState={paymentReceivesTableState}
         loading={isPaymentReceivesLoading}
         headerLoading={isPaymentReceivesLoading}
         progressBarLoading={isPaymentReceivesFetching}
@@ -112,6 +118,8 @@ function PaymentReceivesDataTable({
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}
         onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
         payload={{
           onDelete: handleDeletePaymentReceive,
           onEdit: handleEditPaymentReceive,

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js

@@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom';
 
 import { compose } from 'utils';
 import { DataTable, DashboardContentTable } from 'components';
+import { TABLES } from 'common/tables';
 
 import ReceiptsEmptyStatus from './ReceiptsEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
@@ -16,6 +17,7 @@ import withReceiptsActions from './withReceiptsActions';
 
 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useReceiptsTableColumns, ActionsMenu } from './components';
+import { useMemorizedColumnsWidths } from 'hooks';
 
 /**
  * Sale receipts datatable.
@@ -75,6 +77,10 @@ function ReceiptsDataTable({
     openDialog('receipt-pdf-preview', { receiptId: id });
   };
 
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.RECEIPTS);
+
   // Handles the datable fetch data once the state changing.
   const handleDataTableFetchData = useCallback(
     ({ sortBy, pageIndex, pageSize }) => {
@@ -100,7 +106,6 @@ function ReceiptsDataTable({
       <DataTable
         columns={columns}
         data={receipts}
-        initialState={receiptTableState}
         loading={isReceiptsLoading}
         headerLoading={isReceiptsLoading}
         progressBarLoading={isReceiptsFetching}
@@ -118,6 +123,8 @@ function ReceiptsDataTable({
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}
         onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
         payload={{
           onEdit: handleEditReceipt,
           onDelete: handleDeleteReceipt,

client/src/containers/Vendors/VendorsLanding/VendorsList.js

@@ -24,18 +24,14 @@ function VendorsList({
   vendorsTableStateChanged,
 
   // #withVendorsActions
-  setVendorsTableState,
+  resetVendorsTableState,
 }) {
   // Resets the vendors table state once the page unmount.
   useEffect(
     () => () => {
-      setVendorsTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetVendorsTableState();
     },
-    [setVendorsTableState],
+    [resetVendorsTableState],
   );
 
   return (

client/src/containers/Vendors/VendorsLanding/VendorsTable.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useHistory } from 'react-router';
 
+import { TABLES } from 'common/tables';
+
 import { DataTable, DashboardContentTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
@@ -8,15 +10,18 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 import VendorsEmptyStatus from './VendorsEmptyStatus';
 
 import { useVendorsListContext } from './VendorsListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
+
 import withVendorsActions from './withVendorsActions';
 import withVendors from './withVendors';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { compose } from 'utils';
 import { ActionsMenu, useVendorsTableColumns } from './components';
 
+import { compose } from 'utils';
+
 /**
  * Vendors table.
  */
@@ -91,6 +96,10 @@ function VendorsTable({
     openDrawer('vendor-details-drawer', { vendorId: cell.row.original.id });
   };
 
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.VENDORS);
+
   // Handle fetch data once the page index, size or sort by of the table change.
   const handleFetchData = React.useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -114,7 +123,6 @@ function VendorsTable({
         noInitialFetch={true}
         columns={columns}
         data={vendors}
-        initialState={vendorsTableState}
         loading={isVendorsLoading}
         headerLoading={isVendorsLoading}
         progressBarLoading={isVendorsFetching}
@@ -131,6 +139,8 @@ function VendorsTable({
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}
         onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
         payload={{
           onEdit: handleEditVendor,
           onDelete: handleDeleteVendor,

client/src/containers/Vendors/VendorsLanding/withVendorsActions.js

@@ -1,8 +1,12 @@
 import { connect } from 'react-redux';
-import { setVendorsTableState } from 'store/vendors/vendors.actions';
+import {
+  setVendorsTableState,
+  resetVendorsTableState,
+} from 'store/vendors/vendors.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setVendorsTableState: (queries) => dispatch(setVendorsTableState(queries)),
+  resetVendorsTableState: () => dispatch(resetVendorsTableState()),
 });
 
 export default connect(null, mapDispatchToProps);