wappler_ag_grid_quickstart_with_column_definitions_and_row_data.ts

1import { WapplerAgGrid } from '@cdmx/wappler_ag_grid';
2
3// Define the grid options and data
4const gridOptions = {
5    columnDefs: [
6        { field: 'make', headerName: 'Manufacturer' },
7        { field: 'model', headerName: 'Model' },
8        { field: 'price', headerName: 'Price', valueFormatter: (p: any) => '$' + p.value.toLocaleString() }
9    ],
10    rowData: [
11        { make: 'Toyota', model: 'Celica', price: 35000 },
12        { make: 'Ford', model: 'Mondeo', price: 32000 },
13        { make: 'Porsche', model: 'Boxster', price: 72000 }
14    ]
15};
16
17// Initialize the grid on a specific DOM element
18const gridDiv = document.querySelector<HTMLElement>('#myGrid');
19
20if (gridDiv) {
21    const agGrid = new WapplerAgGrid(gridDiv, gridOptions);
22    
23    // Example: Accessing the grid API through the Wappler wrapper
24    agGrid.api.sizeColumnsToFit();
25}