### Install AG Grid Solid

Source: https://github.com/solidjs-community/solid-ag-grid/blob/main/README.md

Installs the necessary AG Grid community and solid-ag-grid packages using npm, yarn, or pnpm.

```bash
npm i --save ag-grid-community solid-ag-grid
```

```bash
yarn add ag-grid-community solid-ag-grid
```

```bash
pnpm add ag-grid-community solid-ag-grid
```

--------------------------------

### Basic Grid Component Setup

Source: https://github.com/solidjs-community/solid-ag-grid/blob/main/README.md

Demonstrates how to import and insert the AgGridSolid component into a Solid application using JSX. It also highlights the necessity of placing the grid within a sized parent element and importing core and theme CSS files.

```jsx
<AgGridSolid
    rowData={...}
    columnDefs={...}
/>
```

```jsx
import AgGridSolid from 'solid-ag-grid';

import 'ag-grid-community/styles/ag-grid.css'; // grid core CSS
import "ag-grid-community/styles/ag-theme-quartz.css"; // optional theme

const MySolidApp = ()=> {
  return (
    // set fixed size to parent div, and apply grid theme ag-theme-quartz
    <div style={{height: '500px'}} class="ag-theme-quartz">
      <AgGridSolid
        rowData={...}
        columnDefs={...}
      />
    </div>
  );
};
```

--------------------------------

### Import Grid Component and Styles

Source: https://github.com/solidjs-community/solid-ag-grid/blob/main/README.md

Imports the AgGridSolid component and the required AG Grid CSS styles for theming.

```typescript
import type { Component } from "solid-js";
import AgGridSolid from "solid-ag-grid";

import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
```

--------------------------------

### AG Grid Solid Dependencies

Source: https://github.com/solidjs-community/solid-ag-grid/blob/main/README.md

Lists the core AG Grid packages required for SolidJS integration, including the community core, client-side row model, and the specific Solid adapter. These dependencies enable AG Grid functionality within a SolidJS application.

```json
{
    "dependencies": {
        "@ag-grid-community/core": "~{% $agGridVersion %}",
        "@ag-grid-community/client-side-row-model": "~{% $agGridVersion %}",
        "@ag-grid-community/solid": "~{% $agGridVersion %}"
    }
}
```

--------------------------------

### Render AG Grid Solid Component

Source: https://github.com/solidjs-community/solid-ag-grid/blob/main/README.md

Demonstrates how to render the AgGridSolid component with basic column definitions and row data. The grid is typically wrapped in a div with a specific theme class.

```typescript
const App: Component = () => {
  const columnDefs = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
  ];
  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 },
  ];
  const defaultColDef = {
    flex: 1,
  };
  return (
    <div class="ag-theme-alpine" style={{ height: '100%' }}>
      <AgGridSolid
        columnDefs={columnDefs}
        rowData={rowData}
        defaultColDef={defaultColDef}
      />
    </div>
  );
};

export default App;
```

--------------------------------

### AG Grid Solid Import Statement

Source: https://github.com/solidjs-community/solid-ag-grid/blob/main/README.md

Demonstrates the correct import statement for using the AG Grid Solid component within a SolidJS project when employing the module system. This allows for the instantiation of AG Grid grids with SolidJS renderers.

```jsx
import AgGridSolid from "@ag-grid-community/solid";
```

--------------------------------

### TypeScript Grid Reference

Source: https://github.com/solidjs-community/solid-ag-grid/blob/main/README.md

Shows how to use the `AgGridSolidRef` type for strongly typing the grid reference when working with TypeScript, enabling better autocompletion and type checking.

```typescript
import AgGridSolid, {AgGridSolidRef} from 'solid-ag-grid';

const MySolidApp = ()=> {
  let grid: AgGridSolidRef;
  // ...
};
```

--------------------------------

### Grid API Access via Ref

Source: https://github.com/solidjs-community/solid-ag-grid/blob/main/README.md

Demonstrates how to access the AG Grid's API and Column API using a Solid ref. The ref is assigned to the `ref` prop of the `AgGridSolid` component, allowing direct manipulation of grid features like selection and column state.

```jsx
const MySolidApp = ()=> {
  let gridRef; // ref for the grid
  const myAction = ()=> {
    // use grid api
    gridRef.api.selectAll();
    // use grid column api
    gridRef.api.applyColumnState(...);
  };
  return (
    <div style={{height: '500px'}} class="ag-theme-quartz">
      <AgGridSolid
        rowData={...}
        columnDefs={...}
        ref={gridRef}
      />
    </div>
  );
};
```

--------------------------------

### Custom Cell Editor API Exposure

Source: https://github.com/solidjs-community/solid-ag-grid/blob/main/README.md

Explains how custom Solid Cell Editor components can expose their API to the grid. This is achieved by calling `props.ref(api)` within the component, similar to React's imperative handle.

```jsx
const api = {
    ...
};

props.ref(api);
```

--------------------------------

### Binding Properties and Events

Source: https://github.com/solidjs-community/solid-ag-grid/blob/main/README.md

Illustrates how to bind Solid Signals to grid properties like `rowData` for dynamic data updates and how to bind event listeners, such as `onSelectionChanged`, to react to grid events.

```jsx
import AgGridSolid from "solid-ag-grid";

import "ag-grid-community/styles/ag-grid.css"; // grid core CSS
import "ag-grid-community/styles/ag-theme-quartz.css"; // optional theme

const MySolidApp = () => {
  // use signal, as row data will change
  const [rowData, setRowData] = createSignal();
  // if columns will change, best use a signal, however if column definitions
  // are static, we don't need to use a signal
  const columnDefs = [{ field: "name" }, { field: "age" }];
  // event listener
  const selectionChangedCallback = (e) => {
    console.log("selection has changed", e);
  };
  return (
    <div style={{ height: "500px" }} class="ag-theme-quartz">
      <AgGridSolid
        rowData={rowData()} // use signal
        columnDefs={columnDefs} // no signal
        rowSelection="single" // no signal, inline
        onSelectionChanged={selectionChangedCallback} // listen for grid event
      />
    </div>
  );
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.