JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/ag-grid.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/ag-theme-alpine.css" />

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ag-grid-enterprise.min.js"></script>

<div id="myGrid" class="ag-theme-alpine" style="height: 600px; width: 100%;"></div>

CSS

#myGrid {
  height: 600px;
  width: 100%;
}

body {
  margin: 0;
  padding: 20px;
  font-family: sans-serif;
}

JavaScript

const initialData = [
  { a: 'test1', b: 10, c: 'c1' },
  { a: 'test2', b: 12, c: 'c1' },
  { a: 'test3', b: 14, c: 'c2' },
  { a: 'test4', b: 11, c: 'c2' },
  { a: 'test5', b: 13, c: 'c3' },
];

const generatedData = Array.from({ length: 292 }, (_, i) => ({
  a: `item${i + 6}`,
  b: Math.floor(Math.random() * 100) + 10,
  c: `c${Math.floor(i / 10) + 1}`
}));

const rowData = [...initialData, ...generatedData];

const gridOptions = {
  rowData: rowData,
  columnDefs: [
    {
      field: 'a',
      filter: 'agTextColumnFilter',
      sortable: true
    },
    {
      field: 'b',
      filter: 'agNumberColumnFilter',
      sortable: true
    },
    {
      field: 'c',
      filter: 'agSetColumnFilter',
      sortable: true
    }
  ],
  getRowHeight: (params) => 100
};

document.addEventListener('DOMContentLoaded', () => {
  const gridDiv = document.querySelector('#myGrid');
  agGrid.createGrid(gridDiv, gridOptions);
});