feat: add memorized column.

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

@@ -15,6 +15,8 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { ActionsMenu, useEstiamtesTableColumns } from './components';
+import { TABLES } from 'common/tables';
+import { useMemorizedColumnsWidths } from 'hooks';
 
 /**
  * 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';
@@ -14,6 +15,7 @@ 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 +75,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 +101,6 @@ function PaymentReceivesDataTable({
       <DataTable
         columns={columns}
         data={paymentReceives}
-        initialState={paymentReceivesTableState}
         loading={isPaymentReceivesLoading}
         headerLoading={isPaymentReceivesLoading}
         progressBarLoading={isPaymentReceivesFetching}
@@ -112,6 +117,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,