### Install AG Grid Svelte and Community Packages

Source: https://ag-grid-svelte.michael.kim/guide/index

Installs the necessary AG Grid Svelte component and the core AG Grid community package using npm.

```bash
> npm install ag-grid-svelte ag-grid-community
```

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

### Load AG Grid and Theme CSS from CDN in Svelte

Source: https://ag-grid-svelte.michael.kim/guide/themes

Loads AG Grid and theme CSS files from a CDN using `<svelte:window>` or directly in the HTML file. This approach is useful for quick setup or when direct file imports are not preferred. CSS must be loaded before the grid renders.

```html
<svelte:window>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/ag-grid-community@28.0.0/styles/ag-grid.css"
  />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/ag-grid-community@28.0.0/styles/ag-theme-alpine.css"
  />
</svelte:window>
```

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

### Enable AG Grid Enterprise in Svelte

Source: https://ag-grid-svelte.michael.kim/guide/overview

Enables AG Grid Enterprise functionality by importing the `ag-grid-enterprise` package. This import should occur before any grid instance is created, preferably within a module script for a single-time execution.

```svelte
<script context="module">
  // Will get called only once when this module is loaded
  import 'ag-grid-enterprise';
</script>

```

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

### Import AG Grid Core and Theme CSS

Source: https://ag-grid-svelte.michael.kim/guide/index

Imports the essential AG Grid styles and an optional theme (e.g., 'alpine') for the grid's appearance. These should be imported before the grid is rendered.

```javascript
import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS, always needed
import 'ag-grid-community/styles/ag-theme-alpine.css'; // Optional theme CSS
```

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

### Import AG Grid Enterprise Module

Source: https://ag-grid-svelte.michael.kim/guide/index

Imports the AG Grid Enterprise module using a module script context. This ensures the enterprise features are available and is typically done once when the application loads.

```svelte
<script context="module">
  // Will get called only once when this module is loaded
  import 'ag-grid-enterprise';
</script>
```

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

### Set AG Grid Enterprise License Key in Svelte

Source: https://ag-grid-svelte.michael.kim/guide/overview

Sets the AG Grid Enterprise license key using the `LicenseManager` from the `ag-grid-enterprise` package. This is typically done once when the application loads, ideally in a module script.

```svelte
<script context="module">
  import { LicenseManager } from 'ag-grid-enterprise';

  LicenseManager.setLicenseKey("your license key");
</script>

```

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

### Access AG Grid APIs via Prop Bindings in Svelte

Source: https://ag-grid-svelte.michael.kim/guide/overview

Demonstrates how to access the AG Grid API and Column API in Svelte using prop bindings. The `api` and `columnApi` variables are bound to the grid instance, allowing direct manipulation of the grid.

```svelte
<script>
  let api, columnApi;

  const onClick = () => {
    api.deselectAll();
  };
</script>

<AGGridSvelte bind:api={api} bind:columnApi={columnApi} />

```

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

### Global Styles with svelte-preprocess in Svelte AG Grid

Source: https://ag-grid-svelte.michael.kim/guide/customization

Illustrates using svelte-preprocess for applying global styles to AG Grid themes. It demonstrates both the `global` attribute on the style tag and the `:global` rule within a style block, providing flexibility in how global styles are declared when using svelte-preprocess.

```svelte
<style global>
    .ag-theme-alpine {
      --ag-background-color: chocolate;
    }
</style>

<style>
  :global {
    .ag-theme-alpine {
      --ag-background-color: lemonchiffon;
    }
  }
</style>
```

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

### Access AG Grid APIs via onGridReady Event in Svelte

Source: https://ag-grid-svelte.michael.kim/guide/overview

Shows an alternative method to access the AG Grid API and Column API using the `onGridReady` event. The event object passed to the handler contains the `api` and `columnApi` properties.

```svelte
<script>
  let api, columnApi;

  const onGridReady = (event) => {
    api = event.api;
    columnApi = event.columnApi;
  };
</script>

<AGGridSvelte {onGridReady} />

```

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

### Set AG Grid Enterprise License Key

Source: https://ag-grid-svelte.michael.kim/guide/index

Sets the AG Grid Enterprise license key using the `LicenseManager.setLicenseKey` method within a module script context. This is required for using enterprise features.

```svelte
<script context="module">
  import { LicenseManager } from 'ag-grid-enterprise';

  LicenseManager.setLicenseKey("your license key");
</script>
```

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

### Access Grid and Column APIs via onGridReady Event

Source: https://ag-grid-svelte.michael.kim/guide/index

Accesses the Grid API and Column API through the `onGridReady` event, which passes an event object containing the APIs. This is an alternative method to prop bindings.

```svelte
<script>
  let api, columnApi;

  const onGridReady = (event) => {
    api = event.api;
    columnApi = event.columnApi;
  };
</script>

<AGGridSvelte {onGridReady} />
```

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

### Import AG Grid and Theme CSS in SvelteKit/Vite

Source: https://ag-grid-svelte.michael.kim/guide/themes

Imports the core AG Grid CSS and an optional theme CSS file directly within a Svelte component. This method is suitable for projects using Vite or SvelteKit. Ensure these imports happen before the grid is rendered.

```svelte
<script>
  import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS, always needed
  import 'ag-grid-community/styles/ag-theme-alpine.css'; // Optional theme CSS
</script>
```

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

### Apply Global Styles to AG Grid Theme in Svelte

Source: https://ag-grid-svelte.michael.kim/guide/overview

Applies global styles to an AG Grid theme in Svelte using `:global()` within the `<style>` block. This is necessary because Svelte styles are scoped by default, and AG Grid's internal elements need to be styled globally.

```svelte
<div style:height="500px" class="ag-theme-alpine">
  <AgGridSvelte {rowData} {columnDefs} {defaultColDef} {onGridReady} />
</div>

<style>
  :global(.ag-theme-alpine) {
    --ag-background-color: #ddd;
  }
  :global(.ag-theme-alpine .ag-header-cell-label) {
    font-style: italic;
  }
</style>
```

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

### Access Grid and Column APIs via Prop Bindings

Source: https://ag-grid-svelte.michael.kim/guide/index

Binds the Grid API and Column API to local Svelte variables using `bind:api` and `bind:columnApi`. This allows direct manipulation of the grid, such as deselecting all rows.

```svelte
<script>
  let api, columnApi;

  const onClick = () => {
    api.deselectAll();
  };
</script>

<AGGridSvelte bind:api={api} bind:columnApi={columnApi} />
```

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

### Apply AG Grid Theme and Dimensions

Source: https://ag-grid-svelte.michael.kim/guide/index

Applies a chosen AG Grid theme (e.g., 'ag-theme-alpine') to a container element and sets its dimensions. The AGGridSvelte component is then rendered within this themed container.

```svelte
<div class="ag-theme-alpine" style:width="500px" style:height="500px">
  <AGGridSvelte ... />
</div>
```

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

### Applying Global Sass Styles to AG Grid in Svelte

Source: https://ag-grid-svelte.michael.kim/guide/sass

Demonstrates how to apply global Sass styles to AG Grid components within a Svelte project. This method uses the `global` attribute on the `<style>` tag to ensure SCSS variables and mixins are applied globally. It requires `ag-grid-community/styles` to be imported and processed by a Sass compiler.

```svelte
<script>
  // No need to include these
  // import 'ag-grid-community/styles/ag-grid.css';
  // import 'ag-grid-community/styles/ag-theme-alpine.css';
</script>

<style lang="scss" global>
  @use 'ag-grid-community/styles' as ag;
  @include ag.grid-styles(
    (
      --ag-row-hover-color: chartreuse
    )
  );
</style>
```

```svelte
<style lang="scss">
  @use 'ag-grid-community/styles' as ag;
  :global {
    @include ag.grid-styles(
      (
        --ag-row-hover-color: salmon
      )
    );
  }
</style>
```

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

### Apply Global Styles to AG Grid Theme

Source: https://ag-grid-svelte.michael.kim/guide/index

Applies global CSS styles to an AG Grid theme using Svelte's `:global` modifier. This allows customization of elements like the background color and header cell labels within the specified theme.

```svelte
<style>
  :global(.ag-theme-alpine) {
    --ag-background-color: #ddd;
  }
  :global(.ag-theme-alpine .ag-header-cell-label) {
    font-style: italic;
  }
</style>
```

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

### Apply AG Grid Theme Class to Container

Source: https://ag-grid-svelte.michael.kim/guide/themes

Applies a specific AG Grid theme by adding its corresponding class name to the outer `<div>` element that wraps the `AgGridSvelte` component. This is the standard way to visually style the grid.

```html
<div class="ag-theme-alpine">
  <AgGridSvelte ... />
</div>
```

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

### Global Styles with CSS Variables in Svelte AG Grid

Source: https://ag-grid-svelte.michael.kim/guide/customization

Demonstrates how to apply global styles to AG Grid themes using CSS variables within Svelte components. It utilizes the `:global(...)` modifier to ensure styles are applied correctly, especially for theme-wide properties and individual elements. This method is necessary because Svelte's default scoped CSS might otherwise remove unused rules.

```svelte
<style>
  :global(.ag-theme-alpine) {
    --ag-background-color: orange;
  }

  /* Individual element */
  :global(.ag-theme-alpine .ag-header-cell-label) {
    font-style: italic;
  }

  /* Alternative (if .ag-theme-alpine is in scope) */
  .ag-theme-alpine :global(.ag-header-cell-label) {
  }

  /* Multiple themes */
  :global(.ag-theme-alpine, .ag-theme-alpine-dark) {
    --ag-grid-size: 3px;
  }
</style>
```

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

### Applying CSS Variables via HTML Div in Svelte AG Grid

Source: https://ag-grid-svelte.michael.kim/guide/customization

Shows an alternative method to apply CSS variables for AG Grid theming by setting them on a parent HTML div element. This approach is useful when direct style manipulation on the component is not feasible or desired, effectively passing the style down to the AG Grid component.

```svelte
<div class="ag-theme-alpine">
  <AgGridSvelte --ag-background-color="#ddd" />
</div>

<!-- is equivalent to -->

<div class="ag-theme-alpine">
  <div style="display: contents; --ag-background-color:#ddd;"> <!-- :( -->
    <AgGridSvelte />
  </div>
</div>
```

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

### Apply AG Grid Theme with Dark Mode Support in Svelte

Source: https://ag-grid-svelte.michael.kim/guide/themes

Applies an AG Grid theme and dynamically switches to a dark mode variant using Svelte's class directives. This enables dark mode support by conditionally adding the 'ag-theme-alpine-dark' class based on a 'isDarkMode' variable.

```svelte
<div class="ag-theme-alpine" class:ag-theme-alpine-dark={isDarkMode}>
  <AgGridSvelte ... />
</div>
```

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

### Styling Rows and Cells with Global Classes in Svelte AG Grid

Source: https://ag-grid-svelte.michael.kim/guide/customization

Explains how to apply custom classes to rows and cells in Svelte AG Grid and style them using global CSS rules. The `:global(...)` modifier is crucial here to prevent Svelte's scoped CSS from removing the custom class definitions, ensuring that the intended styling is applied to the grid elements.

```svelte
<AgGridSvelte rowClass="my-row-class" />

<style>
  :global(.my-row-class) {
    background-color: tomato;
  }
</style>
```

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