From c3e39b6e15ece7ccbcc1acf51aac0b3d557616dd Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Mon, 26 Jun 2023 17:10:22 -0700
Subject: [PATCH] refactor(trading): pane stores for grid state (#4119)

---
 .../src/integration/trading-positions.cy.ts   |  73 ++++---
 .../client-pages/liquidity/liquidity.tsx      |  67 +------
 .../client-pages/market/trade-grid.tsx        |  57 +-----
 .../client-pages/market/trade-views.tsx       |  33 ++--
 apps/trading/client-pages/markets/closed.tsx  |   1 -
 .../portfolio/deposits-container.tsx          |  15 +-
 .../client-pages/portfolio/portfolio.tsx      |  53 ++---
 .../accounts-container/accounts-container.tsx |  21 +-
 .../fills-container/fills-container.tsx       |  49 +++++
 .../components/fills-container/index.ts       |   1 +
 .../components/ledger-container/index.ts      |   1 +
 .../ledger-container/ledger-container.tsx     |  36 ++++
 .../components/liquidity-container/index.ts   |   1 +
 .../liquidity-container.tsx                   |  93 +++++++++
 .../components/orders-container/index.ts      |   1 +
 .../orders-container.spec.tsx                 | 106 ++++++++++
 .../orders-container/orders-container.tsx     | 166 ++++++++++++++++
 .../components/positions-container/index.ts   |   1 +
 .../positions-container.tsx                   |  26 ++-
 apps/trading/stores/datagrid-store-slice.ts   |  25 +++
 .../src/lib/accounts-manager.spec.tsx         |  13 ++
 libs/accounts/src/lib/accounts-manager.tsx    |   8 +-
 libs/accounts/src/lib/accounts-table.tsx      |   2 -
 libs/datagrid/src/index.ts                    |   3 +-
 .../src/lib/ag-grid/ag-grid-lazy-themed.tsx   |  14 +-
 .../datagrid/src/lib/ag-grid/ag-grid-lazy.tsx |   1 -
 .../src/lib/ag-grid/use-column-sizes.spec.ts  | 122 ------------
 .../src/lib/ag-grid/use-column-sizes.ts       | 145 --------------
 .../src/lib/use-bottom-placeholder.tsx        |  68 -------
 .../src/lib/use-datagrid-events.spec.tsx      | 185 ++++++++++++++++++
 libs/datagrid/src/lib/use-datagrid-events.ts  |  66 +++++++
 libs/deposits/src/lib/deposits-table.tsx      |   4 +-
 libs/fills/src/index.ts                       |   2 +-
 libs/fills/src/lib/fills-container.tsx        |  33 ----
 libs/fills/src/lib/fills-manager.tsx          |  12 +-
 libs/fills/src/lib/fills-table.tsx            |   1 -
 libs/ledger/src/index.ts                      |   1 -
 libs/ledger/src/lib/ledger-container.tsx      |  17 --
 libs/ledger/src/lib/ledger-manager.tsx        |  26 ++-
 libs/ledger/src/lib/ledger-table.tsx          |   5 +-
 libs/liquidity/src/lib/liquidity-table.tsx    |   1 -
 .../markets-container/market-list-table.tsx   |   1 -
 libs/orders/src/lib/components/index.ts       |   1 -
 .../lib/components/order-list-container.tsx   |  42 ----
 .../order-list-manager/order-list-manager.tsx |  90 ++-------
 .../lib/components/order-list/order-list.tsx  |   1 -
 libs/positions/src/index.ts                   |   2 +-
 libs/positions/src/lib/positions-manager.tsx  |   9 +-
 libs/positions/src/lib/positions-table.tsx    |   1 -
 .../proposals-list/proposals-list.tsx         |   1 -
 libs/trades/src/lib/trades-table.tsx          |   1 -
 libs/withdraws/src/lib/withdrawals-table.tsx  |   6 +-
 52 files changed, 928 insertions(+), 782 deletions(-)
 create mode 100644 apps/trading/components/fills-container/fills-container.tsx
 create mode 100644 apps/trading/components/fills-container/index.ts
 create mode 100644 apps/trading/components/ledger-container/index.ts
 create mode 100644 apps/trading/components/ledger-container/ledger-container.tsx
 create mode 100644 apps/trading/components/liquidity-container/index.ts
 create mode 100644 apps/trading/components/liquidity-container/liquidity-container.tsx
 create mode 100644 apps/trading/components/orders-container/index.ts
 create mode 100644 apps/trading/components/orders-container/orders-container.spec.tsx
 create mode 100644 apps/trading/components/orders-container/orders-container.tsx
 create mode 100644 apps/trading/components/positions-container/index.ts
 rename {libs/positions/src/lib => apps/trading/components/positions-container}/positions-container.tsx (51%)
 create mode 100644 apps/trading/stores/datagrid-store-slice.ts
 delete mode 100644 libs/datagrid/src/lib/ag-grid/use-column-sizes.spec.ts
 delete mode 100644 libs/datagrid/src/lib/ag-grid/use-column-sizes.ts
 delete mode 100644 libs/datagrid/src/lib/use-bottom-placeholder.tsx
 create mode 100644 libs/datagrid/src/lib/use-datagrid-events.spec.tsx
 create mode 100644 libs/datagrid/src/lib/use-datagrid-events.ts
 delete mode 100644 libs/fills/src/lib/fills-container.tsx
 delete mode 100644 libs/ledger/src/lib/ledger-container.tsx
 delete mode 100644 libs/orders/src/lib/components/order-list-container.tsx

diff --git a/apps/trading-e2e/src/integration/trading-positions.cy.ts b/apps/trading-e2e/src/integration/trading-positions.cy.ts
index 74c637139..9159063d6 100644
--- a/apps/trading-e2e/src/integration/trading-positions.cy.ts
+++ b/apps/trading-e2e/src/integration/trading-positions.cy.ts
@@ -1,5 +1,4 @@
-import { checkSorting } from '@vegaprotocol/cypress';
-import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import { checkSorting, aliasGQLQuery } from '@vegaprotocol/cypress';
 import { marketsDataQuery } from '@vegaprotocol/mock';
 import { positionsQuery } from '@vegaprotocol/mock';
 
@@ -15,13 +14,12 @@ const toastContent = 'toast-content';
 const tooltipContent = 'tooltip-content';
 // #endregion
 
-beforeEach(() => {
-  cy.mockTradingPage();
-  cy.mockSubscription();
-  cy.setVegaWallet();
-});
-
 describe('positions', { tags: '@smoke', testIsolation: true }, () => {
+  beforeEach(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setVegaWallet();
+  });
   it('renders positions on trading page', () => {
     visitAndClickPositions();
     // 7004-POSI-001
@@ -64,7 +62,14 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
     );
   });
 });
+
 describe('positions', { tags: '@regression', testIsolation: true }, () => {
+  beforeEach(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setVegaWallet();
+  });
+
   it('rows should be displayed despite errors', () => {
     const errors = [
       {
@@ -164,8 +169,9 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
     );
   });
 
+  // let elementWidth: number;
+
   it('Resize column', () => {
-    let elementWidth: number;
     visitAndClickPositions();
     cy.get('.ag-overlay-loading-wrapper').should('not.be.visible');
     cy.get('.ag-header-container').within(() => {
@@ -180,29 +186,33 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
     cy.get(`[col-id="marketName"]`)
       .invoke('width')
       .should('be.greaterThan', 250);
-    cy.get(`[col-id="marketName"]`)
-      .invoke('width')
-      .then((width) => {
-        elementWidth = width as number;
-      })
-      .then(() => {
-        let localStorageCopy: Record<string, string>;
-        cy.window().then((win) => {
-          localStorageCopy = { ...win.localStorage };
-        });
+  });
 
-        cy.reload();
-        cy.window().then((win) => {
-          Object.keys(localStorageCopy).forEach((key) => {
-            win.localStorage.setItem(key, localStorageCopy[key]);
-          });
-        });
+  // This test depends on the previous one
+  it('Has persisted column widths', () => {
+    const width = 400;
 
-        // 7004-POSI-012
-        cy.get('[col-id="marketName"]')
-          .invoke('width')
-          .should('equal', elementWidth);
-      });
+    cy.window().then((win) => {
+      win.localStorage.setItem(
+        'vega_positions_store',
+        JSON.stringify({
+          state: {
+            gridStore: {
+              columnState: [{ colId: 'marketName', width }],
+            },
+          },
+        })
+      );
+    });
+
+    visitAndClickPositions();
+
+    // 7004-POSI-012
+    cy.get('.ag-center-cols-container .ag-row')
+      .first()
+      .find('[col-id="marketName"]')
+      .invoke('outerWidth')
+      .should('equal', width);
   });
 
   it('Scroll horizontally', () => {
@@ -291,6 +301,7 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
     cy.getByTestId(dialogContent).should('be.visible');
   });
 });
+
 function validatePositionsDisplayed(multiKey = false) {
   cy.getByTestId('tab-positions').should('be.visible');
   cy.getByTestId('tab-positions')
@@ -326,6 +337,7 @@ function validatePositionsDisplayed(multiKey = false) {
 
   cy.getByTestId('close-position').should('be.visible').and('have.length', 3);
 }
+
 function assertPNLColor(
   pnlSelector: string,
   positiveClass: string,
@@ -347,6 +359,7 @@ function assertPNLColor(
     }
   });
 }
+
 function visitAndClickPositions() {
   cy.visit('/#/markets/market-0');
   cy.getByTestId(positions).click();
diff --git a/apps/trading/client-pages/liquidity/liquidity.tsx b/apps/trading/client-pages/liquidity/liquidity.tsx
index a15dded2f..a67aaa78c 100644
--- a/apps/trading/client-pages/liquidity/liquidity.tsx
+++ b/apps/trading/client-pages/liquidity/liquidity.tsx
@@ -1,7 +1,5 @@
 import {
   matchFilter,
-  liquidityProvisionsDataProvider,
-  LiquidityTable,
   lpAggregatedDataProvider,
   useCheckLiquidityStatus,
 } from '@vegaprotocol/liquidity';
@@ -24,18 +22,16 @@ import {
   ExternalLink,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import { Header, HeaderStat, HeaderTitle } from '../../components/header';
 
-import type { AgGridReact } from 'ag-grid-react';
-
-import type { Filter } from '@vegaprotocol/liquidity';
 import { Link, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 
 import { useMarket, useStaticMarketData } from '@vegaprotocol/markets';
 import { DocsLinks } from '@vegaprotocol/environment';
+import { LiquidityContainer } from '../../components/liquidity-container';
 
 const enum LiquidityTabs {
   Active = 'active',
@@ -49,65 +45,6 @@ export const Liquidity = () => {
   return <LiquidityViewContainer marketId={marketId} />;
 };
 
-const useReloadLiquidityData = (marketId: string | undefined) => {
-  const { reload } = useDataProvider({
-    dataProvider: liquidityProvisionsDataProvider,
-    variables: { marketId: marketId || '' },
-    update: () => true,
-    skip: !marketId,
-  });
-  useEffect(() => {
-    const interval = setInterval(reload, 30000);
-    return () => clearInterval(interval);
-  }, [reload]);
-};
-
-export const LiquidityContainer = ({
-  marketId,
-  filter,
-}: {
-  marketId: string | undefined;
-  filter?: Filter;
-}) => {
-  const gridRef = useRef<AgGridReact | null>(null);
-  const { data: market } = useMarket(marketId);
-
-  // To be removed when liquidityProvision subscriptions are working
-  useReloadLiquidityData(marketId);
-
-  const { data, error } = useDataProvider({
-    dataProvider: lpAggregatedDataProvider,
-    variables: { marketId: marketId || '', filter },
-    skip: !marketId,
-  });
-
-  const assetDecimalPlaces =
-    market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
-  const quantum =
-    market?.tradableInstrument.instrument.product.settlementAsset.quantum || 0;
-  const symbol =
-    market?.tradableInstrument.instrument.product.settlementAsset.symbol;
-
-  const { params } = useNetworkParams([
-    NetworkParams.market_liquidity_stakeToCcyVolume,
-  ]);
-  const stakeToCcyVolume = params.market_liquidity_stakeToCcyVolume;
-
-  return (
-    <div className="h-full relative">
-      <LiquidityTable
-        ref={gridRef}
-        rowData={data}
-        symbol={symbol}
-        assetDecimalPlaces={assetDecimalPlaces}
-        quantum={quantum}
-        stakeToCcyVolume={stakeToCcyVolume}
-        overlayNoRowsTemplate={error ? error.message : t('No data')}
-      />
-    </div>
-  );
-};
-
 const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
   const { data: market } = useMarket(marketId);
   const { data: marketData } = useStaticMarketData(marketId);
diff --git a/apps/trading/client-pages/market/trade-grid.tsx b/apps/trading/client-pages/market/trade-grid.tsx
index 3d0bb96cb..dcf890c18 100644
--- a/apps/trading/client-pages/market/trade-grid.tsx
+++ b/apps/trading/client-pages/market/trade-grid.tsx
@@ -19,10 +19,7 @@ import {
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
-import {
-  useMarketClickHandler,
-  useMarketLiquidityClickHandler,
-} from '../../lib/hooks/use-market-click-handler';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import { HeaderTitle } from '../../components/header';
 import {
@@ -49,7 +46,6 @@ const MarketBottomPanel = memo(
     const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'bottom' });
     const { screenSize } = useScreenDimensions();
     const onMarketClick = useMarketClickHandler(true);
-    const onOrderTypeClick = useMarketLiquidityClickHandler();
 
     return 'xxxl' === screenSize ? (
       <ResizableGrid
@@ -69,10 +65,6 @@ const MarketBottomPanel = memo(
                   <TradingViews.orders.component
                     marketId={marketId}
                     filter={Filter.Open}
-                    onMarketClick={onMarketClick}
-                    onOrderTypeClick={onOrderTypeClick}
-                    enforceBottomPlaceholder
-                    storeKey="marketOpenOrders"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -81,10 +73,6 @@ const MarketBottomPanel = memo(
                   <TradingViews.orders.component
                     marketId={marketId}
                     filter={Filter.Closed}
-                    onMarketClick={onMarketClick}
-                    onOrderTypeClick={onOrderTypeClick}
-                    enforceBottomPlaceholder
-                    storeKey="marketClosedOrders"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -93,22 +81,12 @@ const MarketBottomPanel = memo(
                   <TradingViews.orders.component
                     marketId={marketId}
                     filter={Filter.Rejected}
-                    onMarketClick={onMarketClick}
-                    onOrderTypeClick={onOrderTypeClick}
-                    enforceBottomPlaceholder
-                    storeKey="marketRejectOrders"
                   />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="orders" name={t('All')}>
                 <VegaWalletContainer>
-                  <TradingViews.orders.component
-                    marketId={marketId}
-                    onMarketClick={onMarketClick}
-                    onOrderTypeClick={onOrderTypeClick}
-                    enforceBottomPlaceholder
-                    storeKey="marketAllOrders"
-                  />
+                  <TradingViews.orders.component marketId={marketId} />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="fills" name={t('Fills')}>
@@ -116,7 +94,6 @@ const MarketBottomPanel = memo(
                   <TradingViews.fills.component
                     marketId={marketId}
                     onMarketClick={onMarketClick}
-                    storeKey="marketFills"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -134,8 +111,6 @@ const MarketBottomPanel = memo(
                 <VegaWalletContainer>
                   <TradingViews.positions.component
                     onMarketClick={onMarketClick}
-                    noBottomPlaceholder
-                    storeKey="marketPositions"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -145,7 +120,6 @@ const MarketBottomPanel = memo(
                     pinnedAsset={pinnedAsset}
                     onMarketClick={onMarketClick}
                     hideButtons
-                    storeKey="marketCollateral"
                   />
                 </VegaWalletContainer>
               </Tab>
@@ -158,10 +132,7 @@ const MarketBottomPanel = memo(
         <Tabs storageKey="console-trade-grid-bottom">
           <Tab id="positions" name={t('Positions')}>
             <VegaWalletContainer>
-              <TradingViews.positions.component
-                onMarketClick={onMarketClick}
-                storeKey="marketPositions"
-              />
+              <TradingViews.positions.component onMarketClick={onMarketClick} />
             </VegaWalletContainer>
           </Tab>
           <Tab id="open-orders" name={t('Open')}>
@@ -169,10 +140,6 @@ const MarketBottomPanel = memo(
               <TradingViews.orders.component
                 marketId={marketId}
                 filter={Filter.Open}
-                onMarketClick={onMarketClick}
-                onOrderTypeClick={onOrderTypeClick}
-                enforceBottomPlaceholder
-                storeKey="marketOpenOrders"
               />
             </VegaWalletContainer>
           </Tab>
@@ -181,10 +148,6 @@ const MarketBottomPanel = memo(
               <TradingViews.orders.component
                 marketId={marketId}
                 filter={Filter.Closed}
-                onMarketClick={onMarketClick}
-                onOrderTypeClick={onOrderTypeClick}
-                enforceBottomPlaceholder
-                storeKey="marketClosedOrders"
               />
             </VegaWalletContainer>
           </Tab>
@@ -193,22 +156,12 @@ const MarketBottomPanel = memo(
               <TradingViews.orders.component
                 marketId={marketId}
                 filter={Filter.Rejected}
-                onMarketClick={onMarketClick}
-                onOrderTypeClick={onOrderTypeClick}
-                enforceBottomPlaceholder
-                storeKey="marketRejectedOrders"
               />
             </VegaWalletContainer>
           </Tab>
           <Tab id="orders" name={t('All')}>
             <VegaWalletContainer>
-              <TradingViews.orders.component
-                marketId={marketId}
-                onMarketClick={onMarketClick}
-                onOrderTypeClick={onOrderTypeClick}
-                enforceBottomPlaceholder
-                storeKey="marketAllOrders"
-              />
+              <TradingViews.orders.component marketId={marketId} />
             </VegaWalletContainer>
           </Tab>
           <Tab id="fills" name={t('Fills')}>
@@ -216,7 +169,6 @@ const MarketBottomPanel = memo(
               <TradingViews.fills.component
                 marketId={marketId}
                 onMarketClick={onMarketClick}
-                storeKey="marketFills"
               />
             </VegaWalletContainer>
           </Tab>
@@ -226,7 +178,6 @@ const MarketBottomPanel = memo(
                 pinnedAsset={pinnedAsset}
                 onMarketClick={onMarketClick}
                 hideButtons
-                storeKey="marketCollateral"
               />
             </VegaWalletContainer>
           </Tab>
diff --git a/apps/trading/client-pages/market/trade-views.tsx b/apps/trading/client-pages/market/trade-views.tsx
index a0e284a7e..4d9405e38 100644
--- a/apps/trading/client-pages/market/trade-views.tsx
+++ b/apps/trading/client-pages/market/trade-views.tsx
@@ -1,18 +1,19 @@
+import type { ComponentProps } from 'react';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
 import { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
-import { OrderbookContainer } from '@vegaprotocol/market-depth';
-import { OrderListContainer, Filter } from '@vegaprotocol/orders';
-import type { OrderListContainerProps } from '@vegaprotocol/orders';
-import { FillsContainer } from '@vegaprotocol/fills';
-import { PositionsContainer } from '@vegaprotocol/positions';
 import { TradesContainer } from '@vegaprotocol/trades';
-import type { ComponentProps } from 'react';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { AccountsContainer } from '../../components/accounts-container';
+import { OrderbookContainer } from '@vegaprotocol/market-depth';
+import { Filter } from '@vegaprotocol/orders';
 import { NO_MARKET } from './constants';
-import { LiquidityContainer } from '../liquidity/liquidity';
+import { FillsContainer } from '../../components/fills-container';
+import { PositionsContainer } from '../../components/positions-container';
+import { AccountsContainer } from '../../components/accounts-container';
+import { LiquidityContainer } from '../../components/liquidity-container';
+import type { OrderContainerProps } from '../../components/orders-container';
+import { OrdersContainer } from '../../components/orders-container';
 
 type MarketDependantView =
   | typeof CandlesChartContainer
@@ -65,25 +66,25 @@ export const TradingViews = {
   positions: { label: 'Positions', component: PositionsContainer },
   activeOrders: {
     label: 'Active',
-    component: (props: OrderListContainerProps) => (
-      <OrderListContainer {...props} filter={Filter.Open} />
+    component: (props: OrderContainerProps) => (
+      <OrdersContainer {...props} filter={Filter.Open} />
     ),
   },
   closedOrders: {
     label: 'Closed',
-    component: (props: OrderListContainerProps) => (
-      <OrderListContainer {...props} filter={Filter.Closed} />
+    component: (props: OrderContainerProps) => (
+      <OrdersContainer {...props} filter={Filter.Closed} />
     ),
   },
   rejectedOrders: {
     label: 'Rejected',
-    component: (props: OrderListContainerProps) => (
-      <OrderListContainer {...props} filter={Filter.Rejected} />
+    component: (props: OrderContainerProps) => (
+      <OrdersContainer {...props} filter={Filter.Rejected} />
     ),
   },
   orders: {
     label: 'All',
-    component: OrderListContainer,
+    component: OrdersContainer,
   },
   collateral: { label: 'Collateral', component: AccountsContainer },
   fills: { label: 'Fills', component: FillsContainer },
diff --git a/apps/trading/client-pages/markets/closed.tsx b/apps/trading/client-pages/markets/closed.tsx
index 26094faa8..4908135c9 100644
--- a/apps/trading/client-pages/markets/closed.tsx
+++ b/apps/trading/client-pages/markets/closed.tsx
@@ -313,7 +313,6 @@ const ClosedMarketsDataGrid = ({
         minWidth: 100,
       }}
       overlayNoRowsTemplate={error ? error.message : t('No markets')}
-      storeKey="closedMarkets"
     />
   );
 };
diff --git a/apps/trading/client-pages/portfolio/deposits-container.tsx b/apps/trading/client-pages/portfolio/deposits-container.tsx
index 769540502..9046f5e7f 100644
--- a/apps/trading/client-pages/portfolio/deposits-container.tsx
+++ b/apps/trading/client-pages/portfolio/deposits-container.tsx
@@ -2,7 +2,6 @@ import { Button } from '@vegaprotocol/ui-toolkit';
 import { useDepositDialog, DepositsTable } from '@vegaprotocol/deposits';
 import { depositsProvider } from '@vegaprotocol/deposits';
 import { t } from '@vegaprotocol/i18n';
-import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useRef } from 'react';
@@ -17,17 +16,13 @@ export const DepositsContainer = () => {
     skip: !pubKey,
   });
   const openDepositDialog = useDepositDialog((state) => state.open);
-  const bottomPlaceholderProps = useBottomPlaceholder({ gridRef });
   return (
     <div className="h-full">
-      <div className="h-full relative">
-        <DepositsTable
-          rowData={data}
-          ref={gridRef}
-          {...bottomPlaceholderProps}
-          overlayNoRowsTemplate={error ? error.message : t('No deposits')}
-        />
-      </div>
+      <DepositsTable
+        rowData={data}
+        ref={gridRef}
+        overlayNoRowsTemplate={error ? error.message : t('No deposits')}
+      />
       {!isReadOnly && (
         <div className="h-auto flex justify-end px-[11px] py-2 bottom-0 right-3 absolute dark:bg-black/75 bg-white/75 rounded">
           <Button
diff --git a/apps/trading/client-pages/portfolio/portfolio.tsx b/apps/trading/client-pages/portfolio/portfolio.tsx
index 2c14dd14a..009e4492f 100644
--- a/apps/trading/client-pages/portfolio/portfolio.tsx
+++ b/apps/trading/client-pages/portfolio/portfolio.tsx
@@ -1,29 +1,26 @@
+import { useEffect } from 'react';
+import type { ReactNode } from 'react';
+import { LayoutPriority } from 'allotment';
 import { titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { PositionsContainer } from '@vegaprotocol/positions';
-import { OrderListContainer } from '@vegaprotocol/orders';
-import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
-import { WithdrawalsContainer } from './withdrawals-container';
-import { FillsContainer } from '@vegaprotocol/fills';
-import type { ReactNode } from 'react';
-import { useEffect } from 'react';
+import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
 import { usePaneLayout } from '@vegaprotocol/react-helpers';
-import { VegaWalletContainer } from '../../components/vega-wallet-container';
-import { DepositsContainer } from './deposits-container';
-import { LayoutPriority } from 'allotment';
+import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import { usePageTitleStore } from '../../stores';
-import { LedgerContainer } from '@vegaprotocol/ledger';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { AccountsContainer } from '../../components/accounts-container';
+import { DepositsContainer } from './deposits-container';
+import { FillsContainer } from '../../components/fills-container';
+import { PositionsContainer } from '../../components/positions-container';
+import { WithdrawalsContainer } from './withdrawals-container';
+import { OrdersContainer } from '../../components/orders-container';
+import { VegaWalletContainer } from '../../components/vega-wallet-container';
+import { LedgerContainer } from '../../components/ledger-container';
 import { AccountHistoryContainer } from './account-history-container';
-import {
-  useMarketClickHandler,
-  useMarketLiquidityClickHandler,
-} from '../../lib/hooks/use-market-click-handler';
 import {
   ResizableGrid,
   ResizableGridPanel,
 } from '../../components/resizable-grid';
-import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
 
 const WithdrawalsIndicator = () => {
   const { ready } = useIncompleteWithdrawals();
@@ -47,7 +44,6 @@ export const Portfolio = () => {
   }, [updateTitle]);
 
   const onMarketClick = useMarketClickHandler(true);
-  const onOrderTypeClick = useMarketLiquidityClickHandler();
   const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
   const wrapperClasses = 'h-full max-h-full flex flex-col';
   return (
@@ -63,29 +59,17 @@ export const Portfolio = () => {
               </Tab>
               <Tab id="positions" name={t('Positions')}>
                 <VegaWalletContainer>
-                  <PositionsContainer
-                    onMarketClick={onMarketClick}
-                    noBottomPlaceholder
-                    storeKey="portfolioPositions"
-                    allKeys
-                  />
+                  <PositionsContainer onMarketClick={onMarketClick} allKeys />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="orders" name={t('Orders')}>
                 <VegaWalletContainer>
-                  <OrderListContainer
-                    onMarketClick={onMarketClick}
-                    onOrderTypeClick={onOrderTypeClick}
-                    storeKey="portfolioOrders"
-                  />
+                  <OrdersContainer />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="fills" name={t('Fills')}>
                 <VegaWalletContainer>
-                  <FillsContainer
-                    onMarketClick={onMarketClick}
-                    storeKey="portfolioFills"
-                  />
+                  <FillsContainer onMarketClick={onMarketClick} />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="ledger-entries" name={t('Ledger entries')}>
@@ -105,10 +89,7 @@ export const Portfolio = () => {
             <Tabs storageKey="console-portfolio-bottom">
               <Tab id="collateral" name={t('Collateral')}>
                 <VegaWalletContainer>
-                  <AccountsContainer
-                    storeKey="portfolioCollateral"
-                    onMarketClick={onMarketClick}
-                  />
+                  <AccountsContainer />
                 </VegaWalletContainer>
               </Tab>
               <Tab id="deposits" name={t('Deposits')}>
diff --git a/apps/trading/components/accounts-container/accounts-container.tsx b/apps/trading/components/accounts-container/accounts-container.tsx
index 95e921101..8421843de 100644
--- a/apps/trading/components/accounts-container/accounts-container.tsx
+++ b/apps/trading/components/accounts-container/accounts-container.tsx
@@ -8,16 +8,19 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { PinnedAsset } from '@vegaprotocol/accounts';
 import { AccountManager, useTransferDialog } from '@vegaprotocol/accounts';
 import { useDepositDialog } from '@vegaprotocol/deposits';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 
 export const AccountsContainer = ({
   pinnedAsset,
   hideButtons,
-  storeKey,
   onMarketClick,
 }: {
   pinnedAsset?: PinnedAsset;
   hideButtons?: boolean;
-  storeKey?: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
 }) => {
   const { pubKey, isReadOnly } = useVegaWallet();
@@ -26,6 +29,12 @@ export const AccountsContainer = ({
   const openDepositDialog = useDepositDialog((store) => store.open);
   const openTransferDialog = useTransferDialog((store) => store.open);
 
+  const gridStore = useAccountStore((store) => store.gridStore);
+  const updateGridStore = useAccountStore((store) => store.updateGridStore);
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
+
   const onClickAsset = useCallback(
     (assetId?: string) => {
       assetId && openAssetDetailsDialog(assetId);
@@ -51,7 +60,7 @@ export const AccountsContainer = ({
         onMarketClick={onMarketClick}
         isReadOnly={isReadOnly}
         pinnedAsset={pinnedAsset}
-        storeKey={storeKey}
+        gridProps={gridStoreCallbacks}
       />
       {!isReadOnly && !hideButtons && (
         <div className="flex gap-2 justify-end p-2 px-[11px] absolute lg:fixed bottom-0 right-3 dark:bg-black/75 bg-white/75 rounded">
@@ -75,3 +84,9 @@ export const AccountsContainer = ({
     </div>
   );
 };
+
+const useAccountStore = create<DataGridSlice>()(
+  persist(createDataGridSlice, {
+    name: 'vega_accounts_store',
+  })
+);
diff --git a/apps/trading/components/fills-container/fills-container.tsx b/apps/trading/components/fills-container/fills-container.tsx
new file mode 100644
index 000000000..0be3cd532
--- /dev/null
+++ b/apps/trading/components/fills-container/fills-container.tsx
@@ -0,0 +1,49 @@
+import { t } from '@vegaprotocol/i18n';
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { FillsManager } from '@vegaprotocol/fills';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+
+export const FillsContainer = ({
+  marketId,
+  onMarketClick,
+}: {
+  marketId?: string;
+  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
+}) => {
+  const { pubKey } = useVegaWallet();
+
+  const gridStore = useFillsStore((store) => store.gridStore);
+  const updateGridStore = useFillsStore((store) => store.updateGridStore);
+
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
+
+  if (!pubKey) {
+    return (
+      <Splash>
+        <p>{t('Please connect Vega wallet')}</p>
+      </Splash>
+    );
+  }
+
+  return (
+    <FillsManager
+      partyId={pubKey}
+      marketId={marketId}
+      onMarketClick={onMarketClick}
+      gridProps={gridStoreCallbacks}
+    />
+  );
+};
+
+const useFillsStore = create<DataGridSlice>()(
+  persist(createDataGridSlice, {
+    name: 'vega_fills_store',
+  })
+);
diff --git a/apps/trading/components/fills-container/index.ts b/apps/trading/components/fills-container/index.ts
new file mode 100644
index 000000000..da6122a07
--- /dev/null
+++ b/apps/trading/components/fills-container/index.ts
@@ -0,0 +1 @@
+export * from './fills-container';
diff --git a/apps/trading/components/ledger-container/index.ts b/apps/trading/components/ledger-container/index.ts
new file mode 100644
index 000000000..ee4362f43
--- /dev/null
+++ b/apps/trading/components/ledger-container/index.ts
@@ -0,0 +1 @@
+export * from './ledger-container';
diff --git a/apps/trading/components/ledger-container/ledger-container.tsx b/apps/trading/components/ledger-container/ledger-container.tsx
new file mode 100644
index 000000000..25977711d
--- /dev/null
+++ b/apps/trading/components/ledger-container/ledger-container.tsx
@@ -0,0 +1,36 @@
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import { t } from '@vegaprotocol/i18n';
+import { LedgerManager } from '@vegaprotocol/ledger';
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export const LedgerContainer = () => {
+  const { pubKey } = useVegaWallet();
+
+  const gridStore = useLedgerStore((store) => store.gridStore);
+  const updateGridStore = useLedgerStore((store) => store.updateGridStore);
+
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
+
+  if (!pubKey) {
+    return (
+      <Splash>
+        <p>{t('Please connect Vega wallet')}</p>
+      </Splash>
+    );
+  }
+
+  return <LedgerManager partyId={pubKey} gridProps={gridStoreCallbacks} />;
+};
+
+const useLedgerStore = create<DataGridSlice>()(
+  persist(createDataGridSlice, {
+    name: 'vega_ledger_store',
+  })
+);
diff --git a/apps/trading/components/liquidity-container/index.ts b/apps/trading/components/liquidity-container/index.ts
new file mode 100644
index 000000000..13fb03eaa
--- /dev/null
+++ b/apps/trading/components/liquidity-container/index.ts
@@ -0,0 +1 @@
+export * from './liquidity-container';
diff --git a/apps/trading/components/liquidity-container/liquidity-container.tsx b/apps/trading/components/liquidity-container/liquidity-container.tsx
new file mode 100644
index 000000000..2f0eed896
--- /dev/null
+++ b/apps/trading/components/liquidity-container/liquidity-container.tsx
@@ -0,0 +1,93 @@
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import { t } from '@vegaprotocol/i18n';
+import {
+  lpAggregatedDataProvider,
+  type Filter,
+  LiquidityTable,
+  liquidityProvisionsDataProvider,
+} from '@vegaprotocol/liquidity';
+import { useMarket } from '@vegaprotocol/markets';
+import {
+  NetworkParams,
+  useNetworkParams,
+} from '@vegaprotocol/network-parameters';
+import type { AgGridReact } from 'ag-grid-react';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+import { useEffect, useRef } from 'react';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export const LiquidityContainer = ({
+  marketId,
+  filter,
+}: {
+  marketId: string | undefined;
+  filter?: Filter;
+}) => {
+  const gridRef = useRef<AgGridReact | null>(null);
+
+  const gridStore = useLiquidityStore((store) => store.gridStore);
+  const updateGridStore = useLiquidityStore((store) => store.updateGridStore);
+
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
+  const { data: market } = useMarket(marketId);
+
+  // To be removed when liquidityProvision subscriptions are working
+  useReloadLiquidityData(marketId);
+
+  const { data, error } = useDataProvider({
+    dataProvider: lpAggregatedDataProvider,
+    variables: { marketId: marketId || '', filter },
+    skip: !marketId,
+  });
+
+  const assetDecimalPlaces =
+    market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
+  const quantum =
+    market?.tradableInstrument.instrument.product.settlementAsset.quantum || 0;
+  const symbol =
+    market?.tradableInstrument.instrument.product.settlementAsset.symbol;
+
+  const { params } = useNetworkParams([
+    NetworkParams.market_liquidity_stakeToCcyVolume,
+  ]);
+  const stakeToCcyVolume = params.market_liquidity_stakeToCcyVolume;
+
+  return (
+    <div className="h-full relative">
+      <LiquidityTable
+        ref={gridRef}
+        rowData={data}
+        symbol={symbol}
+        assetDecimalPlaces={assetDecimalPlaces}
+        quantum={quantum}
+        stakeToCcyVolume={stakeToCcyVolume}
+        overlayNoRowsTemplate={error ? error.message : t('No data')}
+        {...gridStoreCallbacks}
+      />
+    </div>
+  );
+};
+
+const useReloadLiquidityData = (marketId: string | undefined) => {
+  const { reload } = useDataProvider({
+    dataProvider: liquidityProvisionsDataProvider,
+    variables: { marketId: marketId || '' },
+    update: () => true,
+    skip: !marketId,
+  });
+  useEffect(() => {
+    const interval = setInterval(reload, 30000);
+    return () => clearInterval(interval);
+  }, [reload]);
+};
+
+const useLiquidityStore = create<DataGridSlice>()(
+  persist(createDataGridSlice, {
+    name: 'vega_ledger_store',
+  })
+);
diff --git a/apps/trading/components/orders-container/index.ts b/apps/trading/components/orders-container/index.ts
new file mode 100644
index 000000000..f528b285e
--- /dev/null
+++ b/apps/trading/components/orders-container/index.ts
@@ -0,0 +1 @@
+export * from './orders-container';
diff --git a/apps/trading/components/orders-container/orders-container.spec.tsx b/apps/trading/components/orders-container/orders-container.spec.tsx
new file mode 100644
index 000000000..531464d50
--- /dev/null
+++ b/apps/trading/components/orders-container/orders-container.spec.tsx
@@ -0,0 +1,106 @@
+import { act, renderHook } from '@testing-library/react';
+import {
+  FilterStatusValue,
+  STORAGE_KEY,
+  useOrderListGridState,
+} from './orders-container';
+import { Filter } from '@vegaprotocol/orders';
+import { OrderType } from '@vegaprotocol/types';
+
+describe('useOrderListGridState', () => {
+  afterAll(() => {
+    localStorage.clear();
+  });
+
+  const setup = (filter: Filter | undefined) => {
+    return renderHook(() => useOrderListGridState(filter));
+  };
+
+  it.each(Object.values(Filter))(
+    'providers correct AgGrid filter for %s',
+    (filter) => {
+      const { result } = setup(filter);
+      expect(typeof result.current.updateGridState).toBe('function');
+      expect(result.current.gridState).toEqual({
+        columnState: undefined,
+        filterModel: {
+          status: {
+            value: FilterStatusValue[filter],
+          },
+        },
+      });
+    }
+  );
+
+  it('provides correct AgGrid filter for all', () => {
+    const { result } = setup(undefined);
+    expect(typeof result.current.updateGridState).toBe('function');
+    expect(result.current.gridState).toEqual({
+      columnState: undefined,
+      filterModel: undefined,
+    });
+  });
+
+  it.each(Object.values(Filter))(
+    'sets and stores column state and filters for %s',
+    (filter) => {
+      const filterModel = {
+        type: {
+          value: [OrderType.TYPE_LIMIT],
+        },
+      };
+      const { result } = setup(filter);
+
+      act(() => {
+        result.current.updateGridState(filter, {
+          filterModel,
+        });
+      });
+
+      expect(result.current.gridState).toEqual({
+        columnState: undefined,
+        filterModel: {
+          ...filterModel,
+          status: {
+            value: FilterStatusValue[filter],
+          },
+        },
+      });
+
+      const columnState = [{ colId: 'status', width: 200 }];
+
+      act(() => {
+        result.current.updateGridState(filter, {
+          columnState,
+        });
+      });
+
+      expect(result.current.gridState).toEqual({
+        columnState,
+        filterModel: {
+          ...filterModel,
+          status: {
+            value: FilterStatusValue[filter],
+          },
+        },
+      });
+
+      const storeKeyMap = {
+        [Filter.Open]: 'open',
+        [Filter.Rejected]: 'rejected',
+        [Filter.Closed]: 'closed',
+      };
+
+      expect(JSON.parse(localStorage.getItem(STORAGE_KEY) || '')).toMatchObject(
+        {
+          state: {
+            [storeKeyMap[filter]]: {
+              columnState,
+              filterModel, // no need to check that status is set, hook will return status
+            },
+          },
+        }
+      );
+    }
+  );
+});
diff --git a/apps/trading/components/orders-container/orders-container.tsx b/apps/trading/components/orders-container/orders-container.tsx
new file mode 100644
index 000000000..2f9773be5
--- /dev/null
+++ b/apps/trading/components/orders-container/orders-container.tsx
@@ -0,0 +1,166 @@
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import { t } from '@vegaprotocol/i18n';
+import { Filter } from '@vegaprotocol/orders';
+import { OrderListManager } from '@vegaprotocol/orders';
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import {
+  useMarketClickHandler,
+  useMarketLiquidityClickHandler,
+} from '../../lib/hooks/use-market-click-handler';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { DataGridStore } from '../../stores/datagrid-store-slice';
+import { OrderStatus } from '@vegaprotocol/types';
+
+export const FilterStatusValue = {
+  [Filter.Open]: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
+  [Filter.Closed]: [
+    OrderStatus.STATUS_CANCELLED,
+    OrderStatus.STATUS_EXPIRED,
+    OrderStatus.STATUS_FILLED,
+    OrderStatus.STATUS_PARTIALLY_FILLED,
+    OrderStatus.STATUS_STOPPED,
+  ],
+  [Filter.Rejected]: [OrderStatus.STATUS_REJECTED],
+};
+
+export interface OrderContainerProps {
+  marketId?: string;
+  filter?: Filter;
+}
+
+export const OrdersContainer = ({ marketId, 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);
+  });
+
+  if (!pubKey) {
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
+  }
+
+  return (
+    <OrderListManager
+      partyId={pubKey}
+      marketId={marketId}
+      filter={filter}
+      onMarketClick={onMarketClick}
+      onOrderTypeClick={onOrderTypeClick}
+      isReadOnly={isReadOnly}
+      gridProps={gridStoreCallbacks}
+    />
+  );
+};
+
+export const STORAGE_KEY = 'vega_order_list_store';
+const useOrderListStore = create<{
+  open: DataGridStore;
+  closed: DataGridStore;
+  rejected: DataGridStore;
+  all: DataGridStore;
+  update: (filter: Filter | undefined, gridStore: DataGridStore) => void;
+}>()(
+  persist(
+    (set) => ({
+      open: {},
+      closed: {},
+      rejected: {},
+      all: {},
+      update: (filter, newStore) => {
+        switch (filter) {
+          case Filter.Open: {
+            set((curr) => ({
+              open: {
+                ...curr.open,
+                ...newStore,
+              },
+            }));
+            return;
+          }
+          case Filter.Closed: {
+            set((curr) => ({
+              closed: {
+                ...curr.closed,
+                ...newStore,
+              },
+            }));
+            return;
+          }
+          case Filter.Rejected: {
+            set((curr) => ({
+              rejected: {
+                ...curr.rejected,
+                ...newStore,
+              },
+            }));
+            return;
+          }
+          case undefined: {
+            set((curr) => ({
+              all: {
+                ...curr.all,
+                ...newStore,
+              },
+            }));
+            return;
+          }
+        }
+      },
+    }),
+    {
+      name: STORAGE_KEY,
+    }
+  )
+);
+
+export const useOrderListGridState = (filter: Filter | undefined) => {
+  const updateGridState = useOrderListStore((store) => store.update);
+  const gridState = useOrderListStore((store) => {
+    // Return the column/filter state for the given filter but ensuring that
+    // each filter controlled by the tab is always applied
+    switch (filter) {
+      case Filter.Open: {
+        return {
+          columnState: store.open.columnState,
+          filterModel: {
+            ...store.open.filterModel,
+            status: {
+              value: FilterStatusValue[Filter.Open],
+            },
+          },
+        };
+      }
+      case Filter.Closed: {
+        return {
+          columnState: store.closed.columnState,
+          filterModel: {
+            ...store.closed.filterModel,
+            status: {
+              value: FilterStatusValue[Filter.Closed],
+            },
+          },
+        };
+      }
+      case Filter.Rejected: {
+        return {
+          columnState: store.rejected.columnState,
+          filterModel: {
+            ...store.rejected.filterModel,
+            status: {
+              value: FilterStatusValue[Filter.Rejected],
+            },
+          },
+        };
+      }
+      default: {
+        return store.all;
+      }
+    }
+  });
+
+  return { gridState, updateGridState };
+};
diff --git a/apps/trading/components/positions-container/index.ts b/apps/trading/components/positions-container/index.ts
new file mode 100644
index 000000000..024171651
--- /dev/null
+++ b/apps/trading/components/positions-container/index.ts
@@ -0,0 +1 @@
+export * from './positions-container';
diff --git a/libs/positions/src/lib/positions-container.tsx b/apps/trading/components/positions-container/positions-container.tsx
similarity index 51%
rename from libs/positions/src/lib/positions-container.tsx
rename to apps/trading/components/positions-container/positions-container.tsx
index 65792f501..72bb9965e 100644
--- a/libs/positions/src/lib/positions-container.tsx
+++ b/apps/trading/components/positions-container/positions-container.tsx
@@ -1,21 +1,28 @@
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { t } from '@vegaprotocol/i18n';
+import { PositionsManager } from '@vegaprotocol/positions';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { PositionsManager } from './positions-manager';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 export const PositionsContainer = ({
   onMarketClick,
-  noBottomPlaceholder,
-  storeKey,
   allKeys,
 }: {
   onMarketClick?: (marketId: string) => void;
-  noBottomPlaceholder?: boolean;
-  storeKey?: string;
   allKeys?: boolean;
 }) => {
   const { pubKey, pubKeys, isReadOnly } = useVegaWallet();
 
+  const gridStore = usePositionsStore((store) => store.gridStore);
+  const updateGridStore = usePositionsStore((store) => store.updateGridStore);
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
+
   if (!pubKey) {
     return (
       <Splash>
@@ -38,8 +45,13 @@ export const PositionsContainer = ({
       partyIds={partyIds}
       onMarketClick={onMarketClick}
       isReadOnly={isReadOnly}
-      noBottomPlaceholder={noBottomPlaceholder}
-      storeKey={storeKey}
+      gridProps={gridStoreCallbacks}
     />
   );
 };
+
+const usePositionsStore = create<DataGridSlice>()(
+  persist(createDataGridSlice, {
+    name: 'vega_positions_store',
+  })
+);
diff --git a/apps/trading/stores/datagrid-store-slice.ts b/apps/trading/stores/datagrid-store-slice.ts
new file mode 100644
index 000000000..3886371a8
--- /dev/null
+++ b/apps/trading/stores/datagrid-store-slice.ts
@@ -0,0 +1,25 @@
+import type { ColumnState } from 'ag-grid-community';
+import type { StateCreator } from 'zustand';
+
+export type DataGridStore = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filterModel?: { [key: string]: any };
+  columnState?: ColumnState[];
+};
+
+export type DataGridSlice = {
+  gridStore: DataGridStore;
+  updateGridStore: (gridStore: DataGridStore) => void;
+};
+
+export const createDataGridSlice: StateCreator<DataGridSlice> = (set) => ({
+  gridStore: {},
+  updateGridStore: (newStore) => {
+    set((curr) => ({
+      gridStore: {
+        ...curr.gridStore,
+        ...newStore,
+      },
+    }));
+  },
+});
diff --git a/libs/accounts/src/lib/accounts-manager.spec.tsx b/libs/accounts/src/lib/accounts-manager.spec.tsx
index 0278ff546..98aefbbb5 100644
--- a/libs/accounts/src/lib/accounts-manager.spec.tsx
+++ b/libs/accounts/src/lib/accounts-manager.spec.tsx
@@ -7,6 +7,7 @@ import {
 } from '@testing-library/react';
 import * as helpers from '@vegaprotocol/data-provider';
 import { AccountManager } from './accounts-manager';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 
 const mockedUseDataProvider = jest.fn();
 jest.mock('@vegaprotocol/data-provider', () => ({
@@ -14,6 +15,13 @@ jest.mock('@vegaprotocol/data-provider', () => ({
   useDataProvider: jest.fn(() => mockedUseDataProvider()),
 }));
 
+const gridProps = {
+  onGridReady: jest.fn(),
+  onColumnResized: jest.fn(),
+  onFilterChanged: jest.fn(),
+  onSortChanged: jest.fn(),
+} as unknown as ReturnType<typeof useDataGridEvents>;
+
 describe('AccountManager', () => {
   describe('when rerender', () => {
     beforeEach(() => {
@@ -43,6 +51,7 @@ describe('AccountManager', () => {
           partyId="partyOne"
           onClickAsset={jest.fn}
           isReadOnly={false}
+          gridProps={gridProps}
         />
       );
       expect(
@@ -55,6 +64,7 @@ describe('AccountManager', () => {
             partyId="partyTwo"
             onClickAsset={jest.fn}
             isReadOnly={false}
+            gridProps={gridProps}
           />
         );
       });
@@ -72,6 +82,7 @@ describe('AccountManager', () => {
             partyId="partyOne"
             onClickAsset={jest.fn}
             isReadOnly={false}
+            gridProps={gridProps}
           />
         );
         rerenderer = rerender;
@@ -85,6 +96,7 @@ describe('AccountManager', () => {
             partyId="partyOne"
             onClickAsset={jest.fn}
             isReadOnly={false}
+            gridProps={gridProps}
           />
         );
       });
@@ -110,6 +122,7 @@ describe('AccountManager', () => {
           partyId="partyOne"
           onClickAsset={jest.fn}
           isReadOnly={false}
+          gridProps={gridProps}
         />
       );
     });
diff --git a/libs/accounts/src/lib/accounts-manager.tsx b/libs/accounts/src/lib/accounts-manager.tsx
index 1caf44f32..3cf83f196 100644
--- a/libs/accounts/src/lib/accounts-manager.tsx
+++ b/libs/accounts/src/lib/accounts-manager.tsx
@@ -11,6 +11,7 @@ import type { PinnedAsset } from './accounts-table';
 import { AccountTable } from './accounts-table';
 import { Dialog } from '@vegaprotocol/ui-toolkit';
 import BreakdownTable from './breakdown-table';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 
 const AccountBreakdown = ({
   assetId,
@@ -102,7 +103,7 @@ interface AccountManagerProps {
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   isReadOnly: boolean;
   pinnedAsset?: PinnedAsset;
-  storeKey?: string;
+  gridProps?: ReturnType<typeof useDataGridEvents>;
 }
 
 export const AccountManager = ({
@@ -112,12 +113,11 @@ export const AccountManager = ({
   partyId,
   isReadOnly,
   pinnedAsset,
-  storeKey,
   onMarketClick,
+  gridProps,
 }: AccountManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const [breakdownAssetId, setBreakdownAssetId] = useState<string>();
-
   const { data, error } = useDataProvider({
     dataProvider: aggregatedAccountsDataProvider,
     variables: { partyId },
@@ -144,8 +144,8 @@ export const AccountManager = ({
         onClickBreakdown={setBreakdownAssetId}
         isReadOnly={isReadOnly}
         pinnedAsset={pinnedAsset}
-        storeKey={storeKey}
         overlayNoRowsTemplate={error ? error.message : t('No accounts')}
+        {...gridProps}
       />
       <AccountBreakdownDialog
         assetId={breakdownAssetId}
diff --git a/libs/accounts/src/lib/accounts-table.tsx b/libs/accounts/src/lib/accounts-table.tsx
index 9be141c2b..54755ac45 100644
--- a/libs/accounts/src/lib/accounts-table.tsx
+++ b/libs/accounts/src/lib/accounts-table.tsx
@@ -73,7 +73,6 @@ export interface AccountTableProps extends AgGridReactProps {
   onClickBreakdown?: (assetId: string) => void;
   isReadOnly: boolean;
   pinnedAsset?: PinnedAsset;
-  storeKey?: string;
 }
 
 export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
@@ -307,7 +306,6 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
       <AgGrid
         {...props}
         style={{ width: '100%', height: '100%' }}
-        overlayNoRowsTemplate={t('No accounts')}
         getRowId={({ data }: { data: AccountFields }) => data.asset.id}
         ref={ref}
         tooltipShowDelay={500}
diff --git a/libs/datagrid/src/index.ts b/libs/datagrid/src/index.ts
index 3d6e42cad..94443e56b 100644
--- a/libs/datagrid/src/index.ts
+++ b/libs/datagrid/src/index.ts
@@ -1,5 +1,4 @@
 export * from './lib/ag-grid/ag-grid-lazy';
-export * from './lib/ag-grid/use-column-sizes';
 
 export * from './lib/column-definitions';
 
@@ -24,4 +23,4 @@ export * from './lib/type-helpers';
 export * from './lib/cells/grid-progress-bar';
 
 export * from './lib/ag-grid-update';
-export * from './lib/use-bottom-placeholder';
+export * from './lib/use-datagrid-events';
diff --git a/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx b/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx
index 43f48c74e..641e20fcf 100644
--- a/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx
+++ b/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx
@@ -2,23 +2,16 @@ import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
 import { AgGridReact } from 'ag-grid-react';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/i18n';
-import { useColumnSizes } from './use-column-sizes';
 import classNames from 'classnames';
 
 export const AgGridThemed = ({
   style,
   gridRef,
-  storeKey,
   ...props
 }: (AgGridReactProps | AgReactUiProps) & {
   style?: React.CSSProperties;
   gridRef?: React.ForwardedRef<AgGridReact>;
-  storeKey?: string;
 }) => {
-  const commonColumnCallbacks = useColumnSizes({
-    storeKey,
-    props,
-  });
   const { theme } = useThemeSwitcher();
   const defaultProps = {
     rowHeight: 22,
@@ -36,12 +29,7 @@ export const AgGridThemed = ({
 
   return (
     <div className={wrapperClasses} style={style}>
-      <AgGridReact
-        {...defaultProps}
-        {...props}
-        {...commonColumnCallbacks}
-        ref={gridRef}
-      />
+      <AgGridReact {...defaultProps} {...props} ref={gridRef} />
     </div>
   );
 };
diff --git a/libs/datagrid/src/lib/ag-grid/ag-grid-lazy.tsx b/libs/datagrid/src/lib/ag-grid/ag-grid-lazy.tsx
index bfde6171d..5d550d940 100644
--- a/libs/datagrid/src/lib/ag-grid/ag-grid-lazy.tsx
+++ b/libs/datagrid/src/lib/ag-grid/ag-grid-lazy.tsx
@@ -4,7 +4,6 @@ import type { AgGridReactProps, AgGridReact } from 'ag-grid-react';
 type Props = AgGridReactProps & {
   style?: React.CSSProperties;
   gridRef?: React.Ref<AgGridReact>;
-  storeKey?: string;
 };
 
 export const AgGridLazyInternal = lazy(() =>
diff --git a/libs/datagrid/src/lib/ag-grid/use-column-sizes.spec.ts b/libs/datagrid/src/lib/ag-grid/use-column-sizes.spec.ts
deleted file mode 100644
index 3399df88e..000000000
--- a/libs/datagrid/src/lib/ag-grid/use-column-sizes.spec.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import type {
-  Column,
-  ColumnResizedEvent,
-  GridSizeChangedEvent,
-  GridReadyEvent,
-} from 'ag-grid-community';
-import { renderHook, act, waitFor } from '@testing-library/react';
-import { useColumnSizes } from './use-column-sizes';
-import * as reactHelpers from '@vegaprotocol/react-helpers';
-
-const mockApis = {
-  api: {
-    sizeColumnsToFit: jest.fn(),
-  },
-  columnApi: {
-    setColumnWidths: jest.fn(),
-  },
-};
-
-const mockValueSetter = jest.fn();
-const mockStore = {
-  sizes: { testid: { col1: 100 } },
-  valueSetter: mockValueSetter,
-};
-jest.mock('zustand', () => ({
-  ...jest.requireActual('zustand'),
-  create: () =>
-    jest.fn(() =>
-      jest.fn().mockImplementation((creator) => {
-        return creator(mockStore);
-      })
-    ),
-}));
-describe('UseColumnSizes hook', () => {
-  const storeKey = 'testid';
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('should return proper methods', () => {
-    const { result } = renderHook(() =>
-      useColumnSizes({ storeKey, props: {} })
-    );
-    expect(Object.keys(result.current)).toHaveLength(3);
-    expect(result.current).toStrictEqual({
-      onColumnResized: expect.any(Function),
-      onGridReady: expect.any(Function),
-      onGridSizeChanged: expect.any(Function),
-    });
-  });
-
-  it('onGridSizeChanged should call setSize', async () => {
-    jest
-      .spyOn(reactHelpers, 'useScreenDimensions')
-      .mockReturnValue({ screenSize: 'xxl' });
-    const { result } = renderHook(() =>
-      useColumnSizes({ storeKey, props: {} })
-    );
-    await act(() => {
-      result.current.onGridSizeChanged?.({
-        clientWidth: 1000,
-        ...mockApis,
-      } as GridSizeChangedEvent);
-    });
-    await waitFor(() => {
-      expect(mockApis.columnApi.setColumnWidths).toHaveBeenCalledWith([
-        { key: 'col1', newWidth: 100 },
-      ]);
-    });
-  });
-
-  it('onColumnResized should fill up store', async () => {
-    const columns: Column[] = [
-      { getColId: () => 'col1', getActualWidth: () => 100 },
-      { getColId: () => 'col2', getActualWidth: () => 200 },
-    ] as Column[];
-    const sizeObj = { col1: 100, col2: 200, clientWidth: 1000 };
-    const { result } = renderHook(() =>
-      useColumnSizes({ storeKey, props: {} })
-    );
-    await act(() => {
-      result.current.onGridSizeChanged?.({
-        clientWidth: 1000,
-        ...mockApis,
-      } as GridSizeChangedEvent);
-    });
-    await act(() => {
-      result.current.onColumnResized?.({
-        columns,
-        finished: true,
-        source: 'uiColumnDragged',
-        ...mockApis,
-      } as ColumnResizedEvent);
-    });
-    await waitFor(() => {
-      expect(mockValueSetter).toHaveBeenCalledWith(storeKey, sizeObj);
-    });
-  });
-
-  it('onGridReady should call setSizes', async () => {
-    const props = { onGridReady: jest.fn() };
-
-    const { result } = renderHook(() => useColumnSizes({ storeKey, props }));
-    const obTest = { cool: 1, ...mockApis };
-    await act(() => {
-      result.current.onGridReady?.(obTest as GridReadyEvent);
-    });
-    expect(props.onGridReady).toHaveBeenCalledWith(obTest);
-    expect(mockApis.api.sizeColumnsToFit).toHaveBeenCalledWith();
-  });
-
-  it('if no storeKey should be transparent', () => {
-    const { result } = renderHook(() =>
-      useColumnSizes({ storeKey: '', props: {} })
-    );
-    expect(result.current).toStrictEqual({
-      onColumnResized: undefined,
-      onGridReady: undefined,
-      onGridSizeChanged: undefined,
-    });
-  });
-});
diff --git a/libs/datagrid/src/lib/ag-grid/use-column-sizes.ts b/libs/datagrid/src/lib/ag-grid/use-column-sizes.ts
deleted file mode 100644
index aaa06d816..000000000
--- a/libs/datagrid/src/lib/ag-grid/use-column-sizes.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { useCallback, useRef } from 'react';
-import type {
-  GridSizeChangedEvent,
-  GridReadyEvent,
-  ColumnResizedEvent,
-} from 'ag-grid-community';
-import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { immer } from 'zustand/middleware/immer';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
-
-const STORAGE_KEY = 'vega_columns_sizes_store';
-
-export const useColumnSizesStore = create<{
-  sizes: Record<string, Record<string, number>>;
-  valueSetter: (storeKey: string, value: Record<string, number>) => void;
-}>()(
-  persist(
-    immer((set) => ({
-      sizes: {},
-      valueSetter: (storeKey, value) =>
-        set((state) => {
-          state.sizes[storeKey] = {
-            ...(state.sizes[storeKey] || {}),
-            ...value,
-          };
-          return state;
-        }),
-    })),
-    { name: STORAGE_KEY }
-  )
-);
-
-interface UseColumnSizesProps {
-  props: AgGridReactProps | AgReactUiProps;
-  storeKey?: string;
-}
-
-export const useColumnSizes = ({
-  storeKey = '',
-  props,
-}: UseColumnSizesProps): {
-  onColumnResized?: (event: ColumnResizedEvent) => void;
-  onGridReady?: (event: GridReadyEvent) => void;
-  onGridSizeChanged?: (event: GridSizeChangedEvent) => void;
-} => {
-  const sizes = useColumnSizesStore((store) => store.sizes[storeKey] || {});
-  const valueSetter = useColumnSizesStore((store) => store.valueSetter);
-  const widthRef = useRef(sizes['clientWidth'] || 0);
-  const {
-    onColumnResized: parentOnColumnResized,
-    onGridReady: parentOnGridReady,
-    onGridSizeChanged: parentOnGridSizeChanged,
-  } = props;
-  const recalculateSizes = useCallback((sizes: Record<string, number>) => {
-    if (
-      widthRef.current &&
-      sizes['clientWidth'] &&
-      widthRef.current !== sizes['clientWidth']
-    ) {
-      const oldWidth = sizes['clientWidth'];
-      const ratio = widthRef.current / oldWidth;
-      return {
-        ...Object.entries(sizes).reduce((agg, [key, value]) => {
-          agg[key] = value * ratio;
-          return agg;
-        }, {} as Record<string, number>),
-        width: widthRef.current,
-      } as Record<string, number>;
-    }
-    return sizes;
-  }, []);
-
-  const onColumnResized = useCallback(
-    (event: ColumnResizedEvent) => {
-      parentOnColumnResized?.(event);
-      if (
-        storeKey &&
-        event.source === 'uiColumnDragged' &&
-        event.finished &&
-        widthRef.current
-      ) {
-        const { columns } = event;
-        if (columns?.length) {
-          const sizesObj = columns.reduce((aggr, column) => {
-            aggr[column.getColId()] = column.getActualWidth();
-            return aggr;
-          }, {} as Record<string, number>);
-          sizesObj['clientWidth'] = widthRef.current;
-          valueSetter(storeKey, sizesObj);
-        }
-      }
-    },
-    [valueSetter, storeKey, parentOnColumnResized]
-  );
-  const { screenSize } = useScreenDimensions();
-  const largeScreen = ['xl', 'xxl', 'xxxl'].includes(screenSize);
-  const setSizes = useCallback(
-    (apiEvent: GridReadyEvent | GridSizeChangedEvent) => {
-      if (!storeKey || !Object.keys(sizes).length || !widthRef.current) {
-        largeScreen && apiEvent?.api.sizeColumnsToFit();
-      } else {
-        const recalculatedSizes = recalculateSizes(sizes);
-        const newSizes = Object.entries(recalculatedSizes).map(
-          ([key, size]) => ({
-            key,
-            newWidth: size,
-          })
-        );
-        apiEvent.columnApi.setColumnWidths(newSizes);
-      }
-    },
-    [storeKey, recalculateSizes, sizes, largeScreen]
-  );
-
-  const onGridReady = useCallback(
-    (event: GridReadyEvent) => {
-      parentOnGridReady?.(event);
-      setSizes(event);
-    },
-    [setSizes, parentOnGridReady]
-  );
-
-  const onGridSizeChanged = useCallback(
-    (event: GridSizeChangedEvent) => {
-      parentOnGridSizeChanged?.(event);
-      widthRef.current = event.clientWidth;
-      setSizes(event);
-    },
-    [parentOnGridSizeChanged, setSizes]
-  );
-  if (storeKey) {
-    return {
-      onGridReady,
-      onGridSizeChanged,
-      onColumnResized,
-    };
-  }
-  return {
-    onGridReady: parentOnGridReady,
-    onGridSizeChanged: parentOnGridSizeChanged,
-    onColumnResized: parentOnColumnResized,
-  };
-};
diff --git a/libs/datagrid/src/lib/use-bottom-placeholder.tsx b/libs/datagrid/src/lib/use-bottom-placeholder.tsx
deleted file mode 100644
index 0497acac2..000000000
--- a/libs/datagrid/src/lib/use-bottom-placeholder.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { RefObject } from 'react';
-import { useCallback, useMemo } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
-import type { IsFullWidthRowParams, RowHeightParams } from 'ag-grid-community';
-
-const NO_HOVER_CSS_RULE = { 'no-hover': 'data?.isLastPlaceholder' };
-const ROW_ID = 'bottom-placeholder';
-const fullWidthCellRenderer = () => null;
-const isFullWidthRow = (params: IsFullWidthRowParams) =>
-  params.rowNode.data?.isLastPlaceholder;
-
-interface Props {
-  gridRef: RefObject<AgGridReact>;
-  disabled?: boolean;
-}
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const useBottomPlaceholder = ({ gridRef, disabled }: Props) => {
-  const onBodyScrollEnd = useCallback(() => {
-    const rowCont = gridRef.current?.api.getDisplayedRowCount() ?? 0;
-    if (rowCont) {
-      const lastRow = gridRef.current?.api.getDisplayedRowAtIndex(rowCont - 1);
-      if (lastRow && lastRow.data) {
-        const placeholderRow = {
-          ...lastRow.data,
-          isLastPlaceholder: true,
-          id: ROW_ID,
-        };
-        const transaction = gridRef.current?.api.getRowNode(ROW_ID)
-          ? { update: [placeholderRow] }
-          : { add: [placeholderRow] };
-        gridRef.current?.api.applyTransaction(transaction);
-      }
-    }
-  }, [gridRef]);
-
-  const onRowsChanged = useCallback(() => {
-    const placeholderNode = gridRef.current?.api.getRowNode(ROW_ID);
-    if (placeholderNode) {
-      const transaction = {
-        remove: [placeholderNode.data],
-      };
-      gridRef.current?.api.applyTransaction(transaction);
-    }
-    onBodyScrollEnd();
-  }, [gridRef, onBodyScrollEnd]);
-
-  const getRowHeight = useCallback(
-    (params: RowHeightParams) =>
-      params.data?.isLastPlaceholder ? 50 : undefined,
-    []
-  );
-
-  return useMemo(
-    () =>
-      !disabled
-        ? {
-            onBodyScrollEnd,
-            rowClassRules: NO_HOVER_CSS_RULE,
-            isFullWidthRow,
-            fullWidthCellRenderer,
-            onSortChanged: onRowsChanged,
-            onFilterChanged: onRowsChanged,
-            getRowHeight,
-          }
-        : {},
-    [onBodyScrollEnd, onRowsChanged, disabled, getRowHeight]
-  );
-};
diff --git a/libs/datagrid/src/lib/use-datagrid-events.spec.tsx b/libs/datagrid/src/lib/use-datagrid-events.spec.tsx
new file mode 100644
index 000000000..073fc00f6
--- /dev/null
+++ b/libs/datagrid/src/lib/use-datagrid-events.spec.tsx
@@ -0,0 +1,185 @@
+import { act, render, waitFor } from '@testing-library/react';
+import {
+  useDataGridEvents,
+  GRID_EVENT_DEBOUNCE_TIME,
+} from './use-datagrid-events';
+import { AgGridThemed } from './ag-grid/ag-grid-lazy-themed';
+import type { MutableRefObject } from 'react';
+import { useRef } from 'react';
+import type { AgGridReact } from 'ag-grid-react';
+
+const gridProps = {
+  rowData: [{ id: 1 }],
+  columnDefs: [
+    {
+      field: 'id',
+      width: 100,
+      resizable: true,
+      filter: 'agNumberColumnFilter',
+    },
+  ],
+  style: { width: 500, height: 300 },
+};
+
+// Not using render hook so I can pass event callbacks
+// to a rendered grid
+function setup(...args: Parameters<typeof useDataGridEvents>) {
+  let gridRef;
+
+  function TestComponent() {
+    const hookCallbacks = useDataGridEvents(...args);
+    gridRef = useRef<AgGridReact | null>(null);
+    return <AgGridThemed gridRef={gridRef} {...gridProps} {...hookCallbacks} />;
+  }
+  render(<TestComponent />);
+  return gridRef as unknown as MutableRefObject<AgGridReact>;
+}
+
+describe('useDataGridEvents', () => {
+  const originalWarn = console.warn;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+
+    // disabling some ag grid warnings that are caused by test setup only
+    console.warn = () => undefined;
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+    console.warn = originalWarn;
+  });
+
+  it('default state is set and callback is called on column or filter event', async () => {
+    const callback = jest.fn();
+    const initialState = {
+      filterModel: undefined,
+      columnState: undefined,
+    };
+
+    const result = setup(initialState, callback);
+
+    // column state was not updated, so the default width provided by the
+    // col def should be set
+    expect(result.current.columnApi.getColumnState()[0].width).toEqual(
+      gridProps.columnDefs[0].width
+    );
+    // no filters set
+    expect(result.current.api.getFilterModel()).toEqual({});
+
+    const newWidth = 400;
+
+    // Set col width
+    await act(async () => {
+      result.current.columnApi.setColumnWidth('id', newWidth);
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
+    });
+
+    expect(callback).toHaveBeenCalledWith({
+      columnState: [expect.objectContaining({ colId: 'id', width: newWidth })],
+      filterModel: {},
+    });
+    callback.mockClear();
+    expect(result.current.columnApi.getColumnState()[0].width).toEqual(
+      newWidth
+    );
+
+    // Set filter
+    await act(async () => {
+      result.current.columnApi.applyColumnState({
+        state: [{ colId: 'id', sort: 'asc' }],
+        applyOrder: true,
+      });
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
+    });
+
+    expect(callback).toHaveBeenCalledWith({
+      columnState: [expect.objectContaining({ colId: 'id', sort: 'asc' })],
+      filterModel: {},
+    });
+    callback.mockClear();
+    expect(result.current.columnApi.getColumnState()[0].sort).toEqual('asc');
+
+    // Set filter
+    const idFilter = {
+      filter: 1,
+      filterType: 'number',
+      type: 'equals',
+    };
+    await act(async () => {
+      result.current.api.setFilterModel({
+        id: idFilter,
+      });
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
+    });
+
+    expect(callback).toHaveBeenCalledWith({
+      columnState: expect.any(Object),
+      filterModel: {
+        id: idFilter,
+      },
+    });
+    callback.mockClear();
+    expect(result.current.api.getFilterModel()['id']).toEqual(idFilter);
+  });
+
+  it('applies grid state on ready', async () => {
+    const idFilter = {
+      filter: 1,
+      filterType: 'number',
+      type: 'equals',
+    };
+    const colState = { colId: 'id', width: 300, sort: 'desc' as const };
+    const initialState = {
+      filterModel: {
+        id: idFilter,
+      },
+      columnState: [colState],
+    };
+
+    const result = setup(initialState, jest.fn());
+
+    await waitFor(() => {
+      expect(result.current.api.getFilterModel()['id']).toEqual(idFilter);
+      expect(result.current.columnApi.getColumnState()[0]).toEqual(
+        expect.objectContaining(colState)
+      );
+    });
+  });
+
+  it('debounces events', async () => {
+    const callback = jest.fn();
+    const initialState = {
+      filterModel: undefined,
+      columnState: undefined,
+    };
+
+    const result = setup(initialState, callback);
+
+    const newWidth = 400;
+
+    // Set col width multiple times
+    await act(async () => {
+      result.current.columnApi.setColumnWidth('id', newWidth);
+      result.current.columnApi.setColumnWidth('id', newWidth);
+      result.current.columnApi.setColumnWidth('id', newWidth);
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+
+    act(() => {
+      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/libs/datagrid/src/lib/use-datagrid-events.ts b/libs/datagrid/src/lib/use-datagrid-events.ts
new file mode 100644
index 000000000..305ab703b
--- /dev/null
+++ b/libs/datagrid/src/lib/use-datagrid-events.ts
@@ -0,0 +1,66 @@
+import debounce from 'lodash/debounce';
+import type {
+  ColumnResizedEvent,
+  ColumnState,
+  FilterChangedEvent,
+  GridReadyEvent,
+  SortChangedEvent,
+} from 'ag-grid-community';
+import { useCallback, useMemo } from 'react';
+
+type State = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filterModel?: { [key: string]: any };
+  columnState?: ColumnState[];
+};
+
+type Event = ColumnResizedEvent | FilterChangedEvent | SortChangedEvent;
+
+export const GRID_EVENT_DEBOUNCE_TIME = 300;
+
+export const useDataGridEvents = (
+  state: State,
+  callback: (data: State) => void
+) => {
+  // This function can be called very frequently by the onColumnResized
+  // grid callback, so its memoized to only update after resizing is finished
+  const onGridChange = useMemo(
+    () =>
+      debounce(({ api, columnApi }: Event) => {
+        if (!api || !columnApi) return;
+        const columnState = columnApi.getColumnState();
+        const filterModel = api.getFilterModel();
+        callback({ columnState, filterModel });
+      }, GRID_EVENT_DEBOUNCE_TIME),
+    [callback]
+  );
+
+  // check if we have stored column states or filter models and apply if we do
+  const onGridReady = useCallback(
+    ({ api, columnApi }: GridReadyEvent) => {
+      if (!api || !columnApi) return;
+
+      if (state.columnState) {
+        columnApi.applyColumnState({
+          state: state.columnState,
+          applyOrder: true,
+        });
+      } else {
+        // ensure columns fit available space if no widths are set
+        api.sizeColumnsToFit();
+      }
+
+      if (state.filterModel) {
+        api.setFilterModel(state.filterModel);
+      }
+    },
+    [state]
+  );
+
+  return {
+    onGridReady,
+    onColumnResized: onGridChange,
+    onFilterChanged: onGridChange,
+    onSortChanged: onGridChange,
+  };
+};
diff --git a/libs/deposits/src/lib/deposits-table.tsx b/libs/deposits/src/lib/deposits-table.tsx
index a22103a0a..5fc838366 100644
--- a/libs/deposits/src/lib/deposits-table.tsx
+++ b/libs/deposits/src/lib/deposits-table.tsx
@@ -24,10 +24,8 @@ export const DepositsTable = forwardRef<
   return (
     <AgGrid
       ref={ref}
-      defaultColDef={{ resizable: true }}
+      defaultColDef={{ flex: 1 }}
       style={{ width: '100%', height: '100%' }}
-      suppressCellFocus={true}
-      storeKey="depositTable"
       {...props}
     >
       <AgGridColumn headerName="Asset" field="asset.symbol" />
diff --git a/libs/fills/src/index.ts b/libs/fills/src/index.ts
index 75a360902..5a1c1b64c 100644
--- a/libs/fills/src/index.ts
+++ b/libs/fills/src/index.ts
@@ -1,3 +1,3 @@
-export * from './lib/fills-container';
+export * from './lib/fills-manager';
 export * from './lib/fills-data-provider';
 export * from './lib/__generated__/Fills';
diff --git a/libs/fills/src/lib/fills-container.tsx b/libs/fills/src/lib/fills-container.tsx
deleted file mode 100644
index 5f055b6ed..000000000
--- a/libs/fills/src/lib/fills-container.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { FillsManager } from './fills-manager';
-
-export const FillsContainer = ({
-  marketId,
-  onMarketClick,
-  storeKey,
-}: {
-  marketId?: string;
-  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-  storeKey?: string;
-}) => {
-  const { pubKey } = useVegaWallet();
-
-  if (!pubKey) {
-    return (
-      <Splash>
-        <p>{t('Please connect Vega wallet')}</p>
-      </Splash>
-    );
-  }
-
-  return (
-    <FillsManager
-      partyId={pubKey}
-      marketId={marketId}
-      onMarketClick={onMarketClick}
-      storeKey={storeKey}
-    />
-  );
-};
diff --git a/libs/fills/src/lib/fills-manager.tsx b/libs/fills/src/lib/fills-manager.tsx
index c69861135..33a610449 100644
--- a/libs/fills/src/lib/fills-manager.tsx
+++ b/libs/fills/src/lib/fills-manager.tsx
@@ -2,7 +2,7 @@ import type { AgGridReact } from 'ag-grid-react';
 import { useRef } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { FillsTable } from './fills-table';
-import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import type * as Schema from '@vegaprotocol/types';
 import { fillsWithMarketProvider } from './fills-data-provider';
@@ -11,14 +11,14 @@ interface FillsManagerProps {
   partyId: string;
   marketId?: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-  storeKey?: string;
+  gridProps: ReturnType<typeof useDataGridEvents>;
 }
 
 export const FillsManager = ({
   partyId,
   marketId,
   onMarketClick,
-  storeKey,
+  gridProps,
 }: FillsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const filter: Schema.TradesFilter | Schema.TradesSubscriptionFilter = {
@@ -38,9 +38,6 @@ export const FillsManager = ({
     },
     variables: { filter },
   });
-  const bottomPlaceholderProps = useBottomPlaceholder({
-    gridRef,
-  });
 
   return (
     <FillsTable
@@ -48,9 +45,8 @@ export const FillsManager = ({
       rowData={data}
       partyId={partyId}
       onMarketClick={onMarketClick}
-      storeKey={storeKey}
-      {...bottomPlaceholderProps}
       overlayNoRowsTemplate={error ? error.message : t('No fills')}
+      {...gridProps}
     />
   );
 };
diff --git a/libs/fills/src/lib/fills-table.tsx b/libs/fills/src/lib/fills-table.tsx
index beba00782..50e6e7a4f 100644
--- a/libs/fills/src/lib/fills-table.tsx
+++ b/libs/fills/src/lib/fills-table.tsx
@@ -39,7 +39,6 @@ export type Role = typeof TAKER | typeof MAKER | '-';
 export type Props = (AgGridReactProps | AgReactUiProps) & {
   partyId: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-  storeKey?: string;
 };
 
 export const FillsTable = forwardRef<AgGridReact, Props>(
diff --git a/libs/ledger/src/index.ts b/libs/ledger/src/index.ts
index fad166871..16820c1b9 100644
--- a/libs/ledger/src/index.ts
+++ b/libs/ledger/src/index.ts
@@ -1,3 +1,2 @@
-export * from './lib/ledger-container';
 export * from './lib/ledger-manager';
 export * from './lib/__generated__/LedgerEntries';
diff --git a/libs/ledger/src/lib/ledger-container.tsx b/libs/ledger/src/lib/ledger-container.tsx
deleted file mode 100644
index 820a8713a..000000000
--- a/libs/ledger/src/lib/ledger-container.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { LedgerManager } from './ledger-manager';
-
-export const LedgerContainer = () => {
-  const { pubKey } = useVegaWallet();
-  if (!pubKey) {
-    return (
-      <Splash>
-        <p>{t('Please connect Vega wallet')}</p>
-      </Splash>
-    );
-  }
-
-  return <LedgerManager partyId={pubKey} />;
-};
diff --git a/libs/ledger/src/lib/ledger-manager.tsx b/libs/ledger/src/lib/ledger-manager.tsx
index 5fd8320c2..7aaa7f0cf 100644
--- a/libs/ledger/src/lib/ledger-manager.tsx
+++ b/libs/ledger/src/lib/ledger-manager.tsx
@@ -10,6 +10,7 @@ import { LedgerTable } from './ledger-table';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import type * as Types from '@vegaprotocol/types';
 import { LedgerExportLink } from './ledger-export-link';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 
 export interface Filter {
   vegaTime?: {
@@ -24,7 +25,13 @@ const defaultFilter = {
   },
 };
 
-export const LedgerManager = ({ partyId }: { partyId: string }) => {
+export const LedgerManager = ({
+  partyId,
+  gridProps,
+}: {
+  partyId: string;
+  gridProps: ReturnType<typeof useDataGridEvents>;
+}) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const [filter, setFilter] = useState<Filter>(defaultFilter);
 
@@ -33,7 +40,7 @@ export const LedgerManager = ({ partyId }: { partyId: string }) => {
       partyId,
       dateRange: filter?.vegaTime?.value,
       pagination: {
-        first: 5000,
+        first: 10,
       },
     }),
     [partyId, filter?.vegaTime?.value]
@@ -45,18 +52,23 @@ export const LedgerManager = ({ partyId }: { partyId: string }) => {
     skip: !variables.partyId,
   });
 
-  const onFilterChanged = useCallback((event: FilterChangedEvent) => {
-    const updatedFilter = { ...defaultFilter, ...event.api.getFilterModel() };
-    setFilter(updatedFilter);
-  }, []);
+  const onFilterChanged = useCallback(
+    (event: FilterChangedEvent) => {
+      const updatedFilter = { ...defaultFilter, ...event.api.getFilterModel() };
+      setFilter(updatedFilter);
+      gridProps.onFilterChanged(event);
+    },
+    [gridProps]
+  );
 
   return (
     <div className="h-full relative">
       <LedgerTable
         ref={gridRef}
         rowData={data}
-        onFilterChanged={onFilterChanged}
         overlayNoRowsTemplate={error ? error.message : t('No entries')}
+        {...gridProps}
+        onFilterChanged={onFilterChanged}
       />
       {data && <LedgerExportLink entries={data} partyId={partyId} />}
     </div>
diff --git a/libs/ledger/src/lib/ledger-table.tsx b/libs/ledger/src/lib/ledger-table.tsx
index f48d9951e..03f68055d 100644
--- a/libs/ledger/src/lib/ledger-table.tsx
+++ b/libs/ledger/src/lib/ledger-table.tsx
@@ -49,7 +49,7 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
   (props, ref) => {
     return (
       <AgGrid
-        style={{ width: '100%', height: 'calc(100% - 50px)' }}
+        style={{ width: '100%', height: '100%' }}
         ref={ref}
         tooltipShowDelay={500}
         defaultColDef={{
@@ -61,9 +61,6 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
             buttons: ['reset'],
           },
         }}
-        storeKey="ledgerTable"
-        suppressLoadingOverlay
-        suppressNoRowsOverlay
         {...props}
       >
         <AgGridColumn
diff --git a/libs/liquidity/src/lib/liquidity-table.tsx b/libs/liquidity/src/lib/liquidity-table.tsx
index 2ad2ecdc4..00433ac59 100644
--- a/libs/liquidity/src/lib/liquidity-table.tsx
+++ b/libs/liquidity/src/lib/liquidity-table.tsx
@@ -197,7 +197,6 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
           tooltipComponent: TooltipCellComponent,
           sortable: true,
         }}
-        storeKey="liquidityProvisionTable"
         {...props}
         columnDefs={colDefs}
       />
diff --git a/libs/markets/src/lib/components/markets-container/market-list-table.tsx b/libs/markets/src/lib/components/markets-container/market-list-table.tsx
index ae4aa792f..a8a2aa9c0 100644
--- a/libs/markets/src/lib/components/markets-container/market-list-table.tsx
+++ b/libs/markets/src/lib/components/markets-container/market-list-table.tsx
@@ -61,7 +61,6 @@ export const MarketListTable = forwardRef<
       columnDefs={columnDefs}
       suppressCellFocus
       components={{ PriceFlashCell, MarketName }}
-      storeKey="allMarkets"
       {...props}
     />
   );
diff --git a/libs/orders/src/lib/components/index.ts b/libs/orders/src/lib/components/index.ts
index fbaf4e4ee..031574634 100644
--- a/libs/orders/src/lib/components/index.ts
+++ b/libs/orders/src/lib/components/index.ts
@@ -1,5 +1,4 @@
 export * from './order-data-provider';
 export * from './order-list';
 export * from './order-list-manager';
-export * from './order-list-container';
 export * from './mocks/generate-orders';
diff --git a/libs/orders/src/lib/components/order-list-container.tsx b/libs/orders/src/lib/components/order-list-container.tsx
deleted file mode 100644
index 2667625ca..000000000
--- a/libs/orders/src/lib/components/order-list-container.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import type { Filter } from './order-list-manager';
-import { OrderListManager } from './order-list-manager';
-
-export interface OrderListContainerProps {
-  marketId?: string;
-  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-  onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
-  enforceBottomPlaceholder?: boolean;
-  filter?: Filter;
-  storeKey?: string;
-}
-
-export const OrderListContainer = ({
-  marketId,
-  onMarketClick,
-  onOrderTypeClick,
-  enforceBottomPlaceholder,
-  filter,
-  storeKey,
-}: OrderListContainerProps) => {
-  const { pubKey, isReadOnly } = useVegaWallet();
-
-  if (!pubKey) {
-    return <Splash>{t('Please connect Vega wallet')}</Splash>;
-  }
-
-  return (
-    <OrderListManager
-      partyId={pubKey}
-      marketId={marketId}
-      filter={filter}
-      onMarketClick={onMarketClick}
-      onOrderTypeClick={onOrderTypeClick}
-      isReadOnly={isReadOnly}
-      enforceBottomPlaceholder={enforceBottomPlaceholder}
-      storeKey={storeKey}
-    />
-  );
-};
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 0d897ded5..94f9be71f 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
@@ -2,11 +2,9 @@ import { t } from '@vegaprotocol/i18n';
 import { useCallback, useRef, useState } from 'react';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
-import type { GridReadyEvent, FilterChangedEvent } from 'ag-grid-community';
-
 import { OrderListTable } from '../order-list/order-list';
 import { useHasAmendableOrder } from '../../order-hooks/use-has-amendable-order';
-import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider';
 import {
@@ -16,59 +14,31 @@ import {
 import type { OrderTxUpdateFieldsFragment } from '@vegaprotocol/wallet';
 import { OrderEditDialog } from '../order-list/order-edit-dialog';
 import type { Order } from '../order-data-provider';
-import { OrderStatus } from '@vegaprotocol/types';
 
 export enum Filter {
-  'Open',
-  'Closed',
-  'Rejected',
+  'Open' = 'Open',
+  'Closed' = 'Closed',
+  'Rejected' = 'Rejected',
 }
 
-const FilterStatusValue = {
-  [Filter.Open]: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
-  [Filter.Closed]: [
-    OrderStatus.STATUS_CANCELLED,
-    OrderStatus.STATUS_EXPIRED,
-    OrderStatus.STATUS_FILLED,
-    OrderStatus.STATUS_PARTIALLY_FILLED,
-    OrderStatus.STATUS_STOPPED,
-  ],
-  [Filter.Rejected]: [OrderStatus.STATUS_REJECTED],
-};
-
 export interface OrderListManagerProps {
   partyId: string;
   marketId?: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
   isReadOnly: boolean;
-  enforceBottomPlaceholder?: boolean;
   filter?: Filter;
-  storeKey?: string;
+  gridProps?: ReturnType<typeof useDataGridEvents>;
 }
 
-const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
-  <div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end px-[11px] py-2 absolute bottom-0 right-3 rounded">
-    <Button
-      variant="primary"
-      size="sm"
-      onClick={onClick}
-      data-testid="cancelAll"
-    >
-      {t('Cancel all')}
-    </Button>
-  </div>
-);
-
 export const OrderListManager = ({
   partyId,
   marketId,
   onMarketClick,
   onOrderTypeClick,
   isReadOnly,
-  enforceBottomPlaceholder,
   filter,
-  storeKey,
+  gridProps,
 }: OrderListManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const [editOrder, setEditOrder] = useState<Order | null>(null);
@@ -91,14 +61,6 @@ export const OrderListManager = ({
     },
   });
 
-  const {
-    onFilterChanged: bottomPlaceholderOnFilterChanged,
-    ...bottomPlaceholderProps
-  } = useBottomPlaceholder({
-    gridRef,
-    disabled: !enforceBottomPlaceholder && !isReadOnly && !hasAmendableOrder,
-  });
-
   const cancel = useCallback(
     (order: Order) => {
       if (!order.market) return;
@@ -112,26 +74,6 @@ export const OrderListManager = ({
     [create]
   );
 
-  const onGridReady = useCallback(
-    ({ api }: GridReadyEvent) => {
-      if (filter !== undefined) {
-        api.setFilterModel({
-          status: {
-            value: FilterStatusValue[filter],
-          },
-        });
-      }
-    },
-    [filter]
-  );
-
-  const onFilterChanged = useCallback(
-    (event: FilterChangedEvent) => {
-      bottomPlaceholderOnFilterChanged?.();
-    },
-    [bottomPlaceholderOnFilterChanged]
-  );
-
   const cancelAll = useCallback(() => {
     create({
       orderCancellation: {},
@@ -142,20 +84,17 @@ export const OrderListManager = ({
     <>
       <div className="h-full relative">
         <OrderListTable
-          rowData={data as Order[]}
+          rowData={data}
           ref={gridRef}
           filter={filter}
-          onGridReady={onGridReady}
           onCancel={cancel}
           onEdit={setEditOrder}
           onMarketClick={onMarketClick}
           onOrderTypeClick={onOrderTypeClick}
-          onFilterChanged={onFilterChanged}
           isReadOnly={isReadOnly}
-          storeKey={storeKey}
           suppressAutoSize
           overlayNoRowsTemplate={error ? error.message : t('No orders')}
-          {...bottomPlaceholderProps}
+          {...gridProps}
         />
       </div>
       {!isReadOnly && hasAmendableOrder && (
@@ -198,3 +137,16 @@ export const OrderListManager = ({
     </>
   );
 };
+
+const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
+  <div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end px-[11px] py-2 absolute bottom-0 right-3 rounded">
+    <Button
+      variant="primary"
+      size="sm"
+      onClick={onClick}
+      data-testid="cancelAll"
+    >
+      {t('Cancel all')}
+    </Button>
+  </div>
+);
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 ed4bbc6ef..b5a1aba40 100644
--- a/libs/orders/src/lib/components/order-list/order-list.tsx
+++ b/libs/orders/src/lib/components/order-list/order-list.tsx
@@ -39,7 +39,6 @@ export type OrderListTableProps = TypedDataAgGrid<Order> & {
   onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
   filter?: Filter;
   isReadOnly: boolean;
-  storeKey?: string;
 };
 
 export const OrderListTable = memo<
diff --git a/libs/positions/src/index.ts b/libs/positions/src/index.ts
index c48ad2b54..98f451cd5 100644
--- a/libs/positions/src/index.ts
+++ b/libs/positions/src/index.ts
@@ -1,6 +1,6 @@
 export * from './lib/__generated__/Positions';
-export * from './lib/positions-container';
 export * from './lib/positions-data-providers';
 export * from './lib/positions-table';
+export * from './lib/positions-manager';
 export * from './lib/use-market-margin';
 export * from './lib/use-open-volume';
diff --git a/libs/positions/src/lib/positions-manager.tsx b/libs/positions/src/lib/positions-manager.tsx
index 517ee62f0..c0e5c5336 100644
--- a/libs/positions/src/lib/positions-manager.tsx
+++ b/libs/positions/src/lib/positions-manager.tsx
@@ -8,22 +8,21 @@ import {
   positionsMetricsProvider,
   positionsMarketsProvider,
 } from './positions-data-providers';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 
 interface PositionsManagerProps {
   partyIds: string[];
   onMarketClick?: (marketId: string) => void;
   isReadOnly: boolean;
-  noBottomPlaceholder?: boolean;
-  storeKey?: string;
+  gridProps: ReturnType<typeof useDataGridEvents>;
 }
 
 export const PositionsManager = ({
   partyIds,
   onMarketClick,
   isReadOnly,
-  noBottomPlaceholder,
-  storeKey,
+  gridProps,
 }: PositionsManagerProps) => {
   const { pubKeys, pubKey } = useVegaWallet();
   const create = useVegaTransactionStore((store) => store.create);
@@ -74,9 +73,9 @@ export const PositionsManager = ({
         onMarketClick={onMarketClick}
         onClose={onClose}
         isReadOnly={isReadOnly}
-        storeKey={storeKey}
         multipleKeys={partyIds.length > 1}
         overlayNoRowsTemplate={error ? error.message : t('No positions')}
+        {...gridProps}
       />
     </div>
   );
diff --git a/libs/positions/src/lib/positions-table.tsx b/libs/positions/src/lib/positions-table.tsx
index a774b6cfa..08a301b68 100644
--- a/libs/positions/src/lib/positions-table.tsx
+++ b/libs/positions/src/lib/positions-table.tsx
@@ -48,7 +48,6 @@ interface Props extends TypedDataAgGrid<Position> {
   onMarketClick?: (id: string, metaKey?: boolean) => void;
   style?: CSSProperties;
   isReadOnly: boolean;
-  storeKey?: string;
   multipleKeys?: boolean;
   pubKeys?: VegaWalletContextShape['pubKeys'];
   pubKey?: VegaWalletContextShape['pubKey'];
diff --git a/libs/proposals/src/components/proposals-list/proposals-list.tsx b/libs/proposals/src/components/proposals-list/proposals-list.tsx
index 392d5974a..d874bd8a5 100644
--- a/libs/proposals/src/components/proposals-list/proposals-list.tsx
+++ b/libs/proposals/src/components/proposals-list/proposals-list.tsx
@@ -38,7 +38,6 @@ export const ProposalsList = () => {
         columnDefs={columnDefs}
         rowData={filteredData}
         defaultColDef={defaultColDef}
-        storeKey="proposedMarkets"
         getRowId={({ data }) => data.id}
         style={{ width: '100%', height: '100%' }}
         overlayNoRowsTemplate={error ? error.message : t('No markets')}
diff --git a/libs/trades/src/lib/trades-table.tsx b/libs/trades/src/lib/trades-table.tsx
index 1482dc9b1..09729b534 100644
--- a/libs/trades/src/lib/trades-table.tsx
+++ b/libs/trades/src/lib/trades-table.tsx
@@ -55,7 +55,6 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
       ref={ref}
       defaultColDef={{
         flex: 1,
-        resizable: true,
       }}
       {...props}
     >
diff --git a/libs/withdraws/src/lib/withdrawals-table.tsx b/libs/withdraws/src/lib/withdrawals-table.tsx
index 4c1336b6b..7996abd7d 100644
--- a/libs/withdraws/src/lib/withdrawals-table.tsx
+++ b/libs/withdraws/src/lib/withdrawals-table.tsx
@@ -8,7 +8,6 @@ import {
   isNumeric,
   truncateByChars,
 } from '@vegaprotocol/utils';
-import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { t } from '@vegaprotocol/i18n';
 import {
   ButtonLink,
@@ -47,11 +46,10 @@ export const WithdrawalsTable = (
     (store) => store.create
   );
 
-  const bottomPlaceholderProps = useBottomPlaceholder({ gridRef });
   return (
     <AgGrid
       overlayNoRowsTemplate={t('No withdrawals')}
-      defaultColDef={{ resizable: true }}
+      defaultColDef={{ flex: 1 }}
       style={{ width: '100%', height: '100%' }}
       components={{
         RecipientCell,
@@ -61,8 +59,6 @@ export const WithdrawalsTable = (
       }}
       suppressCellFocus
       ref={gridRef}
-      storeKey="withdrawals"
-      {...bottomPlaceholderProps}
       {...props}
     >
       <AgGridColumn headerName="Asset" field="asset.symbol" />