Is is possible to use ag-grid-community with LitElements?

Question

Is is possible to use ag-grid-community with LitElements? This is what I have tried, I am unable to initialize the ag-grid instance with the below code,

Console Error - ag-grid-community.auto.esm.js:45056 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

import { Grid } from 'ag-grid-community';

export class myComponent extends LitElement {
  static scopedElements = {
    'ag-grid': Grid
  };

  constructor() {
    super();
    this.columnDefs = [
      {headerName: "Make", field: "make"},
      {headerName: "Model", field: "model"},
      {headerName: "Price", field: "price"}
    ];
        
    this.rowData = [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ];
        
    this.gridOptions = {
      columnDefs: this.columnDefs,
      rowData: this.rowData,
    };

    const eGridDiv = document.querySelector('#myGrid');
    new Grid(eGridDiv, this.gridOptions);
  }
  render() {
    return html`
      <div>
          <ag-grid
            .gridOptions=${this.gridOptions}
          ></ag-grid>
      </div>
    `;
  }
}

Answer 1

You must delete comments text from you code

 **specify the data** this.rowData = [    

**let the grid know which columns and what data to use** this.gridOptions

also I think you fogot delete comma here:

.gridOptions=${this.gridOptions}

Answer 2

The constructor is too soon to get a reference to a rendered div. firstUpdated() would be a good place to do that. You also need to give the div an id ("myGrid") and you need to query for it in this.renderRoot rather than document.

ag-grid also needs styles loaded for it to work so I've added link tags in the returned template below. This could be improved by grabbing the styles directly and wrapping it with css tag function to provide to the component as static styles instead.

<script type="module">
import {html, LitElement} from 'https://unpkg.com/[email protected]?module';
import {Grid} from 'https://unpkg.com/[email protected]?module';

const columnDefs = [
  { field: "make" },
  { field: "model" },
  { field: "price" }
];

const rowData = [
  { make: "Toyota", model: "Celica", price: 35000 },
  { make: "Ford", model: "Mondeo", price: 32000 },
  { make: "Porsche", model: "Boxster", price: 72000 }
];

const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData
};

class MyElement extends LitElement {
  firstUpdated() {
    const gridDiv = this.renderRoot.querySelector('#myGrid');
    new Grid(gridDiv, gridOptions);
  }
  
  render() {
    return html`
      <!-- Include the core CSS, this is needed by the grid -->
      <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
      <!-- Include the theme CSS, only need to import the theme you are going to use -->
      <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>
      <div id="myGrid" class="ag-theme-alpine" style="height: 500px"></div>
    `;
  }
}

customElements.define('my-element', MyElement);
</script>

<my-element></my-element>