diff --git a/libs/datagrid/src/index.ts b/libs/datagrid/src/index.ts index d72edb018..aa2337eb9 100644 --- a/libs/datagrid/src/index.ts +++ b/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'; diff --git a/libs/datagrid/src/lib/ag-grid/ag-grid-dynamic-themed.tsx b/libs/datagrid/src/lib/ag-grid/ag-grid-dynamic-themed.tsx index 621d596a7..aa9f75baa 100644 --- a/libs/datagrid/src/lib/ag-grid/ag-grid-dynamic-themed.tsx +++ b/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; 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 (
>; + valueSetter: (id: string, value: Record) => 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, + (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]; +}; diff --git a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx index 310664539..7bcaa664c 100644 --- a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx +++ b/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} />
diff --git a/libs/orders/src/lib/components/order-list/order-list.tsx b/libs/orders/src/lib/components/order-list/order-list.tsx index 30c22d4a5..988072ffa 100644 --- a/libs/orders/src/lib/components/order-list/order-list.tsx +++ b/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 ( )} minWidth={100} + width={columnSizes['status']} /> );