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