# Getting Started Technical Reference

Canonical page: https://www.adaptabletools.com/docs/technical-reference-getting-started

## Adaptable Ready Event

The Adaptable Ready Event provides an [`AdaptableReadyInfo`](https://www.adaptabletools.com/docs/reference/adaptablereadyinfo.md) object with 2 key properties:

- `adaptableApi` — the [Adaptable API](https://www.adaptabletools.com/docs/technical-reference-adaptable-api/index.md) (from [`Base Context`](https://www.adaptabletools.com/docs/reference/basecontext.md))
- `agGridApi` — [AG Grid's Grid API](https://www.ag-grid.com/javascript-data-grid/grid-api/), returned on this object and also available as `adaptableApi.agGridApi`

| Property | Type | Description |
| --- | --- | --- |
| [agGridApi](https://www.adaptabletools.com/docs/reference/adaptablereadyinfo.md#aggridapi) | [`GridApi`](https://www.adaptabletools.com/docs/reference/gridapi.md)`<TData>` | AG Grid `GridApi` for this grid. |
| [adaptableContext](https://www.adaptabletools.com/docs/reference/adaptablereadyinfo.md#adaptablecontext) | `any` | Custom application Context provided in `AdaptableOptions.adaptableContext` |

### Subscribing to the Event

<!-- framework: vanilla -->
### Vanilla

Vanilla `Adaptable.init` already returns `adaptableApi`. Subscribe with `eventApi.on` for setup that must wait until the Grid is ready.

If you subscribe after `init` has resolved, you still receive the Event

```ts
const adaptableApi = await Adaptable.init(adaptableOptions, agGridConfig);

adaptableApi.eventApi.on(
  'AdaptableReady',
  ({adaptableApi, agGridApi}: AdaptableReadyInfo) => {
    adaptableApi.quickSearchApi.runQuickSearch('react');
    agGridApi.autoSizeAllColumns();
  }
);
```

<!-- /framework -->

<!-- framework: react -->
### React

In AdapTable React, `onAdaptableReady` on `Adaptable.Provider` is how you obtain `adaptableApi` and `agGridApi`.

```tsx
<Adaptable.Provider
  gridOptions={gridOptions}
  modules={agGridModules}
  adaptableOptions={adaptableOptions}
  onAdaptableReady={({adaptableApi, agGridApi}: AdaptableReadyInfo) => {
    adaptableApi.quickSearchApi.runQuickSearch('react');
    agGridApi.autoSizeAllColumns();
  }}>
  <Adaptable.UI />
  <Adaptable.AgGridReact />
</Adaptable.Provider>
```

<!-- /framework -->

<!-- framework: angular -->
### Angular

In AdapTable Angular, bind `(adaptableReady)` on `<adaptable-provider>`. That is how you obtain `adaptableApi` and `agGridApi`.

```html
<adaptable-provider
  [adaptableOptions]="adaptableOptions"
  [gridOptions]="gridOptions"
  [modules]="agGridModules"
  (adaptableReady)="adaptableReady($event)"
>
  <adaptable-ui></adaptable-ui>
  <ag-grid-angular
    *adaptable="let adaptable"
    [gridOptions]="adaptable.gridOptions"
    [modules]="adaptable.modules">
  </ag-grid-angular>
</adaptable-provider>
```

```ts
adaptableReady = ({adaptableApi, agGridApi}: AdaptableReadyInfo) => {
  this.adaptableApi = adaptableApi;
  adaptableApi.quickSearchApi.runQuickSearch('react');
  agGridApi.autoSizeAllColumns();
};
```

<!-- /framework -->

<!-- framework: vue -->
### Vue

In AdapTable Vue, listen with `@onAdaptableReady` on `AdaptableProvider`. That is how you obtain `adaptableApi` and `agGridApi`.

```vue
<template>
  <AdaptableProvider
    :gridOptions="gridOptions"
    :modules="agGridModules"
    :adaptableOptions="adaptableOptions"
    @onAdaptableReady="onAdaptableReady"
  >
    <AdaptableUI />
    <AdaptableAgGridVue />
  </AdaptableProvider>
</template>
```

```ts
const onAdaptableReady = ({adaptableApi, agGridApi}: AdaptableReadyInfo) => {
  adaptableApi.quickSearchApi.runQuickSearch('react');
  agGridApi.autoSizeAllColumns();
};
```

<!-- /framework -->

Once you have `adaptableApi`, later [Adaptable Events](https://www.adaptabletools.com/docs/technical-reference-adaptable-events/index.md) are subscribed in the usual way: `adaptableApi.eventApi.on(...)`.

- See [Adaptable Ready Event](https://www.adaptabletools.com/docs/getting-started-adaptable-ready/index.md) for a worked example
- The full first-run wiring is on [Integrating AdapTable](https://www.adaptabletools.com/docs/getting-started-integration/index.md)

### AG Grid API

`agGridApi` is [AG Grid's Grid API](https://www.ag-grid.com/javascript-data-grid/grid-api/) (of type [`AgGridApi`](https://www.adaptabletools.com/docs/reference/adaptableapi.md#aggridapi)). 

AdapTable does not declare methods of its own on this type.

The Adaptable Ready Event returns it on the [`AdaptableReadyInfo`](https://www.adaptabletools.com/docs/reference/adaptablereadyinfo.md) object, next to `adaptableApi`. 

The subscription examples above read it from that payload:

```ts
({agGridApi}: AdaptableReadyInfo) => {
  agGridApi.autoSizeAllColumns();
};
```

The same Grid API object is a property on the base of the [Adaptable API](https://www.adaptabletools.com/docs/technical-reference-adaptable-api/index.md). 

Any code that already holds `adaptableApi` reaches it there:

```ts
adaptableApi.agGridApi.autoSizeAllColumns();
```

- Always prefer the API methods provided by AdapTable where one exists
- That keeps AG Grid, AdapTable, and AdapTable State in sync

See [Configuring AG Grid](https://www.adaptabletools.com/docs/dev-guide-aggrid-configuring-overview/index.md) for how GridOptions and columns are set up