queryGrid

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.

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	string	CSS selector to find the grid element
parent	ParentNode
awaitUpgrade	true	When true, waits for the custom element to be defined before resolving

Example

// 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);