### Clone Example Project

Source: https://www.ag-grid.com/angular-data-grid/server-side-operations-nodejs

Clone the reference implementation repository to get started.

```bash
git clone https://github.com/ag-grid/ag-grid-server-side-nodejs-example.git
```

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

### Clone Example Project

Source: https://www.ag-grid.com/angular-data-grid/server-side-operations-spark

Clone the example project from GitHub to get started.

```bash
git clone https://github.com/ag-grid/ag-grid-server-side-apache-spark-example.git
```

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

### Clone Example Project

Source: https://www.ag-grid.com/angular-data-grid/server-side-operations-graphql

Clone the reference implementation project from GitHub to get started.

```bash
git clone https://github.com/ag-grid/ag-grid-server-side-graphql-example.git
```

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

### Clone and Build Server-Side Oracle Example Project

Source: https://www.ag-grid.com/angular-data-grid/server-side-operations-oracle

Clone the AG Grid server-side Oracle example project from GitHub and build it using Maven. This installs dependencies and compiles the project.

```bash
git clone https://github.com/ag-grid/ag-grid-server-side-oracle-example.git
cd ag-grid-server-side-oracle-example
mvn clean install
```

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

### GraphQL & MySQL Server-Side Example

Source: https://www.ag-grid.com/angular-data-grid/server-side-operations-graphql

Illustrates a server-side setup using GraphQL and MySQL to serve data to AG Grid, focusing on the datasource and server implementation.

```javascript
const express = require('express');
const mysql = require('mysql');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

const app = express();
const port = 3000;

// Database connection
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'aggrid'
});

connection.connect(err => {
    if (err) throw err;
    console.log('Connected to MySQL database');
});

// GraphQL schema
const schema = buildSchema(`
    type Row {
        id: Int
        name: String
        country: String
        year: Int
        date: String
        balance: Float
    }

    type RowsResult {
        totalRowCount: Int
        rows: [Row]
    }

    type Query {
        rows(firstRow: Int, lastRow: Int, sortModel: String, filterModel: String): RowsResult
    }
`);

// Resolver function
const rootValue = {
    rows: ({ firstRow, lastRow, sortModel, filterModel }) => {
        return new Promise((resolve, reject) => {
            let query = 'SELECT SQL_CALC_FOUND_ROWS * FROM grid_data';
            let queryParams = [];

            // Basic filtering (needs proper parsing of filterModel)
            if (filterModel) {
                // Example: filterModel = {"country":{"filterType":"text","type":"contains","filter":"USA"}}
                const filters = JSON.parse(filterModel);
                let filterClauses = [];
                Object.keys(filters).forEach(key => {
                    const filter = filters[key];
                    if (filter.filterType === 'text') {
                        filterClauses.push(`${key} LIKE ?`);
                        queryParams.push(`%${filter.filter}%`);
                    }
                    // Add more filter types as needed
                });
                if (filterClauses.length > 0) {
                    query += ' WHERE ' + filterClauses.join(' AND ');
                }
            }

            // Basic sorting (needs proper parsing of sortModel)
            if (sortModel) {
                // Example: sortModel = [{"colId":"name","sort":"asc"}]
                const sorts = JSON.parse(sortModel);
                let sortClauses = [];
                sorts.forEach(sort => {
                    sortClauses.push(`${sort.colId} ${sort.sort.toUpperCase()}`);
                });
                if (sortClauses.length > 0) {
                    query += ' ORDER BY ' + sortClauses.join(', ');
                }
            }

            // Pagination
            const limit = lastRow - firstRow;
            const offset = firstRow;
            query += ` LIMIT ${limit} OFFSET ${offset}`;

            console.log('Executing query:', query, queryParams);

            connection.query(query, queryParams, (error, results) => {
                if (error) {
                    console.error('Database query error:', error);
                    return reject(error);
                }

                connection.query('SELECT FOUND_ROWS() as totalRowCount', (err, countResult) => {
                    if (err) {
                        console.error('Database count error:', err);
                        return reject(err);
                    }
                    resolve({
                        totalRowCount: countResult[0].totalRowCount,
                        rows: results
                    });
                });
            });
        });
    }
};

app.use('/graphql', graphqlHTTP({
    schema: schema,
    rootValue: rootValue,
    graphiql: true,
}));

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

```

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

### Basic Row Selection Setup in Angular

Source: https://www.ag-grid.com/angular-data-grid/row-selection

This example demonstrates a basic AG Grid setup in an Angular component, including enabling row selection and fetching data. It allows switching between single and multi-row selection modes via a dropdown.

```typescript
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowSelectionMode,
  RowSelectionModule,
  RowSelectionOptions,
  ValidationModule,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
ModuleRegistry.registerModules([
  RowSelectionModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="example-wrapper">
    <div class="example-header">
      <label>
        <span>Selection mode: </span>
        <select id="input-selection-mode" (change)="updateSelectionOptions()">
          <option value="singleRow">singleRow</option>
          <option value="multiRow">multiRow</option>
        </select>
      </label>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowSelection]="rowSelection"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<IOlympicData>;

  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 150 },
    { field: "age", maxWidth: 90 },
    { field: "country", minWidth: 150 },
    { field: "year", maxWidth: 90 },
    { field: "date", minWidth: 150 },
    { field: "sport", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  rowSelection: RowSelectionOptions | "single" | "multiple" = {
    mode: "singleRow",
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  updateSelectionOptions() {
    this.gridApi.setGridOption("rowSelection", {
      mode: getSelectValue("#input-selection-mode"),
    });
  }

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.gridApi = params.api;

    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

function getSelectValue(id: string): RowSelectionMode {
  return (
    (
      document.querySelector<HTMLSelectElement>(id)
        ?.value as RowSelectionMode
    ) ?? "singleRow"
  );
}

```

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

### Basic AG-Grid Angular Component Setup

Source: https://www.ag-grid.com/angular-data-grid/deep-dive

This snippet shows the essential setup for an AG-Grid Angular component. It includes importing necessary modules, defining row data and column definitions, and configuring the AgGridAngular component in the template. Ensure `ag-grid-angular` is installed.

```typescript
import { Component } from "@angular/core";

import { AgGridAngular } from "ag-grid-angular";
import type { ColDef } from "ag-grid-community";
import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";

ModuleRegistry.registerModules([AllCommunityModule]);

// Row Data Interface
interface IRow {
  make: string;
  model: string;
  price: number;
  electric: boolean;
}

@Component({
  standalone: true,
  imports: [AgGridAngular],
  selector: "my-app",
  template: `
    <div class="content">
      <!-- The AG Grid component, with Dimensions, CSS Theme, Row Data, and Column Definition -->
      <ag-grid-angular
        style="width: 100%; height: 220px;"
        [rowData]="rowData"
        [columnDefs]="colDefs"
      />
    </div>
  `,
})
export class AppComponent {
  // Row Data: The data to be displayed.
  rowData: IRow[] = [
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
  ];

  // Column Definitions: Defines & controls grid columns.
  colDefs: ColDef<IRow>[] = [
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric" },
  ];
}

```

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

### Complete AG-Grid Angular Example

Source: https://www.ag-grid.com/angular-data-grid/getting-started

A full example demonstrating module registration, component setup, row data, column definitions, and default column settings. This includes defining an interface for row data and applying styles for full width and height.

```typescript
import { Component } from "@angular/core";

import { AgGridAngular } from "ag-grid-angular";
import type { ColDef } from "ag-grid-community";
import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";

ModuleRegistry.registerModules([AllCommunityModule]);

// Row Data Interface
interface IRow {
  make: string;
  model: string;
  price: number;
  electric: boolean;
}

@Component({
  standalone: true,
  imports: [AgGridAngular],
  selector: "my-app",
  template: `
    <div class="content" style="width: 100%; height: 100%;">
      <!-- The AG Grid component, with Dimensions, CSS Theme, Row Data, and Column Definition -->
      <ag-grid-angular
        style="width: 100%; height: 100%;"
        [rowData]="rowData"
        [columnDefs]="colDefs"
        [defaultColDef]="defaultColDef"
      />
    </div>
  `,
})
export class AppComponent {
  // Row Data: The data to be displayed.
  rowData: IRow[] = [
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    { make: "Mercedes", model: "EQA", price: 48890, electric: true },
    { make: "Fiat", model: "500", price: 15774, electric: false },
    { make: "Nissan", model: "Juke", price: 20675, electric: false },
  ];

  // Column Definitions: Defines & controls grid columns.
  colDefs: ColDef<IRow>[] = [
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric" },
  ];

  defaultColDef: ColDef = {
    flex: 1,
  };
}


```

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

### AG-Grid Angular Component Setup

Source: https://www.ag-grid.com/angular-data-grid/column-headers-styling

Set up an AG-Grid Angular component, including importing necessary modules and defining column definitions. This example demonstrates basic grid configuration and data fetching.

```typescript
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  ValidationModule,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
ModuleRegistry.registerModules([
  TextFilterModule,
  ClientSideRowModelModule,
  RowGroupingModule,
  NumberFilterModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [groupHeaderHeight]="groupHeaderHeight"
    [headerHeight]="headerHeight"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: (ColDef | ColGroupDef)[] = [
    {
      headerName: "Athlete Details",
      children: [
        {
          field: "athlete",
          width: 150,
          suppressSizeToFit: true,
          enableRowGroup: true,
          rowGroupIndex: 0,
        },
        {
          field: "age",
          width: 90,
          minWidth: 75,
          maxWidth: 100,
          enableRowGroup: true,
        },
        {
          field: "country",
          width: 120,
          enableRowGroup: true,
        },
        {
          field: "year",
          width: 90,
          enableRowGroup: true,
        },
        { field: "sport", width: 110, enableRowGroup: true },
        {
          field: "gold",
          width: 60,
          enableValue: true,
          suppressHeaderMenuButton: true,
          suppressHeaderFilterButton: true,
          filter: "agNumberColumnFilter",
          aggFunc: "sum",
        },
        {
          field: "silver",
          width: 60,
          enableValue: true,
          suppressHeaderMenuButton: true,
          suppressHeaderFilterButton: true,
          filter: "agNumberColumnFilter",
          aggFunc: "sum",
        },
        {
          field: "bronze",
          width: 60,
          enableValue: true,
          suppressHeaderMenuButton: true,
          suppressHeaderFilterButton: true,
          filter: "agNumberColumnFilter",
          aggFunc: "sum",
        },
        {
          field: "total",
          width: 60,
          enableValue: true,
          suppressHeaderMenuButton: true,
          suppressHeaderFilterButton: true,
          filter: "agNumberColumnFilter",
          aggFunc: "sum",
        },
      ],
    },
  ];
  groupHeaderHeight = 75;
  headerHeight = 150;
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<IOlympicData[]>("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

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

### Complete AG Grid Angular Component Setup

Source: https://www.ag-grid.com/angular-data-grid/row-sorting

This example shows a full AG Grid Angular component setup, including module registration, column definitions with absolute sorting, default column definitions, and fetching row data. The `rankingChange` field is populated with random numbers between -5 and 5.

```typescript
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  ValidationModule,
} from "ag-grid-community";
ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);
import { any } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 150 },
    { field: "year", maxWidth: 90 },
    {
      field: "rankingChange",
      sort: { direction: "asc", type: "absolute" },
      sortingOrder: [
        { direction: "asc", type: "absolute" },
        { direction: "desc", type: "absolute" },
        null,
      ],
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  rowData!: any[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent) {
    this.http
      .get<
        any[]
      >("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
      .subscribe(
        (data) =>
          (this.rowData = data.map((item) => {
            return {
              ...item,
              rankingChange: Math.round(window.agRandom() * 10) - 5,
            };
          })),
      );
  }
}
```

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

### AG-Grid Angular Component Setup

Source: https://www.ag-grid.com/angular-data-grid/column-groups

Sets up the AG-Grid Angular component, including module registration, HTTP client for data fetching, and basic grid options. Ensure 'ag-grid-angular' and 'ag-grid-community' are installed.

```typescript
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  ValidationModule,
} from "ag-grid-community";
ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="test-container">
    <div class="test-header">
      <button (click)="onBtNormalCols()">Normal Cols</button>
      <button (click)="onBtExtraCols()">Extra Cols</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      class="test-grid"
      [defaultColDef]="defaultColDef"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<IOlympicData>;

  defaultColDef: ColDef = {
    width: 150,
  };
  columnDefs: ColDef[] = createNormalColDefs();
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onBtNormalCols() {
    this.gridApi.setGridOption("columnDefs", createNormalColDefs());
  }

  onBtExtraCols() {
    this.gridApi.setGridOption("columnDefs", createExtraColDefs());
  }

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.gridApi = params.api;

    this.http
      .get<IOlympicData[]>("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

function createNormalColDefs(): (ColDef | ColGroupDef)[] {
  return [
    {
      headerName: "Athlete Details",
      headerClass: "participant-group",
      children: [
        { field: "athlete", colId: "athlete" },
        { field: "country", colId: "country" },
      ],
    },
    { field: "age", colId: "age" },
    {
      headerName: "Sports Results",
      headerClass: "medals-group",
      children: [
        { field: "sport", colId: "sport" },
        { field: "gold", colId: "gold" },
      ],
    },
  ];
}
function createExtraColDefs(): (ColDef | ColGroupDef)[] {
  return [
    {
      headerName: "Athlete Details",
      headerClass: "participant-group",
      children: [
        { field: "athlete", colId: "athlete" },
        { field: "country", colId: "country" },
        { field: "region1", colId: "region1" },
        { field: "region2", colId: "region2" },
      ],
    },
    { field: "age", colId: "age" },
    { field: "distance", colId: "distance" },
    {
      headerName: "Sports Results",
      headerClass: "medals-group",
      children: [
        { field: "sport", colId: "sport" },
        { field: "gold", colId: "gold" },
      ],
    },
  ];
}

```

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

### Full AG-Grid Angular Example

Source: https://www.ag-grid.com/angular-data-grid/key-features

Demonstrates mapping and formatting values, cell components, and resizing columns within a complete AG-Grid Angular application setup. Includes module registration and component definitions.

```typescript
import { ChangeDetectionStrategy, Component } from "@angular/core";

import type { ICellRendererAngularComp } from "ag-grid-angular";
import { AgGridAngular } from "ag-grid-angular";
import type {
  ColDef,
  ICellRendererParams,
  ValueGetterParams,
} from "ag-grid-community";
import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";

ModuleRegistry.registerModules([AllCommunityModule]);

@Component({
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<button (click)="buttonClicked()">Push Me!</button>`,
})
export class CustomButtonComponent implements ICellRendererAngularComp {
  agInit(params: ICellRendererParams): void {}
  refresh(params: ICellRendererParams) {
    return true;
  }
  buttonClicked() {
    console.log("clicked");
  }
}

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: ` <ag-grid-angular
    style="width: 100%; height: 100%;"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
  />`,
})
export class AppComponent {
  public rowData: any[] | null = [
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    { make: "Mercedes", model: "EQA", price: 48890, electric: true },
    { make: "Fiat", model: "500", price: 15774, electric: false },
    { make: "Nissan", model: "Juke", price: 20675, electric: false },
  ];
  public columnDefs: ColDef[] = [
    {
      headerName: "Make & Model",
      valueGetter: (p: ValueGetterParams) => p.data.make + " " + p.data.model,
      flex: 2,
    },
    {
      field: "price",
      valueFormatter: (p) => "£" + Math.floor(p.value).toLocaleString(),
      flex: 1,
    },
    { field: "electric", flex: 1 },
    { field: "button", cellRenderer: CustomButtonComponent, flex: 1 },
  ];
}

```

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

### Database Setup Script

Source: https://www.ag-grid.com/angular-data-grid/server-side-operations-graphql

Import the SQL script to create and populate the 'sample_data' database and 'olympic_winners' table.

```bash
mysql -u root -p -D sample_data < ./data/olympic_winners.sql
```

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

### Server-Side Model Grouping Example

Source: https://www.ag-grid.com/angular-data-grid/server-side-model-grouping

Example of server-side grouping configuration within the AG Grid server-side row model. This setup is used when data is too large to be handled client-side.

```javascript
const gridOptions = {
    columnDefs: [
        // column definitions here
    ],
    defaultColDef: {
        flex: 1,
    },
    rowModelType: 'serverSide',
    serverSideStoreType: 'partial',
    // other grid options
};

// ... grid initialization code
```

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

### Full Example: Applying German Locale in AppComponent

Source: https://www.ag-grid.com/angular-data-grid/localisation

This example demonstrates the complete setup within an Angular component, including imports, module registration, and applying the localeText property.

```typescript
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AG_GRID_LOCALE_DE } from "@ag-grid-community/locale";
import { AgGridAngular } from "ag-grid-angular";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  CsvExportModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ICellRendererComp,
  ICellRendererParams,
  LocaleModule,
  LocaleText,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  PaginationModule,
  RowSelectionModule,
  RowSelectionOptions,
  SideBarDef,
  StatusBar,
  TextEditorModule,
  TextFilterModule,
  ValidationModule,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  ExcelExportModule,
  FiltersToolPanelModule,
  IntegratedChartsModule,
  MultiFilterModule,
  PivotModule,
  RowGroupingPanelModule,
  SetFilterModule,
  SideBarModule,
  StatusBarModule,
} from "ag-grid-enterprise";
ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  RowSelectionModule,
  LocaleModule,
  PaginationModule,
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnsToolPanelModule,
  CsvExportModule,
  ExcelExportModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  CellSelectionModule,
  PivotModule,
  SetFilterModule,
  SideBarModule,
  StatusBarModule,
  RowGroupingPanelModule,
  TextFilterModule,
  NumberFilterModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [sideBar]="true"
    [statusBar]="statusBar"
    [rowGroupPanelShow]="rowGroupPanelShow"
    [pagination]="true"
    [paginationPageSize]="paginationPageSize"
    [paginationPageSizeSelector]="paginationPageSizeSelector"
    [enableCharts]="true"
    [localeText]="localeText"
    [rowSelection]="rowSelection"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    // this row just shows the row index, doesn't use any data from the row
    {
      headerName: "#",
      cellRenderer: NodeIdRenderer,
    },
    {
      field: "athlete",
      filterParams: { buttons: ["clear", "reset", "apply"] },
    },
    {
      field: "age",
      filterParams: { buttons: ["apply", "cancel"] },
      enablePivot: true,
    },
    { field: "country", enableRowGroup: true },
    { field: "year", filter: "agNumberColumnFilter" },
    { field: "date" },
    {
      field: "sport",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agTextColumnFilter",
            display: "accordion",
          },
          {
            filter: "agSetColumnFilter",
            display: "accordion",
          },
        ],
      },
    },
    { field: "gold", enableValue: true },
    { field: "silver", enableValue: true },
    { field: "bronze", enableValue: true },
    { field: "total", enableValue: true },
  ];
  defaultColDef: ColDef = {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  };
  statusBar: StatusBar = {
    statusPanels: [
      { statusPanel: "agTotalAndFilteredRowCountComponent", align: "left" },
      { statusPanel: "agAggregationComponent" },
    ],
  };
  rowGroupPanelShow: "always" | "onlyWhenGrouping" | "never" = "always";
  paginationPageSize = 500;
  paginationPageSizeSelector: number[] | boolean = [100, 500, 1000];
  localeText: LocaleText = AG_GRID_LOCALE_DE;
}
```

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

### Install Project Dependencies

Source: https://www.ag-grid.com/angular-data-grid/server-side-operations-graphql

Install all necessary project dependencies and build the project.

```bash
yarn install
```

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

### Install Dependencies and Build Project

Source: https://www.ag-grid.com/angular-data-grid/server-side-operations-spark

Install project dependencies and build the project using Maven.

```bash
mvn clean install
```

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

### Single Range Cell Selection Example

Source: https://www.ag-grid.com/angular-data-grid/cell-selection

This example demonstrates how to configure AG-Grid for single range cell selection by setting the `suppressMultiRanges` option. It includes necessary imports and component setup for an Angular application.

```typescript
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  TextEditorModule,
  ValidationModule,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [cellSelection]="cellSelection"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 150 },
    { field: "age", maxWidth: 90 },
    { field: "country", minWidth: 150 },
    { field: "year", maxWidth: 90 },
    { field: "date", minWidth: 150 },
    { field: "sport", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    editable: true,
  };
  cellSelection: boolean | CellSelectionOptions = { suppressMultiRanges: true };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<IOlympicData[]>("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

```

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

### Start the Application

Source: https://www.ag-grid.com/angular-data-grid/server-side-operations-graphql

Run the application using yarn start and access it via your browser.

```bash
yarn start
```

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

### AG-Grid Setup and Configuration for Pivoting

Source: https://www.ag-grid.com/angular-data-grid/pivoting

Sets up AG-Grid with necessary modules, column definitions, and default configurations for demonstrating pivot functionality. Includes HTTP client for data fetching.

```typescript
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnApiModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  ValidationModule,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  PivotModule,
  RowGroupingPanelModule,
} from "ag-grid-enterprise";
ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnApiModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  PivotModule,
  FiltersToolPanelModule,
  RowGroupingPanelModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="example-wrapper">
    <div style="margin-bottom: 5px">
      <button (click)="onBtNormal()">1 - Grouping Active</button>
      <button (click)="onBtPivotMode()">
        2 - Grouping Active with Pivot Mode
      </button>
      <button (click)="onBtFullPivot()">
        3 - Grouping Active with Pivot Mode and Pivot Active
      </button>
    </div>

    <ag-grid-angular
      style="width: 100%; height: 100%;"
      class="ag-theme-quartz"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [autoGroupColumnDef]="autoGroupColumnDef"
      [sideBar]="sideBar"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<IOlympicData>;

  columnDefs: ColDef[] = [
    { field: "country", rowGroup: true, enableRowGroup: true },
    { field: "year", rowGroup: true, enableRowGroup: true, enablePivot: true },
    { field: "date" },
    { field: "sport" },
    { field: "gold", aggFunc: "sum" },
    { field: "silver", aggFunc: "sum" },
    { field: "bronze", aggFunc: "sum" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 150,
  };
  autoGroupColumnDef: AutoGroupColumnDef = {
    minWidth: 250,
  };
  sideBar: SideBarDef | string | string[] | boolean | null = "columns";
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onBtNormal() {
    this.gridApi.setGridOption("pivotMode", false);
    this.gridApi.applyColumnState({
      state: [
        { colId: "country", rowGroup: true },
        { colId: "year", rowGroup: true },
      ],
      defaultState: {
        pivot: false,
        rowGroup: false,
      },
    });
  }

  onBtPivotMode() {
    this.gridApi.setGridOption("pivotMode", true);
    this.gridApi.applyColumnState({
      state: [
        { colId: "country", rowGroup: true },
        { colId: "year", rowGroup: true },
      ],
      defaultState: {
        pivot: false,
        rowGroup: false,
      },
    });
  }

  onBtFullPivot() {
    this.gridApi.setGridOption("pivotMode", true);
    this.gridApi.applyColumnState({
      state: [
        { colId: "country", rowGroup: true },
        { colId: "year", pivot: true },
      ],
      defaultState: {
        pivot: false,
        rowGroup: false,
      },
    });
  }

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.gridApi = params.api;

    this.http
      .get<IOlympicData[]>("https://www.ag-grid.com/example-assets/olympic-winners.json")

```

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

### AG-Grid Angular Component Setup for Skeleton Loading

Source: https://www.ag-grid.com/angular-data-grid/component-loading-cell-renderer

Configure an AG-Grid Angular component to use skeleton loading by setting `suppressServerSideFullWidthLoadingRow` to true. This example demonstrates the necessary imports, module registration, and component setup for a server-side row model.

```typescript
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IServerSideDatasource,
  IServerSideGetRowsRequest,
  ModuleRegistry,
  RowModelType,
  ValidationModule,
} from "ag-grid-community";
import {
  RowGroupingModule,
  ServerSideRowModelModule,
} from "ag-grid-enterprise";
ModuleRegistry.registerModules([
  ServerSideRowModelModule,
  RowGroupingModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowModelType]="rowModelType"
    [suppressServerSideFullWidthLoadingRow]="true"
    [cacheBlockSize]="cacheBlockSize"
    [maxBlocksInCache]="maxBlocksInCache"
    [rowBuffer]="rowBuffer"
    [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
    [blockLoadDebounceMillis]="blockLoadDebounceMillis"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "country", flex: 4 },
    { field: "sport", flex: 4 },
    { field: "year", flex: 3 },
    { field: "gold", aggFunc: "sum", flex: 2 },
    { field: "silver", aggFunc: "sum", flex: 2 },
    { field: "bronze", aggFunc: "sum", flex: 2 },
  ];
  defaultColDef: ColDef = {
    minWidth: 75,
  };
  rowModelType: RowModelType = "serverSide";
  cacheBlockSize = 5;
  maxBlocksInCache = 0;
  rowBuffer = 0;
  maxConcurrentDatasourceRequests = 1;
  blockLoadDebounceMillis = 200;
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get< 
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        // add id to data
        let idSequence = 0;
        data.forEach((item: any) => {
          item.id = idSequence++;
        });
        const server: any = getFakeServer(data);
        const datasource: IServerSideDatasource =
          getServerSideDatasource(server);
        params.api!.setGridOption("serverSideDatasource", datasource);
      });
  }
}

function getServerSideDatasource(server: any): IServerSideDatasource {
  return {
    getRows: (params) => {
      // adding delay to simulate real server call
      setTimeout(() => {
        const response = server.getResponse(params.request);
        if (response.success) {
          // call the success callback
          params.success({
            rowData: response.rows,
            rowCount: response.lastRow,
          });
        } else {
          // inform the grid request failed
          params.fail();
        }
      }, 4000);
    },
  };
}
function getFakeServer(allData: any[]): any {
  return {
    getResponse: (request: IServerSideGetRowsRequest) => {
      console.log(
        "[Datasource] asking for rows: " +
          request.startRow + 
          " to " +
          request.endRow,
      );
      // take a slice of the total rows
      const rowsThisPage = allData.slice(request.startRow, request.endRow);
      const lastRow = allData.length;
      return {
        success: true,
        rows: rowsThisPage,
        lastRow: lastRow,
      };
    },
  };
}

```

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

### Trigger quick-start prompt in Cursor/Claude

Source: https://www.ag-grid.com/angular-data-grid/mcp-server

Initiate the `quick-start` prompt in Cursor or Claude to generate instructions for creating a new AG Grid project or adding AG Grid to an existing one.

```bash
/ag-mcp:quick-start {additional-context}

```

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

### Get/Set Individual Filter Model

Source: https://www.ag-grid.com/angular-data-grid/filter-api

This example demonstrates how to get and set individual filter models, useful for saving and restoring filter states.

```typescript
onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.gridApi = params.api;

    params.api.getToolPanelInstance("filters")!.expandFilters(["athlete"]);

    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

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

### Setting up Server-Side Datasource

Source: https://www.ag-grid.com/angular-data-grid/server-side-model-updating-refresh

This code sets up the server-side datasource by fetching data, creating a fake server, and registering the datasource with the grid. It also initiates periodic data modification.

```typescript
      .get<any[]>("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        // give each data item an ID
        const dataWithId = data.map((d: any, idx: number) => ({
          ...d,
          id: idx,
        }));
        allData = dataWithId;
        // setup the fake server with entire dataset
        const fakeServer = new FakeServer(allData);
        // create datasource with a reference to the fake server
        const datasource = getServerSideDatasource(fakeServer);
        // register the datasource with the grid
        params.api!.setGridOption("serverSideDatasource", datasource);
        beginPeriodicallyModifyingData();
      });
  }
}

let allData: any[];
let versionCounter = 1;
const updateChangeIndicator = () => {
  const el = document.querySelector("#version-indicator") as HTMLInputElement;
  el.textContent = `${versionCounter}`;
};
const beginPeriodicallyModifyingData = () => {
  setInterval(() => {
    versionCounter += 1;
    allData = allData.map((data) => ({
      ...data,
      version: versionCounter + " - " + versionCounter + " - " + versionCounter,
    }));
    updateChangeIndicator();
  }, 4000);
};
```

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

### Expand and Collapse Filter Groups Example

Source: https://www.ag-grid.com/angular-data-grid/tool-panel-filters

Demonstrates how to get the Filters Tool Panel instance and use its methods to expand and collapse filter groups, both all at once and individually.

```typescript
// lookup Filters Tool Panel instance by id, in this case using the default filter instance id
const filtersToolPanel = this.gridApi.getToolPanelInstance('filters');

// expands all filter groups in the Filters Tool Panel
filtersToolPanel.expandFilterGroups();

// collapses all filter groups in the Filters Tool Panel
filtersToolPanel.collapseFilterGroups();

// expands the 'athlete' and 'competition' filter groups in the Filters Tool Panel
filtersToolPanel.expandFilterGroups(['athleteGroupId', 'competitionGroupId']);

// collapses the 'competition' filter group in the Filters Tool Panel
filtersToolPanel.collapseFilters(['competitionGroupId']);
```

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

### Server-Side Datasource Setup

Source: https://www.ag-grid.com/angular-data-grid/server-side-model-changing-columns

Sets up the server-side datasource with a fake server and registers it with the grid.

```typescript
fakeServer = new FakeServer(data);
const datasource: IServerSideDatasource =
  getServerSideDatasource(fakeServer);
params.api!.setGridOption("serverSideDatasource", datasource);
```

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

### Trigger quick-start prompt in VS Code (CoPilot)

Source: https://www.ag-grid.com/angular-data-grid/mcp-server

Activate the `quick-start` prompt within VS Code (CoPilot) to receive guidance on setting up an AG Grid project.

```bash
mcp.ag-mcp.quick-start {additional-context}

```