# queryGrid

> _Since v0.6.0_

Query an existing grid element from the DOM with proper typing.

**Sync mode** (default) — returns the element immediately. The element may not
be upgraded yet if the grid module hasn't loaded.

**Async mode** — pass `true` as the second or third argument to wait for the
custom element to be defined and upgraded before resolving. This guarantees
all `DataGridElement` methods (e.g. `registerStyles`, `ready`, `on`) are
available on the returned instance.

```ts
function queryGrid(selector: string): DataGridElement<TRow> | null
function queryGrid(selector: string, parent: ParentNode): DataGridElement<TRow> | null
function queryGrid(selector: string, awaitUpgrade: true): Promise<DataGridElement<TRow> | null>
function queryGrid(selector: string, parent: ParentNode, awaitUpgrade: true): Promise<DataGridElement<TRow> | null>
```

## Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `selector` | <code>string</code> | CSS selector to find the grid element |
| `parent` | <code>ParentNode</code> |  |
| `awaitUpgrade` | <code>true</code> |  |

## Example

```typescript
// Sync — unchanged from before
const grid = queryGrid<Employee>('#my-grid');
if (grid) {
  grid.rows = employees; // ✓ Typed (assumes element is upgraded)
}

// Async — waits for custom-element upgrade
const grid = await queryGrid<Employee>('#my-grid', true);
if (grid) {
  grid.registerStyles('my-id', '.cell { color: red; }'); // ✓ Safe
}

// Async with parent scope
const grid = await queryGrid<Employee>('tbw-grid', container, true);
```