JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <script>var __basePath = '/';</script>
    <style media="only screen">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }

        html {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            overflow: auto;
        }

        body {
            padding: 1rem;
            overflow: auto;
        }
    </style>
            <script src="https://unpkg.com/@ag-grid-enterprise/[email protected]/dist/ag-grid-enterprise.min.js"></script>
    </head>

<body>
            <input type="text" id="filter-text-box" placeholder="Filter..." oninput="onFilterTextBoxChanged()"/>
    <div id="myGrid" class="ag-theme-alpine" style="height: 100%;"></div>

    <script src="main.js"></script>
</body>
</html>

JavaScript

function  renderCells(params){
  console.log("params", params)
        return params.value;
    
}


var gridOptions = {
  "rowSelection": "multiple",
  "enableRangeSelection": true,
  "suppressRowClickSelection": false,
  "rowMultiSelectWithClick": false,
  "rowDeselection": true,
  "suppressMultiRangeSelection": false,
  "enableColResize": true,
  "enableSorting": true,
  "enableFilter": true,
  "suppressMenuHide": false,
  "paginationAutoPageSize": true,
  "animateRows": true,
  "debug": false,
  "allowContextMenuWithControlKey": true,
  "sideBar": {
    "toolPanels": [
      {
        "id": "columns",
        "labelDefault": "Columns",
        "labelKey": "columns",
        "iconKey": "columns",
        "toolPanel": "agColumnsToolPanel"
      },
      {
        "id": "filters",
        "labelDefault": "Filters",
        "labelKey": "filters",
        "iconKey": "filter",
        "toolPanel": "agFiltersToolPanel"
      }
    ],
    "defaultToolPanel": "filters",
    "position": "right"
  },
  "statusBar": [
    {
      "statusPanel": "agTotalRowCountComponent",
      "align": "left"
    },
    {
      "statusPanel": "agFilteredRowCountComponent"
    },
    {
      "statusPanel": "agSelectedRowCountComponent"
    },
    {
      "statusPanel": "agAggregationComponent"
    }
  ],
  "enableCharts": true,
  "columnDefs": [
    {
      "headerName": "Month",
      "field": "0",
      "enableValue": false,
      "enableRowGroup": true,
      "enablePivot": true,
      "filter": "agTextColumnFilter",
      "cellStyle": {},
      "valueFormatter": null,
      "aggFunc": null,
      "rowGroup": false,
      "cellRenderer" : renderCells
    },
    {
      "headerName": "Baseline",
      "field": "1",
      "enableValue": true,
      "enableRowGroup": false,
      "enablePivot": false,
      "filter": "agNumberColumnFilter",
      "cellStyle": {
        "text-align": "right"
      },
      "aggFunc": "sum",
      "rowGroup": false,
      "cellRenderer" : renderCells
   ...