feat: add memorized column.

client/src/common/tables.js

@@ -0,0 +1,15 @@
+export const TABLES = {
+  ITEMS: 'items',
+  INVENTORY_ADJUSTMENTS: 'inventory_adjustment',
+  ESTIMATES: 'estimates',
+  INVOICES: 'invoices',
+  RECEIPTS: 'receipts',
+  PAYMENT_RECEIVES: 'payment_receives',
+  BILLS: 'bills',
+  PAYMENT_MADES: 'payment_mades',
+  CUSTOMER: 'customers',
+  VENDORS: 'vendors',
+  ACCOUNTS: 'accounts',
+  MANUAL_JOURNALS: 'manual_journal',
+  EXPENSES: 'expenses',
+};

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

@@ -2,6 +2,7 @@ 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';
@@ -15,6 +16,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { useManualJournalsContext } from './ManualJournalsListProvider';
 import { useManualJournalsColumns } from './utils';
 import { ActionsMenu } from './components';
+import { useMemorizedColumnsWidths } from 'hooks';
 
 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,6 +5,7 @@ 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';
@@ -81,7 +82,7 @@ function AccountsDataTable({
   };
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
-    useMemorizedColumnsWidths('accounts');
+    useMemorizedColumnsWidths(TABLES.ACCOUNTS);
 
   return (
     <DataTable

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

@@ -5,6 +5,7 @@ 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 withCustomers from './withCustomers';
@@ -15,6 +16,7 @@ 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/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/InventoryAdjustments/InventoryAdjustmentTable.js

@@ -1,6 +1,10 @@
 import React, { useCallback } from 'react';
 import { DataTable } from 'components';
+
+import { TABLES } from 'common/tables';
 import { useInventoryAdjustmentsColumns, ActionsMenu } from './components';
+import { useMemorizedColumnsWidths } from 'hooks';
+
 import intl from 'react-intl-universal';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -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/BillsTable.js

@@ -4,6 +4,8 @@ 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';
@@ -17,6 +19,7 @@ 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';
 
 /**
  * Bills transactions datatable.
@@ -92,39 +95,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
+      <DataTable
-      columns={columns}
+        columns={columns}
-      data={bills}
+        data={bills}
-      initialState={billsTableState}
+        loading={isBillsLoading}
-      loading={isBillsLoading}
+        headerLoading={isBillsLoading}
-      headerLoading={isBillsLoading}
+        progressBarLoading={isBillsFetching}
-      progressBarLoading={isBillsFetching}
+        onFetchData={handleFetchData}
-      onFetchData={handleFetchData}
+        manualSortBy={true}
-      manualSortBy={true}
+        selectionColumn={true}
-      selectionColumn={true}
+        noInitialFetch={true}
-      noInitialFetch={true}
+        sticky={true}
-      sticky={true}
+        pagination={true}
-      pagination={true}
+        pagesCount={pagination.pagesCount}
-      pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
-      TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
-      ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
-      onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
-      payload={{
+        onColumnResizing={handleColumnResizing}
-        onDelete: handleDeleteBill,
+        payload={{
-        onEdit: handleEditBill,
+          onDelete: handleDeleteBill,
-        onOpen: handleOpenBill,
+          onEdit: handleEditBill,
-        onQuick: handleQuickPaymentMade,
+          onOpen: handleOpenBill,
-        onAllocateLandedCost: handleAllocateLandedCost,
+          onQuick: handleQuickPaymentMade,
-        onViewDetails: handleViewDetailBill,
+          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';
@@ -17,6 +18,7 @@ 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 +73,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 +95,6 @@ function PaymentMadesTable({
       <DataTable
         columns={columns}
         data={paymentMades}
-        initialState={paymentMadesTableState}
         onFetchData={handleDataTableFetchData}
         loading={isPaymentsLoading}
         headerLoading={isPaymentsLoading}
@@ -106,6 +111,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

@@ -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,

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';
@@ -16,6 +18,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 import { ActionsMenu, useVendorsTableColumns } from './components';
+import { useMemorizedColumnsWidths } from 'hooks';
 
 /**
  * Vendors table.
@@ -91,6 +94,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 +121,6 @@ function VendorsTable({
         noInitialFetch={true}
         columns={columns}
         data={vendors}
-        initialState={vendorsTableState}
         loading={isVendorsLoading}
         headerLoading={isVendorsLoading}
         progressBarLoading={isVendorsFetching}
@@ -131,6 +137,8 @@ function VendorsTable({
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={ActionsMenu}
         onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
         payload={{
           onEdit: handleEditVendor,
           onDelete: handleDeleteVendor,