Angular

@freegridjs/angular has a standalone <free-grid> component for Angular 17+. Events are outputs with the same names, except (gridPaste) and (gridScroll).…

Live demoAngular

The standalone <free-grid> component with inputs and outputs.

Code for this demo

import { Component } from '@angular/core';
import { FreeGridComponent } from '@freegridjs/angular';
import type { GridApi } from '@freegridjs/core';

@Component({
  selector: 'app-orders',
  standalone: true,
  imports: [FreeGridComponent],
  template: `
    <free-grid [columns]="columns" [data]="rows" rowSelection="multiple" theme="erp" [height]="520"
               (ready)="api = $event" (cellClick)="open($event.row)" />
  `,
})
export class OrdersComponent {
  columns = [{ field: 'name' }, { field: 'total', type: 'number' }];
  rows = [];
  api?: GridApi;
  open(row: unknown) { console.log(row); }
}
// global styles: @import '@freegridjs/core/styles.css';

@freegridjs/angular has a standalone <free-grid> component for Angular 17+. Events are outputs with the same names, except (gridPaste) and (gridScroll). The grid runs outside the Angular zone, so scrolling does not trigger change detection.

import { Component } from '@angular/core';
import { FreeGridComponent } from '@freegridjs/angular';
import type { GridApi } from '@freegridjs/core';

@Component({
  selector: 'app-orders',
  standalone: true,
  imports: [FreeGridComponent],
  template: `
    <free-grid [columns]="columns" [data]="rows" rowSelection="multiple" theme="erp" [height]="520"
               (ready)="api = $event" (cellClick)="open($event.row)" />
  `,
})
export class OrdersComponent {
  columns = [{ field: 'name' }, { field: 'total', type: 'number' }];
  rows = [];
  api?: GridApi;
  open(row: unknown) { console.log(row); }
}
// global styles: @import '@freegridjs/core/styles.css';