diff --git a/apps/trading/components/orders-container/orders-container.tsx b/apps/trading/components/orders-container/orders-container.tsx index c67979964..3f8d7a14b 100644 --- a/apps/trading/components/orders-container/orders-container.tsx +++ b/apps/trading/components/orders-container/orders-container.tsx @@ -28,14 +28,20 @@ export interface OrderContainerProps { filter?: Filter; } +const AUTO_SIZE_COLUMNS = ['instrument-code']; + export const OrdersContainer = ({ filter }: OrderContainerProps) => { const { pubKey, isReadOnly } = useVegaWallet(); const onMarketClick = useMarketClickHandler(true); const onOrderTypeClick = useMarketLiquidityClickHandler(); const { gridState, updateGridState } = useOrderListGridState(filter); - const gridStoreCallbacks = useDataGridEvents(gridState, (newState) => { - updateGridState(filter, newState); - }); + const gridStoreCallbacks = useDataGridEvents( + gridState, + (newState) => { + updateGridState(filter, newState); + }, + AUTO_SIZE_COLUMNS + ); if (!pubKey) { return {t('Please connect Vega wallet')}; diff --git a/libs/datagrid/src/lib/use-datagrid-events.ts b/libs/datagrid/src/lib/use-datagrid-events.ts index 23aaf68e1..70a850be0 100644 --- a/libs/datagrid/src/lib/use-datagrid-events.ts +++ b/libs/datagrid/src/lib/use-datagrid-events.ts @@ -6,6 +6,7 @@ import type { FilterChangedEvent, FirstDataRenderedEvent, SortChangedEvent, + GridReadyEvent, } from 'ag-grid-community'; import { useCallback } from 'react'; @@ -17,7 +18,8 @@ type State = { export const useDataGridEvents = ( state: State, - callback: (data: State) => void + callback: (data: State) => void, + autoSizeColumns?: string[] ) => { /** * Callback for filter events @@ -78,7 +80,7 @@ export const useDataGridEvents = ( * State only applied if found, otherwise columns sized to fit available space */ const onGridReady = useCallback( - ({ api, columnApi }: FirstDataRenderedEvent) => { + ({ api, columnApi }: GridReadyEvent) => { if (!api || !columnApi) return; if (state.columnState) { @@ -97,6 +99,16 @@ export const useDataGridEvents = ( [state] ); + const onFirstDataRendered = useCallback( + ({ columnApi }: FirstDataRenderedEvent) => { + if (!columnApi) return; + if (!state?.columnState && autoSizeColumns?.length) { + columnApi.autoSizeColumns(autoSizeColumns); + } + }, + [state, autoSizeColumns] + ); + return { onGridReady, // these events don't use the 'finished' flag @@ -106,5 +118,6 @@ export const useDataGridEvents = ( // these trigger a lot so this callback uses the 'finished' flag onColumnMoved: onDebouncedColumnChange, onColumnResized: onDebouncedColumnChange, + onFirstDataRendered, }; }; 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 a98821a53..a2c1ae04d 100644 --- a/libs/orders/src/lib/components/order-list/order-list.tsx +++ b/libs/orders/src/lib/components/order-list/order-list.tsx @@ -79,6 +79,7 @@ export const OrderListTable = memo< () => [ { headerName: t('Market'), + colId: 'instrument-code', field: 'market.tradableInstrument.instrument.code', cellRenderer: 'MarketNameCell', cellRendererParams: { idPath: 'market.id', onMarketClick },