BC-12 feat: store accounts table columns resizing to local storage.

client/src/components/DataTable.js

@@ -32,6 +32,8 @@ import TableWrapper from './Datatable/TableWrapper';
 import TableIndeterminateCheckboxRow from './Datatable/TableIndeterminateCheckboxRow';
 import TableIndeterminateCheckboxHeader from './Datatable/TableIndeterminateCheckboxHeader';
 
+import { useResizeObserver } from './Datatable/utils';
+
 /**
  * Datatable component.
  */
@@ -78,6 +80,9 @@ export default function DataTable(props) {
     TablePaginationRenderer,
     TableFooterRenderer,
 
+    onColumnResizing,
+    initialColumnsWidths,
+
     ...restProps
   } = props;
 
@@ -106,6 +111,9 @@ export default function DataTable(props) {
         pageIndex: initialPageIndex,
         pageSize: initialPageSize,
         expanded,
+        columnResizing: {
+          columnWidths: initialColumnsWidths || {},
+        },
       },
       manualPagination,
       pageCount: controlledPageCount,
@@ -164,6 +172,11 @@ export default function DataTable(props) {
     saveInvoke(onSelectedRowsChange, selectedFlatRows);
   }, [selectedRowIds, onSelectedRowsChange]);
 
+  // Column resizing observer.
+  useResizeObserver(table.state, (current, columnWidth, columnsResizing) => {
+    onColumnResizing && onColumnResizing(current, columnWidth, columnsResizing);
+  });
+
   return (
     <TableContext.Provider value={{ table, props }}>
       <TableWrapperRenderer>

client/src/components/Datatable/utils.js

@@ -1,3 +1,5 @@
+import { React } from 'react';
+
 export const isCellLoading = (loading, cellsCoords, rowIndex, columnId) => {
   if (!loading) {
     return false;
@@ -8,3 +10,26 @@ export const isCellLoading = (loading, cellsCoords, rowIndex, columnId) => {
         (cellCoord) => cellCoord[0] === rowIndex && cellCoord[1] === columnId,
       );
 };
+
+export const useResizeObserver = (state, callback) => {
+  // This Ref will contain the id of the column being resized or undefined
+  const columnResizeRef = React.useRef();
+
+  React.useEffect(() => {
+    // We are interested in calling the resize event only when "state.columnResizing?.isResizingColumn" changes from
+    // a string to undefined, because it indicates that it WAS resizing but it no longer is.
+    if (
+      state.columnResizing &&
+      !state.columnResizing?.isResizingColumn &&
+      columnResizeRef.current
+    ) {
+      // Trigger resize event
+      callback(
+        columnResizeRef.current,
+        state.columnResizing.columnWidths[columnResizeRef.current],
+        state.columnResizing,
+      );
+    }
+    columnResizeRef.current = state.columnResizing?.isResizingColumn;
+  }, [callback, state.columnResizing]);
+};