feat: add memorized column.

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,