### Clone Example Project

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

Clone the example project repository to get started.

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

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

### Database Setup Script

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

This command installs the database and populates it with data. Ensure MySQL is installed and accessible.

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

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

### Full AG Grid Setup with Click Selection Example

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

This example demonstrates a complete AG Grid setup in TypeScript, including module registration, column definitions, and enabling multi-row selection with click selection. It also includes a function to dynamically change the `enableClickSelection` behavior.

```typescript
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  RowSelectionModule,
  ValidationModule,
  createGrid,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

ModuleRegistry.registerModules([
  RowSelectionModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { 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: {
    flex: 1,
    minWidth: 100,
  },
  rowSelection: { mode: "multiRow", enableClickSelection: true },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi.setGridOption("rowData", data));

function onEnableClickSelection() {
  const value =
    document.querySelector<HTMLSelectElement>("#select-enable")?.value;

  gridApi.setGridOption("rowSelection", {
    mode: "multiRow",
    enableClickSelection:
      value === "true" ? true : value === "false" ? false : (value as any),
  });
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onEnableClickSelection = onEnableClickSelection;
}
```

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

### Clone Example Project

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

Clone the ag-Grid server-side Oracle example project from GitHub to get started.

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

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

### Full AG Grid Setup with TypeScript

Source: https://www.ag-grid.com/javascript-data-grid

Complete example demonstrating AG Grid setup using TypeScript, including module registration, row data interface, grid API, and grid options.

```typescript
import {
  AllCommunityModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
} from "ag-grid-community";

ModuleRegistry.registerModules([AllCommunityModule]);
// Row Data Interface
interface IRow {
  make: string;
  model: string;
  price: number;
  electric: boolean;
}

// Grid API: Access to Grid API methods
let gridApi: GridApi;

// Grid Options: Contains all of the grid configurations
const gridOptions: GridOptions<IRow> = {
  // Data to be displayed
  rowData: [
    { 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 },
  ],
  // Columns to be displayed (Should match rowData properties)
  columnDefs: [
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric" },
  ],
  defaultColDef: {
    flex: 1,
  },
};
// Create Grid: Create new grid within the #myGrid div, using the Grid Options object
gridApi = createGrid(
  document.querySelector<HTMLElement>("#myGrid")!,
  gridOptions,
);
```

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

### AG Grid Setup with Calculated Columns and Custom Currency Formatting

Source: https://www.ag-grid.com/javascript-data-grid/calculated-columns

This example demonstrates a full AG Grid setup including module registration, custom data type definitions for currency, and column definitions with a calculated 'Profit' column. Ensure 'ag-grid-enterprise' is installed for Calculated Columns and Column Menu modules.

```typescript
import {
  ClientSideRowModelModule,
  ColDef,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  ValidationModule,
  ValueFormatterParams,
  createGrid,
} from "ag-grid-community";
import { CalculatedColumnsModule, ColumnMenuModule } from "ag-grid-enterprise";
import { SalesRow } from "./interfaces";

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  CalculatedColumnsModule,
  ColumnMenuModule,
  NumberFilterModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

type SalesRow = {
  product: string;
  revenue: number;
  cost: number;
};

const currencyFormatter = (
  params: ValueFormatterParams<SalesRow, number>,
): string => {
  const { value } = params;
  if (value == null) {
    return "";
  }

  if (String(value).startsWith("#")) {
    return String(value);
  }

  return `$${value.toLocaleString()}`;
};

const columnDefs: ColDef<SalesRow>[] = [
  { field: "product", flex: 1.3 },
  { field: "revenue", cellDataType: "currency" },
  { field: "cost", cellDataType: "currency" },
  {
    colId: "profit",
    headerName: "Profit",
    calculatedExpression: "[revenue] - [cost]",
    cellDataType: "currency",
    filter: "agNumberColumnFilter",
  },
];

const rowData: SalesRow[] = [
  { product: "Solar panel kit", revenue: 142000, cost: 96000 },
  { product: "Smart thermostat", revenue: 78000, cost: 52000 },
  { product: "Battery pack", revenue: 126000, cost: 101000 },
  { product: "EV charger", revenue: 92000, cost: 61000 },
  { product: "Heat pump", revenue: 168000, cost: 119000 },
  { product: "Inverter unit", revenue: 88000, cost: 57000 },
  { product: "Wind turbine kit", revenue: 232000, cost: 171000 },
  { product: "Solar tile roof", revenue: 198000, cost: 144000 },
  { product: "Power optimiser", revenue: 64000, cost: 41000 },
  { product: "Charge controller", revenue: 53000, cost: 33000 },
  { product: "Energy monitor", revenue: 47000, cost: 29000 },
  { product: "Storage cabinet", revenue: 71000, cost: 52000 },
  { product: "Microinverter", revenue: 59000, cost: 37000 },
  { product: "Heat recovery unit", revenue: 124000, cost: 88000 },
  { product: "Hybrid boiler", revenue: 156000, cost: 117000 },
  { product: "Smart meter", revenue: 39000, cost: 24000 },
  { product: "Insulation pack", revenue: 44000, cost: 27000 },
  { product: "EV cable set", revenue: 31000, cost: 18000 },
  { product: "Solar pump", revenue: 67000, cost: 45000 },
  { product: "Backup generator", revenue: 173000, cost: 131000 },
];

const gridOptions: GridOptions<SalesRow> = {
  columnDefs,
  rowData,
  dataTypeDefinitions: {
    currency: {
      baseDataType: "number",
      extendsDataType: "number",
      valueFormatter: currencyFormatter,
    },
  },
  calculatedColumns: {
    dataTypes: ["currency", "number", "boolean"],
  },
  defaultColDef: {
    flex: 1,
    minWidth: 130,
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
createGrid(gridDiv, gridOptions);

```

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

### Clone Example Project with Git

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

Clone the example project from GitHub to get started with the Node.js server-side operations example.

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

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

### Full Example: Copying Headers with Grid Initialization

Source: https://www.ag-grid.com/javascript-data-grid/clipboard

This example demonstrates a complete AG-Grid setup in TypeScript, including module registration and enabling `copyHeadersToClipboard`. It fetches data and initializes the grid.

```typescript
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberEditorModule,
  TextEditorModule,
  ValidationModule,
  createGrid,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete", minWidth: 200 },
    { field: "age" },
    { field: "country", minWidth: 150 },
    { field: "year" },
    { field: "date", minWidth: 150 },
    { field: "sport", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ],

  defaultColDef: {
    editable: true,
    flex: 1,
    minWidth: 100,
  },

  cellSelection: true,
  copyHeadersToClipboard: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));

```

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

### AG-Grid Enterprise Setup with Formulas

Source: https://www.ag-grid.com/javascript-data-grid/formulas

This example demonstrates a full AG-Grid setup including necessary enterprise module imports and configuration for formulas. It includes sample row data with pre-defined formulas for subtotal, tax, and total.

```typescript
import {
  ClientSideRowModelModule,
  ColDef,
  GetRowIdParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberEditorModule,
  TextEditorModule,
  ValidationModule,
  ValueFormatterParams,
  createGrid,
} from "ag-grid-community";
import { CellSelectionModule, FormulaModule } from "ag-grid-enterprise";

ModuleRegistry.registerModules([
  CellSelectionModule,
  ClientSideRowModelModule,
  FormulaModule,
  NumberEditorModule,
  TextEditorModule,
  ValidationModule,
]);

let gridApi: GridApi;

const valueFormatter = ({ value }: ValueFormatterParams) =>
  `$ ${Number(value).toFixed(2)}`;
const getRowId = (params: GetRowIdParams) => String(params.data.id);

const columnDefs: ColDef[] = [
  { field: "product" },
  { field: "price", valueFormatter: valueFormatter },
  { field: "quantity", headerName: "Qty", maxWidth: 100 },
  { field: "subtotal", valueFormatter: valueFormatter, allowFormula: true },
  {
    field: "tax",
    headerName: "Tax (10%)",
    valueFormatter: valueFormatter,
    allowFormula: true,
  },
  { field: "total", valueFormatter: valueFormatter, allowFormula: true },
];

const gridOptions: GridOptions = {
  columnDefs,
  getRowId,
  defaultColDef: {
    editable: true,
    flex: 1,
  },
  cellSelection: {
    handle: {
      mode: "fill",
    },
  },
  rowData: [
    {
      id: 1,
      product: "Apples",
      price: 1.25,
      quantity: 4,
      subtotal: '=REF(COLUMN("price"),ROW(1))*REF(COLUMN("quantity"),ROW(1))',
      tax: '=REF(COLUMN("subtotal"),ROW(1))*0.1',
      total: '=REF(COLUMN("subtotal"),ROW(1))+REF(COLUMN("tax"),ROW(1))',
    },
    {
      id: 2,
      product: "Oranges",
      price: 0.8,
      quantity: 6,
      subtotal: '=REF(COLUMN("price"),ROW(2))*REF(COLUMN("quantity"),ROW(2))',
      tax: '=REF(COLUMN("subtotal"),ROW(2))*0.1',
      total: '=REF(COLUMN("subtotal"),ROW(2))+REF(COLUMN("tax"),ROW(2))',
    },
    {
      id: 3,
      product: "Bananas",
      price: 0.5,
      quantity: 10,
      subtotal: '=REF(COLUMN("price"),ROW(3))*REF(COLUMN("quantity"),ROW(3))',
      tax: '=REF(COLUMN("subtotal"),ROW(3))*0.1',
      total: '=REF(COLUMN("subtotal"),ROW(3))+REF(COLUMN("tax"),ROW(3))',
    },
    {
      id: 4,
      product: "Grapes",
      price: 2.1,
      quantity: 3,
      subtotal: '=REF(COLUMN("price"),ROW(4))*REF(COLUMN("quantity"),ROW(4))',
      tax: '=REF(COLUMN("subtotal"),ROW(4))*0.1',
      total: '=REF(COLUMN("subtotal"),ROW(4))+REF(COLUMN("tax"),ROW(4))',
    },
    {
      id: 5,
      product: "Plums",
      price: 1.5,
      quantity: 2,
      subtotal: '=REF(COLUMN("price"),ROW(5))*REF(COLUMN("quantity"),ROW(5))',
      tax: '=REF(COLUMN("subtotal"),ROW(5))*0.1',
      total: '=REF(COLUMN("subtotal"),ROW(5))+REF(COLUMN("tax"),ROW(5))',
    },
    {
      id: 6,
      product: "Peaches",
      price: 1,
      quantity: 3,
      subtotal: '=REF(COLUMN("price"),ROW(6))*REF(COLUMN("quantity"),ROW(6))',
      tax: '=REF(COLUMN("subtotal"),ROW(6))*0.1',
      total: '=REF(COLUMN("subtotal"),ROW(6))+REF(COLUMN("tax"),ROW(6))',
    },
    {
      id: 7,
      product: "Mangos",
      price: 2.45,
      quantity: 1,
      subtotal: '=REF(COLUMN("price"),ROW(7))*REF(COLUMN("quantity"),ROW(7))',
      tax: '=REF(COLUMN("subtotal"),ROW(7))*0.1',
      total: '=REF(COLUMN("subtotal"),ROW(7))+REF(COLUMN("tax"),ROW(7))',
    },
    {
      id: 8,
      product: "Strawberries",
      price: 1.8,
      quantity: 4,
      subtotal: '=REF(COLUMN("price"),ROW(8))*REF(COLUMN("quantity"),ROW(8))',
      tax: '=REF(COLUMN("subtotal"),ROW(8))*0.1',
      total: '=REF(COLUMN("subtotal"),ROW(8))+REF(COLUMN("tax"),ROW(8))',
    },
  ],
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!; // Ensure this selector matches your HTML
gridApi = createGrid(gridDiv, gridOptions);
```

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

### AG Grid Enterprise Example Setup

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

This example demonstrates the integration of AG Grid Enterprise features including Integrated Charting, Row Grouping, Pivoting, Aggregation, and Tool Panels. Ensure all necessary modules are registered.

```typescript
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  AllCommunityModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
} from "ag-grid-community";
import {
  AllEnterpriseModule,
  IntegratedChartsModule,
} from "ag-grid-enterprise";

ModuleRegistry.registerModules([
  AllCommunityModule,
  AllEnterpriseModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
]);

const gridOptions: GridOptions = {
  rowData: [
    {
      make: "Tesla",
      model: "Model Y",
      price: 64950,
      electric: true,
      month: "June",
    },
    {
      make: "Ford",
      model: "F-Series",
      price: 33850,
      electric: false,
      month: "October",
    },
    {
      make: "Toyota",
      model: "Corolla",
      price: 29600,
      electric: false,
      month: "August",
    },
    {
      make: "Mercedes",
      model: "EQA",
      price: 48890,
      electric: true,
      month: "February",
    },
    {
      make: "Fiat",
      model: "500",
      price: 15774,
      electric: false,
      month: "January",
    },
    {
      make: "Nissan",
      model: "Juke",
      price: 20675,
      electric: false,
      month: "March",
    },
    {
      make: "Vauxhall",
      model: "Corsa",
      price: 18460,
      electric: false,
      month: "July",
    },
    {
      make: "Volvo",
      model: "EX30",
      price: 33795,
      electric: true,
      month: "September",
    },
    {
      make: "Mercedes",
      model: "Maybach",
      price: 175720,
      electric: false,
      month: "December",
    },
    {
      make: "Vauxhall",
      model: "Astra",
      price: 25795,
      electric: false,
      month: "April",
    },
    {
      make: "Fiat",
      model: "Panda",
      price: 13724,
      electric: false,
      month: "November",
    },
    {
      make: "Jaguar",
      model: "I-PACE",
      price: 69425,
      electric: true,
      month: "May",
    },
    {
      make: "Tesla",
      model: "Model Y",
      price: 64950,
      electric: true,
      month: "June",
    },
    {
      make: "Ford",
      model: "F-Series",
      price: 33850,
      electric: false,
      month: "October",
    },
    {
      make: "Toyota",
      model: "Corolla",
      price: 29600,
      electric: false,
      month: "August",
    },
    {
      make: "Mercedes",

```

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

### Full AG-Grid Setup with Pivoting Enabled

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

This example demonstrates a complete AG-Grid setup in TypeScript/JavaScript, including necessary module imports and data fetching, with pivoting enabled.

```typescript
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  ValidationModule,
  createGrid,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  PivotModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  PivotModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "country", rowGroup: true },
    { field: "gold", aggFunc: "sum" },
    { field: "sport", pivot: true },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 130,
  },
  autoGroupColumnDef: {
    minWidth: 200,
  },
  pivotMode: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

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

### AG-Grid Setup with Calculated Columns

Source: https://www.ag-grid.com/javascript-data-grid/calculated-columns

This example demonstrates a full AG-Grid setup in TypeScript, including module registration, row data, column definitions with a calculated 'Profit' column, and grid options. Ensure `ag-grid-enterprise` is installed for `CalculatedColumnsModule`.

```typescript
import {
  ClientSideRowModelModule,
  ColDef,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  ValidationModule,
  ValueFormatterParams,
  createGrid,
} from "ag-grid-community";
import { CalculatedColumnsModule, ColumnMenuModule } from "ag-grid-enterprise";
import { SalesRow } from "./interfaces";

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  CalculatedColumnsModule,
  ColumnMenuModule,
  NumberFilterModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

type SalesRow = {
  product: string;
  revenue: number;
  cost: number;
};

const formatter = (
  params: ValueFormatterParams<SalesRow, number>,
  formattedString: string,
): string => {
  const { value } = params;
  if (value == null) {
    return "";
  }

  if (String(value).startsWith("#")) {
    return String(value);
  }

  return formattedString;
};

const currencyFormatter = (params: ValueFormatterParams<SalesRow, number>) =>
  formatter(params, `$${(params.value ?? "").toLocaleString()}`);

const columnDefs: ColDef<SalesRow>[] = [
  { field: "product", flex: 1.3 },
  { field: "revenue", valueFormatter: currencyFormatter },
  { field: "cost", valueFormatter: currencyFormatter },
  {
    colId: "profit",
    headerName: "Profit",
    calculatedExpression: "[revenue] - [cost]",
    cellDataType: "number",
    filter: "agNumberColumnFilter",
    valueFormatter: currencyFormatter,
  },
];

const rowData: SalesRow[] = [
  { product: "Solar panel kit", revenue: 142000, cost: 96000 },
  { product: "Smart thermostat", revenue: 78000, cost: 52000 },
  { product: "Battery pack", revenue: 126000, cost: 101000 },
  { product: "EV charger", revenue: 92000, cost: 61000 },
  { product: "Heat pump", revenue: 168000, cost: 119000 },
  { product: "Inverter unit", revenue: 88000, cost: 57000 },
  { product: "Wind turbine kit", revenue: 232000, cost: 171000 },
  { product: "Solar tile roof", revenue: 198000, cost: 144000 },
  { product: "Power optimiser", revenue: 64000, cost: 41000 },
  { product: "Charge controller", revenue: 53000, cost: 33000 },
  { product: "Energy monitor", revenue: 47000, cost: 29000 },
  { product: "Storage cabinet", revenue: 71000, cost: 52000 },
  { product: "Microinverter", revenue: 59000, cost: 37000 },
  { product: "Heat recovery unit", revenue: 124000, cost: 88000 },
  { product: "Hybrid boiler", revenue: 156000, cost: 117000 },
  { product: "Smart meter", revenue: 39000, cost: 24000 },
  { product: "Insulation pack", revenue: 44000, cost: 27000 },
  { product: "EV cable set", revenue: 31000, cost: 18000 },
  { product: "Solar pump", revenue: 67000, cost: 45000 },
  { product: "Backup generator", revenue: 173000, cost: 131000 },
];

const gridOptions: GridOptions<SalesRow> = {
  columnDefs,
  rowData,
  calculatedColumns: {
    suppressColumnHighlighting: true,
  },
  defaultColDef: {
    flex: 1,
    minWidth: 130,
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
createGrid(gridDiv, gridOptions);

```

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

### AG-Grid Setup and For-Each Node Examples

Source: https://www.ag-grid.com/javascript-data-grid/accessing-data

This snippet sets up the AG-Grid with necessary modules and defines functions for iterating through grid nodes using different for-each methods. It includes setup for fetching data and attaching event handlers.

```TypeScript
import {
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  IRowNode,
  ModuleRegistry,
  NumberFilterModule,
  RowApiModule,
  ValidationModule,
  createGrid,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

ModuleRegistry.registerModules([
  ClientSideRowModelApiModule,
  NumberFilterModule,
  RowApiModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  SetFilterModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "country", rowGroup: true, hide: true },
    { field: "athlete", minWidth: 180 },
    { field: "age" },
    { field: "year" },
    { field: "date", minWidth: 150 },
    { field: "sport", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  autoGroupColumnDef: {
    minWidth: 200,
  },
  groupDefaultExpanded: 1,
};

function onBtForEachNode() {
  console.log("### api.forEachNode() ###");
  gridApi!.forEachNode(printNode);
}

function onBtForEachNodeAfterFilter() {
  console.log("### api.forEachNodeAfterFilter() ###");
  gridApi!.forEachNodeAfterFilter(printNode);
}

function onBtForEachNodeAfterFilterAndSort() {
  console.log("### api.forEachNodeAfterFilterAndSort() ###");
  gridApi!.forEachNodeAfterFilterAndSort(printNode);
}

function onBtForEachLeafNode() {
  console.log("### api.forEachLeafNode() ###");
  gridApi!.forEachLeafNode(printNode);
}

const printNode = (node: IRowNode<IOlympicData>, index?: number) => {
  if (node.group) {
    console.log(index + " -> group: " + node.key);
  } else {
    console.log(
      index + " -> data: " + node.data!.country + ", " + node.data!.athlete,
    );
  }
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) =>
    gridApi!.setGridOption("rowData", data.slice(0, 50)),
  );

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onBtForEachNode = onBtForEachNode;
  (<any>window).onBtForEachNodeAfterFilter = onBtForEachNodeAfterFilter;
  (<any>window).onBtForEachNodeAfterFilterAndSort =
    onBtForEachNodeAfterFilterAndSort;
  (<any>window).onBtForEachLeafNode = onBtForEachLeafNode;
}

```

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

### Full Example: Grid Setup with Custom Header Theme

Source: https://www.ag-grid.com/javascript-data-grid/theming-headers

This TypeScript example demonstrates setting up the AG-Grid with a custom theme applied to the headers. It includes module registration, grid options with column definitions, and fetching data to populate the grid.

```typescript
import {
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

ModuleRegistry.registerModules([AllEnterpriseModule]);

let gridApi: GridApi<IOlympicData>;

const myTheme = themeQuartz.withParams({
  headerHeight: "30px",
  headerTextColor: "white",
  headerBackgroundColor: "black",
  headerCellHoverBackgroundColor: "rgba(80, 40, 140, 0.66)",
  headerCellMovingBackgroundColor: "rgb(80, 40, 140)",
});

const gridOptions: GridOptions<IOlympicData> = {
  theme: myTheme,
  columnDefs: [
    {
      headerName: "Group 1",
      children: [{ field: "athlete", minWidth: 170 }, { field: "age" }],
    },
    {
      headerName: "Group 2",
      children: [
        { field: "country" },
        { field: "year" },
        { field: "date" },
        { field: "sport" },
        { field: "gold" },
        { field: "silver" },
        { field: "bronze" },
        { field: "total" },
      ],
    },
  ],
  defaultColDef: {
    editable: true,
    filter: true,
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

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

### AG-Grid Setup with Fill Handle Enabled

Source: https://www.ag-grid.com/javascript-data-grid/cell-selection-fill-handle

This example demonstrates a full AG-Grid setup in TypeScript, including module registration and enabling the Fill Handle. It fetches data and applies it to the grid.

```typescript
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberEditorModule,
  TextEditorModule,
  ValidationModule,
  createGrid,
} from "ag-grid-community";
import { CellSelectionModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { 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: {
    flex: 1,
    minWidth: 100,
    editable: true,
    cellDataType: false,
  },
  cellSelection: {
    handle: { mode: "fill" },
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi.setGridOption("rowData", data));
```

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

### AG Grid Setup with Formula Module and Validation

Source: https://www.ag-grid.com/javascript-data-grid/formula-editor-component

This comprehensive example demonstrates the full setup of AG Grid with the Formula and Validation modules, including column definitions, data, and grid options.

```typescript
import {
  ClientSideRowModelModule,
  ColDef,
  GetRowIdParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberEditorModule,
  TextEditorModule,
  ValidationModule,
  ValueFormatterParams,
  createGrid,
} from "ag-grid-community";
import { CellSelectionModule, FormulaModule } from "ag-grid-enterprise";

ModuleRegistry.registerModules([
  CellSelectionModule,
  ClientSideRowModelModule,
  FormulaModule,
  NumberEditorModule,
  TextEditorModule,
  ValidationModule,
]);

let gridApi: GridApi;

const valueFormatter = ({ value }: ValueFormatterParams) => {
  if (typeof value === "string" && value.startsWith("#")) {
    return value;
  }
  const numericValue = Number(value);
  return Number.isFinite(numericValue)
    ? `$ ${numericValue.toFixed(2)}`
    : String(value ?? "");
};
const getRowId = (params: GetRowIdParams) => String(params.data.id);

const columnDefs: ColDef[] = [
  { field: "item" },
  { field: "price", valueFormatter: valueFormatter },
  { field: "qty" },
  {
    field: "total",
    allowFormula: true,
    valueFormatter: valueFormatter,
    cellEditorParams: {
      validateFormulas: true,
    },
  },
];

const gridOptions: GridOptions = {
  columnDefs,
  getRowId,
  cellSelection: {
    handle: {
      mode: "fill",
    },
  },
  defaultColDef: {
    editable: true,
    flex: 1,
  },
  rowData: [
    {
      id: 1,
      item: "Apples",
      price: 1.2,
      qty: 4,
      total: '=REF(COLUMN("price"),ROW(1))*REF(COLUMN("qty"),ROW(1))',
    },
    {
      id: 2,
      item: "Bananas",
      price: 0.5,
      qty: 6,
      total: "=B2*",
    },
    {
      id: 3,
      item: "Oranges",
      price: 0.8,
      qty: 3,
      total: '=REF(COLUMN("price"),ROW(3))*REF(COLUMN("qty"),ROW(3))',
    },
    {
      id: 4,
      item: "Pears",
      price: 1.4,
      qty: 2,
      total: '=REF(COLUMN("price"),ROW(4))*REF(COLUMN("qty"),ROW(4))',
    },
    {
      id: 5,
      item: "Grapes",
      price: 2.1,
      qty: 3,
      total: "=BADFUNC(1)",
    },
    {
      id: 6,
      item: "Plums",
      price: 1.5,
      qty: 2,
      total: '=REF(COLUMN("price"),ROW(6))*REF(COLUMN("qty"),ROW(6))',
    },
    {
      id: 7,
      item: "Strawberries",
      price: 1.8,
      qty: 4,
      total: '=REF(COLUMN("price"),ROW(7))*REF(COLUMN("qty"),ROW(7))',
    },
  ],
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

```

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

### Navigate to Project Directory

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

Change the current directory to the cloned example project.

```bash
cd ag-grid-server-side-oracle-example
```

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

### AG Grid Setup with Quartz Theme and Column Definitions

Source: https://www.ag-grid.com/javascript-data-grid/styling-tutorial

This example demonstrates a complete AG Grid setup in TypeScript, including module registration, theme application, column definitions with value formatters, default column settings, and row selection. It initializes the grid with data and applies the Quartz theme.

```typescript
import {
  ClientSideRowModelModule,
  ColDef,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  RowSelectionModule,
  TextFilterModule,
  ValueFormatterParams,
  createGrid,
  themeQuartz,
} from "ag-grid-community";
import { getData, type IProduct } from "./data";

ModuleRegistry.registerModules([
  RowSelectionModule,
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
]);

const myTheme = themeQuartz;

const columnDefs: ColDef<IProduct>[] = [
  { field: "productName", headerName: "Product", minWidth: 180 },
  {
    field: "salesRevenue",
    headerName: "Revenue",
    valueFormatter: (params: ValueFormatterParams) =>
      params.value != null ? `$${params.value.toLocaleString()}` : "",
  },
  {
    field: "profitMargin",
    headerName: "Margin",
    valueFormatter: (params: ValueFormatterParams) =>
      params.value != null ? `${(params.value * 100).toFixed(0)}%` : "",
  },
  { field: "status" },
];

const defaultColDef: ColDef = {
  flex: 1,
  minWidth: 100,
  filter: true,
};

const gridOptions: GridOptions<IProduct> = {
  theme: myTheme,
  columnDefs,
  defaultColDef,
  rowData: getData(),
  rowSelection: {
    mode: "multiRow",
  },
};

createGrid(document.querySelector<HTMLElement>("#myGrid")!, gridOptions);
```

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

### Ag-Grid Set Filter Example with Case Sensitivity

Source: https://www.ag-grid.com/javascript-data-grid/filter-set-filter-list

This example demonstrates the difference between case-insensitive (default) and case-sensitive Set Filters. It includes setup for modules, column definitions with different case sensitivity settings, a custom cell renderer for color display, and initial grid setup.

```typescript
import {
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  ICellRendererParams,
  ISetFilterParams,
  ModuleRegistry,
  ValidationModule,
  createGrid,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  SetFilterModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [
    {
      headerName: "Case Insensitive (default)",
      field: "colour",
      filter: "agSetColumnFilter",
      filterParams: {
        caseSensitive: false,
        cellRenderer: colourCellRenderer,
      } as ISetFilterParams,
    },
    {
      headerName: "Case Sensitive",
      field: "colour",
      filter: "agSetColumnFilter",
      filterParams: {
        caseSensitive: true,
        cellRenderer: colourCellRenderer,
      } as ISetFilterParams,
    },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 225,
    cellRenderer: colourCellRenderer,
    floatingFilter: true,
  },
  sideBar: "filters",
  onFirstDataRendered: onFirstDataRendered,
  rowData: getData(),
};

const FIXED_STYLES =
  "vertical-align: middle; border: 1px solid black; margin: 3px; display: inline-block; width: 10px; height: 10px";

function colourCellRenderer(params: ICellRendererParams) {
  if (!params.value || params.value === "(Select All)") {
    return params.value;
  }

  return `<div style="background-color: ${params.value.toLowerCase()}; ${FIXED_STYLES}"></div>${params.value}`;
}

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  params.api.getToolPanelInstance("filters")!.expandFilters();
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

```

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

### Set Filter Mini Filter Example

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

This example demonstrates how to get, save, and restore the mini-filter text of the Set Filter. It requires the AG Grid Enterprise version.

```typescript
import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  SetFilterUi,
  ValidationModule,
  createGrid,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  SetFilterModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

const columnDefs: ColDef[] = [
  { field: "athlete", filter: "agSetColumnFilter" },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: columnDefs,
  defaultColDef: {
    flex: 1,
    minWidth: 150,
    filter: true,
  },
  sideBar: "filters",
  onGridReady: (params) => {
    params.api.getToolPanelInstance("filters")!.expandFilters();
  },
};

let savedMiniFilterText: string | null = "";

function getMiniFilterText() {
  gridApi!
    .getColumnFilterInstance<SetFilterUi>("athlete")
    .then((athleteFilter) => {
      console.log(athleteFilter!.getMiniFilter());
    });
}

function saveMiniFilterText() {
  gridApi!
    .getColumnFilterInstance<SetFilterUi>("athlete")
    .then((athleteFilter) => {
      savedMiniFilterText = athleteFilter!.getMiniFilter();
    });
}

function restoreMiniFilterText() {
  gridApi!
    .getColumnFilterInstance<SetFilterUi>("athlete")
    .then((athleteFilter) => {
      athleteFilter!.setMiniFilter(savedMiniFilterText);
    });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).getMiniFilterText = getMiniFilterText;
  (<any>window).saveMiniFilterText = saveMiniFilterText;
  (<any>window).restoreMiniFilterText = restoreMiniFilterText;
}
```