JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://fin-hypergrid.github.io/core/2.0.2/build/fin-hypergrid.js"></script>
<script>
  class DataGrid extends HTMLElement {

    constructor() {
      super();
      this.createShadowRoot().innerHTML = `
      	<style>
        	:host {
          	display: block;
          }
          
          div {
          	height: 100%;
          	width: 100%;
          }
        </style>
        <div></div>
      `;
    }

    connectedCallback() {
			const grid = new fin.Hypergrid(this.shadowRoot.querySelector('div'));
      const data = [
        { name: 'Company 1', price: 300 },
        { name: 'Company 2', price: 200 },
        { name: 'Company 3', price: 150 },
        { name: 'Company 4', price: 500 },
        { name: 'Company 5', price: 999 }
      ];
      grid.setData(data);
    }

  }

  customElements.define('data-grid', DataGrid);
</script>

<data-grid style="width:100px; height: 150px;"></data-grid>

CSS

data-grid {
    position: relative;
}