wappler_ag_grid_cdmx_extension_quickstart_typescript_setup.ts

1import { WapplerAgGrid } from '@cdmx/wappler_ag_grid';
2import { GridOptions } from 'ag-grid-community';
3
4// Define the grid configuration
5const gridOptions: GridOptions = {
6    columnDefs: [
7        { field: 'make', sortable: true, filter: true },
8        { field: 'model', sortable: true, filter: true },
9        { field: 'price', sortable: true, filter: true }
10    ],
11    rowData: [
12        { make: 'Toyota', model: 'Celica', price: 35000 },
13        { make: 'Ford', model: 'Mondeo', price: 32000 },
14        { make: 'Porsche', model: 'Boxster', price: 72000 }
15    ],
16    pagination: true,
17    paginationPageSize: 10
18};
19
20// Initialize the grid on a specific DOM element
21const gridElement = document.querySelector<HTMLElement>('#myGrid');
22
23if (gridElement) {
24    const wapplerGrid = new WapplerAgGrid(gridElement, gridOptions);
25    
26    // Optional: Access the underlying AG Grid API
27    console.log('Grid initialized:', wapplerGrid.gridApi);
28}