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>