Support for AG Grid in Observable Framework

Community Help
1

How to use ag-grid in Observable Framework?

I’m using this code:

<div class="card" style="margin: 0 -1rem;">
<div id="gridContainer" class="ag-theme-alpine"></div>
</div>

```js
const gridOptions = ({
  columnDefs: [
    { headerName: "Species", field: "species", filter: true },
    { headerName: "Island", field: "island", filter: true },
    { headerName: "Culmen length (mm)", field: "culmen_length_mm", filter: true },
    { headerName: "Culmen depth (mm)", field: "culmen_depth_mm", filter: true },
    { headerName: "Flipper length (mm)", field: "flipper_length_mm", filter: true },
    { headerName: "Body mass (grams)", field: "body_mass_g", filter: true },
    { headerName: "Sex", field: "sex", filter: true }
  ],
  rowData: penguins,
  rowSelection: "single"
})


const instcgrid = new AgGrid.Grid(gridContainer, gridOptions);
gridOptions.api.sizeColumnsToFit();


thank you in advance
2

I assume you also have a line in there somewhere like:
const gridContainer = document.querySelector('#gridContainer');
?

3

Yes, actually I have next result:

image
image2098×944 21.1 KB

4

Looks like all you are missing is the stylesheet and theme… if you add this to your markdown file it should work:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.min.css">
5

Ah yes, thanks for the help!!!

now it worked!!

image
image2426×626 47.4 KB

1 Like
6

An extended version of Cobus’s answer (including support for dark mode) is now published at AG Grid | Pangea Proxima

7

Hi all:

I see this is a solved problem, but I was not able to reproduce it. So I took the demo from AG Grid and modified it. But no luck.

My grid.md file looks like this:

Grid


// Grid Options: Contains all of the grid configurations
const gridOptions = {
  // 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
const gridApi = agGrid.createGrid(document.querySelector("#myGrid"), gridOptions);

display(gridApi)

But the response I get is

Screenshot 2025-04-19 at 11.26.22 AM
Screenshot 2025-04-19 at 11.26.22 AM702×1170 92.8 KB

What am I doing wrong? Help is appreciated!
Thanks, Gani -

8

A simple working file.md would be much appreciated.
Gani -

9

Never mind, this version below worked.

Grid

<script src="https://cdn.jsdelivr.net/npm/ag-grid-community@33.2.4/dist/ag-grid-community.min.js?t=1744902172718"></script>

//const div = display(document.createElement("myGrid"));
const div = display(document.createElement("div"));
div.style = "height: 250px;";
let gridApi;
const gridOptions = {
  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 }
  ],
  columnDefs: [
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric" }
  ],
  defaultColDef: { flex: 1 }
};

// Initialize grid AFTER DOM element exists

  gridApi = agGrid.createGrid(div, gridOptions);
1 Like