# PublicGrid

> _Since v0.1.1_

Public API interface for DataGrid component.

**Property Getters vs Setters:**

Property getters return the EFFECTIVE (resolved) value after merging all config sources.
This is the "current situation" - what consumers and plugins need to know.

Property setters accept input values which are merged into the effective config.
Multiple sources can contribute (gridConfig, columns prop, light DOM, individual props).

For example:
- `grid.fitMode` returns the resolved fitMode (e.g., 'stretch' even if you set undefined)
- `grid.columns` returns the effective columns after merging
- `grid.gridConfig` returns the full effective config

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `gridConfig?` | <code><a href="/grid/api/core/interfaces/gridconfig/">GridConfig</a>&lt;T&gt;</code> | Full config object. Setter merges with other inputs per precedence rules. Getter returns the effective (resolved) config. |
| `columns?` | <code><a href="/grid/api/core/interfaces/columnconfig/">ColumnConfig</a>&lt;T&gt;[]</code> | Column definitions. Getter returns effective columns (after merging config, light DOM, inference). |
| `rows?` | <code>T[]</code> | Current row data (after plugin processing like grouping, filtering). |
| `ready?` | <code>() =&gt; Promise&lt;void&gt;</code> | Resolves once the component has finished initial work (layout, inference). |
| `forceLayout?` | <code>() =&gt; Promise&lt;void&gt;</code> | Force a layout / measurement pass (e.g. after container resize). |
| `getConfig?` | <code>() =&gt; Promise&lt;Readonly&lt;<a href="/grid/api/core/interfaces/gridconfig/">GridConfig</a>&lt;T&gt;&gt;&gt;</code> | Return effective resolved config (after inference & precedence). |
| `toggleGroup?` | <code>(key: string) =&gt; Promise&lt;void&gt;</code> | Toggle expansion state of a group row by its generated key. |
| `registerStyles?` | <code>(id: string, css: string) =&gt; void</code> | Register custom CSS styles to be injected into the grid. Use this to style custom cell renderers, editors, or detail panels. |
| `unregisterStyles?` | <code>(id: string) =&gt; void</code> | Remove previously registered custom styles. |
| `getRegisteredStyles?` | <code>() =&gt; string[]</code> | Get list of registered custom style IDs. |
| `columnState?` | <code><a href="/grid/api/core/interfaces/gridcolumnstate/">GridColumnState</a></code> | Read the current column state. Property-style accessor that mirrors PublicGrid.getColumnState. To restore state, use PublicGrid.applyColumnState. |
| `sortModel?` | <code>object &#124; unknown</code> | Get the current sort state. |
| `loading?` | <code>boolean</code> | Whether the grid is currently in a loading state. When true, displays a loading overlay with spinner. |
| `focusedCell?` | <code>object &#124; unknown</code> | The currently focused cell position, or `null` if no rows are loaded. |

### Property Details

#### columnState

```typescript
const snapshot = grid.columnState;
```

---

#### sortModel

Get the current sort state.

Returns `null` when no sort is active.

```typescript
const sort = grid.sortModel;
// { field: 'id', direction: 'desc' } | null
```

---

#### loading

Whether the grid is currently in a loading state.
When true, displays a loading overlay with spinner.

Can also be set via the `loading` HTML attribute.

```typescript
// Show loading overlay
grid.loading = true;
const data = await fetchData();
grid.rows = data;
grid.loading = false;
```

---