# Example: Expansion policy: through-depth

Two group levels seeded from the start, with sector groups collapsed by initialExpansion — click a twisty or use the arrow keys to expand one and reveal its positions.

Source: https://pretable.ai/examples/group-expansion-control.md

```tsx GroupExpansionGrid.tsx
"use client";

import { useState, type ComponentProps } from "react";

import { PretableSurface } from "@pretable/react";

import { columns } from "./columns";
import { positions } from "./data";

const VIEWPORT_HEIGHT = 340;

export function GroupExpansionGrid() {
  // Two group levels from the start (desk, then sector), controlled so the
  // panel can still reorder or remove a level.
  const [query, setQuery] = useState<
    NonNullable<
      ComponentProps<
        typeof PretableSurface<(typeof positions)[number]>
      >["query"]
    >
  >({
    filters: [],
    sort: [],
    rowGroups: [
      { columnId: "desk", direction: "asc" },
      { columnId: "sector", direction: "asc" },
    ],
  });

  return (
    <div>
      <p style={{ margin: "0 0 8px", fontSize: 13 }}>
        The <code>through-depth</code> expansion policy (depth 0) opens only the
        top level here — sector groups start collapsed. Click a ▾ twisty, or
        focus a group row and press <kbd>Arrow Right</kbd>, to expand a sector
        and see its positions.
      </p>
      <PretableSurface
        ariaLabel="Positions grouped by desk and sector, sector groups collapsed"
        columns={columns}
        getRowId={(row) => row.id}
        groupPanel={{ enabled: true }}
        initialExpansion={{ kind: "through-depth", depth: 0 }}
        onQueryChange={setQuery}
        query={query}
        rows={positions}
        viewportHeight={VIEWPORT_HEIGHT}
      />
    </div>
  );
}
```

```ts columns.ts
import type { PretableColumn } from "@pretable/react";

import type { Position } from "./data";

const usd = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
});

const count = new Intl.NumberFormat("en-US");

export const columns: PretableColumn<Position>[] = [
  { id: "desk", header: "Desk" },
  { id: "sector", header: "Sector" },
  { id: "symbol", header: "Symbol" },
  {
    id: "shares",
    header: "Shares",
    type: "number",
    aggregate: "sum",
    format: ({ value }) => count.format(value as number),
    formatAggregate: ({ value }) =>
      typeof value === "number" ? count.format(value) : "",
  },
  {
    id: "marketValue",
    header: "Market value",
    type: "number",
    aggregate: "sum",
    format: ({ value }) => usd.format(value as number),
    formatAggregate: ({ value }) =>
      typeof value === "number" ? usd.format(value) : "",
  },
];
```

```ts data.ts
export interface Position {
  id: string;
  desk: string;
  sector: string;
  symbol: string;
  shares: number;
  marketValue: number;
}

export const positions: Position[] = [
  {
    id: "p1",
    desk: "Equities",
    sector: "Technology",
    symbol: "NVDA",
    shares: 4200,
    marketValue: 512_400,
  },
  {
    id: "p2",
    desk: "Equities",
    sector: "Technology",
    symbol: "MSFT",
    shares: 1800,
    marketValue: 748_900,
  },
  {
    id: "p3",
    desk: "Equities",
    sector: "Healthcare",
    symbol: "LLY",
    shares: 620,
    marketValue: 486_100,
  },
  {
    id: "p4",
    desk: "Equities",
    sector: "Healthcare",
    symbol: "UNH",
    shares: 950,
    marketValue: 501_300,
  },
  {
    id: "p5",
    desk: "Equities",
    sector: "Energy",
    symbol: "XOM",
    shares: 3100,
    marketValue: 364_800,
  },
  {
    id: "p6",
    desk: "Credit",
    sector: "Financials",
    symbol: "JPM",
    shares: 2400,
    marketValue: 623_500,
  },
  {
    id: "p7",
    desk: "Credit",
    sector: "Financials",
    symbol: "GS",
    shares: 780,
    marketValue: 419_700,
  },
  {
    id: "p8",
    desk: "Credit",
    sector: "Energy",
    symbol: "CVX",
    shares: 1500,
    marketValue: 238_200,
  },
  {
    id: "p9",
    desk: "Macro",
    sector: "Financials",
    symbol: "TLT",
    shares: 5600,
    marketValue: 497_800,
  },
  {
    id: "p10",
    desk: "Macro",
    sector: "Energy",
    symbol: "USO",
    shares: 8800,
    marketValue: 611_600,
  },
  {
    id: "p11",
    desk: "Macro",
    sector: "Technology",
    symbol: "SMH",
    shares: 1250,
    marketValue: 329_400,
  },
];
```