feat: persist table columns - initial commit

libs/datagrid/src/index.ts

@@ -1,5 +1,6 @@
 export * from './lib/ag-grid/ag-grid-dynamic';
 export * from './lib/ag-grid/ag-grid-lazy';
+export * from './lib/ag-grid/use-column-sizes';
 
 export * from './lib/cells/cumulative-vol-cell';
 export * from './lib/cells/flash-cell';

libs/datagrid/src/lib/ag-grid/ag-grid-dynamic-themed.tsx

@@ -1,8 +1,10 @@
 import type { ReactNode, FunctionComponent } from 'react';
 import dynamic from 'next/dynamic';
 import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
+import type { ColumnResizedEvent } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
+import { useColumnSizes } from './use-column-sizes';
 import 'ag-grid-community/dist/styles/ag-grid.css';
 
 interface GridProps {
@@ -21,6 +23,7 @@ const AgGridDarkTheme = dynamic(
 ) as FunctionComponent<GridProps>;
 
 export const AgGridThemed = ({
+  id,
   style,
   className,
   gridRef,
@@ -33,11 +36,18 @@ export const AgGridThemed = ({
   customThemeParams?: string;
 }) => {
   const { theme } = useThemeSwitcher();
+  const [, setValues] = useColumnSizes({ id });
   const defaultProps = {
     rowHeight: 22,
     headerHeight: 22,
     enableCellTextSelection: true,
+    onColumnResized: (event: ColumnResizedEvent) => {
+      if (event.source === 'uiColumnDragged') {
+        setValues(event.columns);
+      }
+    },
   };
+
   return (
     <div
       className={`${className ?? ''} ${

libs/datagrid/src/lib/ag-grid/use-column-sizes.ts

@@ -0,0 +1,56 @@
+import { useCallback } from 'react';
+import type { Column } from 'ag-grid-community';
+import debounce from 'lodash/debounce';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+const STORAGE_KEY = 'vega_columns_sizes_store';
+const COLUMNS_SET_DEBOUNCE_TIME = 300;
+
+export const useColumnSizesStore = create<{
+  sizes: Record<string, Record<string, string>>;
+  valueSetter: (id: string, value: Record<string, string>) => void;
+}>()(
+  persist(
+    immer((set) => ({
+      sizes: {},
+      valueSetter: (id, value) =>
+        set((state) => {
+          state.sizes[id] = {
+            ...(state.sizes[id] || {}),
+            ...value,
+          };
+          return state;
+        }),
+    })),
+    { name: STORAGE_KEY }
+  )
+);
+
+interface UseColumnSizesProps {
+  id: string;
+}
+export const useColumnSizes = ({
+  id,
+}: UseColumnSizesProps): [
+  Record<string, string>,
+  (columns: Column[]) => void
+] => {
+  const sizes = useColumnSizesStore((store) => store.sizes[id]) || {};
+  const valueSetter = useColumnSizesStore((store) => store.valueSetter);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleOnChange = useCallback(
+    debounce((columns: Column[]) => {
+      if (id && columns.length) {
+        const sizesObj = columns.reduce((aggr, column) => {
+          aggr[column.getColId()] = column.getActualWidth();
+          return aggr;
+        }, {});
+        valueSetter(id, sizesObj);
+      }
+    }, COLUMNS_SET_DEBOUNCE_TIME),
+    [valueSetter, id]
+  );
+  return [sizes, handleOnChange];
+};

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -172,6 +172,8 @@ export const OrderListManager = ({
           blockLoadDebounceMillis={100}
           suppressLoadingOverlay
           suppressNoRowsOverlay
+          suppressAutoSize
+          suppressSizeToFit
           {...bottomPlaceholderProps}
         />
         <div className="pointer-events-none absolute inset-0">

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -17,6 +17,7 @@ import {
   positiveClassNames,
   MarketNameCell,
   OrderTypeCell,
+  useColumnSizes,
 } from '@vegaprotocol/datagrid';
 import type {
   TypedDataAgGrid,
@@ -42,11 +43,12 @@ export const OrderListTable = memo(
       { cancel, setEditOrder, onMarketClick, onOrderTypeClick, ...props },
       ref
     ) => {
+      const [columnSizes] = useColumnSizes({ id: 'orders' });
       return (
         <AgGrid
+          id="orders"
           ref={ref}
           defaultColDef={{
-            flex: 1,
             resizable: true,
             sortable: true,
             filterParams: { buttons: ['reset'] },
@@ -65,6 +67,7 @@ export const OrderListTable = memo(
             cellRenderer="MarketNameCell"
             cellRendererParams={{ idPath: 'market.id', onMarketClick }}
             minWidth={150}
+            width={columnSizes['market.tradableInstrument.instrument.code']}
           />
           <AgGridColumn
             headerName={t('Size')}
@@ -101,6 +104,7 @@ export const OrderListTable = memo(
               );
             }}
             minWidth={80}
+            width={columnSizes['size']}
           />
           <AgGridColumn
             field="type"
@@ -113,6 +117,7 @@ export const OrderListTable = memo(
               onClick: onOrderTypeClick,
             }}
             minWidth={80}
+            width={columnSizes['type']}
           />
           <AgGridColumn
             field="status"
@@ -145,6 +150,7 @@ export const OrderListTable = memo(
               </span>
             )}
             minWidth={100}
+            width={columnSizes['status']}
           />
           <AgGridColumn
             headerName={t('Filled')}
@@ -172,6 +178,7 @@ export const OrderListTable = memo(
               )}/${addDecimalsFormatNumber(size.toString(), dps)}`;
             }}
             minWidth={100}
+            width={columnSizes['remaining']}
           />
           <AgGridColumn
             field="price"
@@ -195,6 +202,7 @@ export const OrderListTable = memo(
               return addDecimalsFormatNumber(value, data.market.decimalPlaces);
             }}
             minWidth={100}
+            width={columnSizes['price']}
           />
           <AgGridColumn
             field="timeInForce"
@@ -226,6 +234,7 @@ export const OrderListTable = memo(
               return label;
             }}
             minWidth={150}
+            width={columnSizes['timeInForce']}
           />
           <AgGridColumn
             field="createdAt"
@@ -240,6 +249,7 @@ export const OrderListTable = memo(
               );
             }}
             minWidth={150}
+            width={columnSizes['createdAt']}
           />
           <AgGridColumn
             field="updatedAt"
@@ -258,6 +268,7 @@ export const OrderListTable = memo(
               );
             }}
             minWidth={150}
+            width={columnSizes['updatedAt']}
           />
           <AgGridColumn
             colId="amend"
@@ -282,6 +293,7 @@ export const OrderListTable = memo(
               ) : null;
             }}
             sortable={false}
+            width={columnSizes['amend']}
           />
         </AgGrid>
       );