// This fake server uses http://alasql.org/ to mimic how a real server
// might generate sql queries from the Server-Side Row Model request.
// To keep things simple it does the bare minimum to support the example.
function FakeServer(allData) {
  alasql.options.cache = false;

  return {
    getData: function (request) {
      var results = executeQuery(request);

      return {
        success: true,
        rows: results,
        lastRow: getLastRowIndex(request),
      };
    },
  };

  function executeQuery(request) {
    var sql = buildSql(request);

    console.log('[FakeServer] - about to execute query:', sql);

    return alasql(sql, [allData]);
  }

  function buildSql(request) {
    return (
      selectSql(request) +
      ' FROM ?' +
      whereSql(request) +
      groupBySql(request) +
      orderBySql(request) +
      limitSql(request)
    );
  }

  function selectSql(request) {
    var rowGroupCols = request.rowGroupCols;
    var valueCols = request.valueCols;
    var groupKeys = request.groupKeys;

    if (isDoingGrouping(rowGroupCols, groupKeys)) {
      var rowGroupCol = rowGroupCols[groupKeys.length];
      var colsToSelect = [rowGroupCol.id];

      valueCols.forEach(function (valueCol) {
        colsToSelect.push(
          valueCol.aggFunc + '(' + valueCol.id + ') AS ' + valueCol.id
        );
      });

      return 'SELECT ' + colsToSelect.join(', ');
    }

    return 'SELECT *';
  }

  function whereSql(request) {
    var rowGroups = request.rowGroupCols;
    var groupKeys = request.groupKeys;
    var whereParts = [];

    if (groupKeys) {
      groupKeys.forEach(function (key, i) {
        var value = typeof key === 'string' ? "'" + key + "'" : key;

        whereParts.push(rowGroups[i].id + ' = ' + value);
      });
    }

    if (whereParts.length > 0) {
      return ' WHERE ' + whereParts.join(' AND ');
    }

    return '';
  }

  function groupBySql(request) {
    var rowGroupCols = request.rowGroupCols;
    var groupKeys = request.groupKeys;

    if (isDoingGrouping(rowGroupCols, groupKeys)) {
      var rowGroupCol = rowGroupCols[groupKeys.length];

      return ' GROUP BY ' + rowGroupCol.id + ' HAVING count(*) > 0';
    }

    return '';
  }

  function orderBySql(request) {
    var sortModel = request.sortModel;

    if (sortModel.length === 0) return '';

    var sorts = sortModel.map(function (s) {
      return s.colId + ' ' + s.sort.toUpperCase();
    });

    return ' ORDER BY ' + sorts.join(', ');
  }

  function limitSql(request) {
    if (request.endRow == undefined || request.startRow == undefined) {
      return '';
    }
    var blockSize = request.endRow - request.startRow;

    return ' LIMIT ' + blockSize + ' OFFSET ' + request.startRow;
  }

  function isDoingGrouping(rowGroupCols, groupKeys) {
    // we are not doing grouping if at the lowest level
    return rowGroupCols.length > groupKeys.length;
  }

  function getLastRowIndex(request) {
    return executeQuery({ ...request, startRow: undefined, endRow: undefined })
      .length;
  }
}

'use strict';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';
import 'ag-grid-enterprise';
import { AgGridReact } from 'ag-grid-react';
import React, { StrictMode, useCallback, useMemo, useState } from 'react';
import { createRoot } from 'react-dom/client';

const getServerSideDatasource = (server) => {
  return {
    getRows: (params) => {
      console.log('[Datasource] - rows requested by grid: ', params.request);
      var response = server.getData(params.request);
      // adding delay to simulate real server call
      setTimeout(() => {
        if (response.success) {
          // call the success callback
          params.success({
            rowData: response.rows,
            rowCount: response.lastRow,
          });
        } else {
          // inform the grid request failed
          params.fail();
        }
      }, 1000);
    },
  };
};
 const getRowId = (params) => {
       if (params.data.date != null && params.data.athlete != null) {
        return 'leaf-' + params.data.date + params.data.athlete;
      }
      const rowGroupCols = params.api.getRowGroupColumns();
      console.log(rowGroupCols)
      const rowGroupColIds = rowGroupCols.map((col) => col.getId()).join('-');
      const thisGroupCol = rowGroupCols[params.level];
      return (
        'group-' +
        rowGroupColIds +
        '-' +
        (params.parentKeys || []).join('-') +
        params.data[thisGroupCol.getColDef().field]
      );
    };

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
  const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);

  const [da,setda]= useState([]);
  const [columnDefs, setColumnDefs] = useState([
    { field: 'planet', rowGroup: true, hide: true },
    { field: 'country', rowGroup: true, hide: true },
    { field: 'sport', rowGroup: true, hide: true },
    { field: 'year', minWidth: 100 },
    { field: 'gold', aggFunc: 'sum', enableValue: true },
    { field: 'silver', aggFunc: 'sum', enableValue: true },
    { field: 'bronze', aggFunc: 'sum', enableValue: true },
  ]);
  const defaultColDef = useMemo(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);
  const autoGroupColumnDef = useMemo(() => {
    return {
      flex: 1,
      minWidth: 280,
      field: 'planet',
    };
  }, []);

  const onGridReady = useCallback((params) => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((resp) => resp.json())
      .then((data) => {
        
        // setup the fake server with entire dataset
        var val = data.map((sd)=>{return {...sd,planet:"earth"}})
        setda(val);
        var fakeServer = new FakeServer(val);
        // create datasource with a reference to the fake server
        var datasource = getServerSideDatasource(fakeServer);
        // register the datasource with the grid
        params.api.setGridOption('serverSideDatasource', datasource);
      });
  }, []);

  return (
    <div style={containerStyle}>
      <div
        style={gridStyle}
        className={
          "ag-theme-quartz"
        }
      >
        <AgGridReact
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          autoGroupColumnDef={autoGroupColumnDef}
          rowModelType={'serverSide'} // uncomment this for ssrm
          //cacheBlockSize={5}
          onGridReady={onGridReady}
          getRowId={getRowId}
          //rowData={da} // uncomment this for client side render
        />
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>
);

if (typeof window !== 'undefined') {
    var waitSeconds = 100;

    var head = document.getElementsByTagName('head')[0];

    var isWebkit = !!window.navigator.userAgent.match(/AppleWebKit\/([^ ;]*)/);
    var webkitLoadCheck = function(link, callback) {
        setTimeout(function() {
            for (var i = 0; i < document.styleSheets.length; i++) {
                var sheet = document.styleSheets[i];
                if (sheet.href == link.href)
                    return callback();
            }
            webkitLoadCheck(link, callback);
        }, 10);
    };

    var cssIsReloadable = function cssIsReloadable(links) {
        // Css loaded on the page initially should be skipped by the first
        // systemjs load, and marked for reload
        var reloadable = true;
        forEach(links, function(link) {
            if (!link.hasAttribute('data-systemjs-css')) {
                reloadable = false;
                link.setAttribute('data-systemjs-css', '');
            }
        });
        return reloadable;
    }

    var findExistingCSS = function findExistingCSS(url) {
        // Search for existing link to reload
        var links = head.getElementsByTagName('link')
        return filter(links, function(link) { return link.href === url; });
    }

    var noop = function() {};

    var loadCSS = function(url, existingLinks) {
        const stylesUrl = url.includes("styles.css") || url.includes("style.css");
        return new Promise((outerResolve, outerReject) => {
            setTimeout(() => {
                new Promise(function(resolve, reject) {
                    var timeout = setTimeout(function() {
                        reject('Unable to load CSS');
                    }, waitSeconds * 1000);
                    var _callback = function(error) {
                        clearTimeout(timeout);
                        link.onload = link.onerror = noop;
                        setTimeout(function() {
                            if (error) {
                                reject(error);
                                outerReject(error)
                            } else {
                                resolve('');
                                outerResolve('');
                            }
                        }, 7);
                    };
                    var link = document.createElement('link');
                    link.type = 'text/css';
                    link.rel = 'stylesheet';
                    link.href = url;
                    link.setAttribute('data-systemjs-css', '');
                    if (!isWebkit) {
                        link.onload = function() {
                            _callback();
                        }
                    } else {
                        webkitLoadCheck(link, _callback);
                    }
                    link.onerror = function(event) {
                        _callback(event.error || new Error('Error loading CSS file.'));
                    };
                    if (existingLinks.length)
                        head.insertBefore(link, existingLinks[0]);
                    else
                        head.appendChild(link);
                })
                    // Remove the old link regardless of loading outcome
                    .then(function(result) {
                        forEach(existingLinks, function(link) {link.parentElement.removeChild(link);})
                        return result;
                    }, function(err) {
                        forEach(existingLinks, function(link) {link.parentElement.removeChild(link);})
                        throw err;
                    })
            }, stylesUrl ? 5 : 0)
        })
    };

    exports.fetch = function(load) {
        // dont reload styles loaded in the head
        var links = findExistingCSS(load.address);
        if (!cssIsReloadable(links))
            return '';
        return loadCSS(load.address, links);
    };
}
else {
    var builderPromise;
    function getBuilder(loader) {
        if (builderPromise)
            return builderPromise;

        return builderPromise = System['import']('./css-plugin-base.js', module.id)
            .then(function(CSSPluginBase) {
                return new CSSPluginBase(function compile(source, address) {
                    return {
                        css: source,
                        map: null,
                        moduleSource: null,
                        moduleFormat: null
                    };
                });
            });
    }

    exports.cssPlugin = true;
    exports.fetch = function(load, fetch) {
        if (!this.builder)
            return '';
        return fetch(load);
    };
    exports.translate = function(load, opts) {
        if (!this.builder)
            return '';
        var loader = this;
        return getBuilder(loader).then(function(builder) {
            return builder.translate.call(loader, load, opts);
        });
    };
    exports.instantiate = function(load, opts) {
        if (!this.builder)
            return;
        var loader = this;
        return getBuilder(loader).then(function(builder) {
            return builder.instantiate.call(loader, load, opts);
        });
    };
    exports.bundle = function(loads, compileOpts, outputOpts) {
        var loader = this;
        return getBuilder(loader).then(function(builder) {
            return builder.bundle.call(loader, loads, compileOpts, outputOpts);
        });
    };
    exports.listAssets = function(loads, opts) {
        var loader = this;
        return getBuilder(loader).then(function(builder) {
            return builder.listAssets.call(loader, loads, opts);
        });
    };
}

// Because IE8?
function filter(arrayLike, func) {
    var arr = []
    forEach(arrayLike, function(item) {
        if (func(item))
            arr.push(item);
    });
    return arr;
}

// Because IE8?
function forEach(arrayLike, func) {
    for (var i = 0; i < arrayLike.length; i++) {
        func(arrayLike[i])
    }
}

(function (global) {
    System.config({
        transpiler: 'plugin-babel',
        defaultExtension: 'js',
        paths:
                {
                    // paths serve as alias
                    "npm:": "https://cdn.jsdelivr.net/npm/",
            ...systemJsPaths
        },
        map: {
            css: boilerplatePath + "css.js",

            // babel transpiler
            'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
            'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',

            // react
            react: 'npm:react@18.2.0',
            'react-dom': 'npm:react-dom@18.2.0',
            'react-dom/client': 'npm:react-dom@18.2.0',
            redux: 'npm:redux@4.2.1',
            'react-redux': 'npm:react-redux@8.0.5',
            'prop-types': 'npm:prop-types@15.8.1',

            app: appLocation + 'app',
            // systemJsMap comes from index.html
            ...systemJsMap
        },
        packages: {
            react: {
                main: './umd/react.production.min.js'
            },
            'react-dom': {
                main: './umd/react-dom.production.min.js'
            },
            'react-dom/server': {
                main: '../umd/react-dom-server.browser.production.min.js'
            },
            redux: {
                main: './dist/redux.min.js',
                defaultExtension: 'js'
            },
            'react-redux': {
                main: './dist/react-redux.min.js',
                defaultExtension: 'js'
            },
            'prop-types': {
                main: './prop-types.min.js',
                defaultExtension: 'js',
            },

            app: {
                defaultExtension: 'jsx'
            },
            'ag-charts-community': {
                main: './dist/package/main.cjs.js',
                defaultExtension: 'js'
            },
            // 'ag-charts-enterprise': {
            //     main: './dist/package/main.cjs.js',
            //     defaultExtension: 'js'
            // },
            'ag-grid-react': {
                main: './lib/main.js',
                defaultExtension: 'js'
            },
            'ag-grid-community': {
                main: './dist/ag-grid-community.cjs.min.js',
                defaultExtension: 'js'
            },
            'ag-grid-enterprise': {
                main: './dist/ag-grid-enterprise.cjs.min.js',
                defaultExtension: 'js'
            },
            '@ag-grid-community/react': {
                main: './lib/main.mjs',
                defaultExtension: 'mjs'
            }
        },
        meta: {
            '*.jsx': {
                babelOptions: {
                    react: true
                }
            },
            '*.css': { loader: 'css' }
        }
    });
})(this);

window.addEventListener('error', e => {
    console.error('ERROR', e.message, e.filename)
});

<!DOCTYPE html><html lang="en">
	<head>
		<title>React example</title>
		<meta charSet="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
		<style media="only screen">  
            html, body, #root {
                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: 16px;
                overflow: auto;
                background-color: transparent
            }
            </style>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js">
		</script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.5.5/alasql.min.js">
		</script>
	</head>
	<body>
		<div id="root">
		</div>
		<object id="loading-spinner" style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(2)" type="image/svg+xml" data="https://ag-grid.com/images/ag-grid-loading-spinner.svg" aria-label="loading">
		</object>
		<script id="loading-script">(function() {
    const cleanupLoading = () => {
        if (document.querySelector('.ag-root-wrapper, .ag-chart-wrapper')) {
            document.querySelector('#loading-spinner').remove();
            document.querySelector('#loading-script').remove();
        } else {
            requestAnimationFrame(() => cleanupLoading());
        }
    };

    cleanupLoading();
})()</script>
		<script src="fakeServer.js">
		</script>
		<script>
            var appLocation = './';
            var boilerplatePath = '';
            var systemJsMap = {
                "@ag-grid-community/react": "https://cdn.jsdelivr.net/npm/@ag-grid-community/react@31.0.3/",
                "@ag-grid-community/styles": "https://cdn.jsdelivr.net/npm/@ag-grid-community/styles@31.0.3",
                "ag-grid-community": "https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.3",
                "ag-grid-enterprise": "https://cdn.jsdelivr.net/npm/ag-grid-enterprise@31.0.3/",
                "ag-grid-react": "https://cdn.jsdelivr.net/npm/ag-grid-react@31.0.3/"
            };
            var systemJsPaths = {
                "@ag-grid-community/client-side-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-community/client-side-row-model@31.0.3/dist/client-side-row-model.cjs.min.js",
                "@ag-grid-community/core": "https://cdn.jsdelivr.net/npm/@ag-grid-community/core@31.0.3/dist/core.cjs.min.js",
                "@ag-grid-community/csv-export": "https://cdn.jsdelivr.net/npm/@ag-grid-community/csv-export@31.0.3/dist/csv-export.cjs.min.js",
                "@ag-grid-community/infinite-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-community/infinite-row-model@31.0.3/dist/infinite-row-model.cjs.min.js",
                "@ag-grid-enterprise/advanced-filter": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/advanced-filter@31.0.3/dist/advanced-filter.cjs.min.js",
                "@ag-grid-enterprise/charts": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/charts@31.0.3/dist/charts.cjs.min.js",
                "@ag-grid-enterprise/clipboard": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/clipboard@31.0.3/dist/clipboard.cjs.min.js",
                "@ag-grid-enterprise/column-tool-panel": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/column-tool-panel@31.0.3/dist/column-tool-panel.cjs.min.js",
                "@ag-grid-enterprise/core": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/core@31.0.3/dist/core.cjs.min.js",
                "@ag-grid-enterprise/excel-export": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/excel-export@31.0.3/dist/excel-export.cjs.min.js",
                "@ag-grid-enterprise/filter-tool-panel": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/filter-tool-panel@31.0.3/dist/filter-tool-panel.cjs.min.js",
                "@ag-grid-enterprise/master-detail": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/master-detail@31.0.3/dist/master-detail.cjs.min.js",
                "@ag-grid-enterprise/menu": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/menu@31.0.3/dist/menu.cjs.min.js",
                "@ag-grid-enterprise/multi-filter": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/multi-filter@31.0.3/dist/multi-filter.cjs.min.js",
                "@ag-grid-enterprise/range-selection": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/range-selection@31.0.3/dist/range-selection.cjs.min.js",
                "@ag-grid-enterprise/rich-select": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/rich-select@31.0.3/dist/rich-select.cjs.min.js",
                "@ag-grid-enterprise/row-grouping": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/row-grouping@31.0.3/dist/row-grouping.cjs.min.js",
                "@ag-grid-enterprise/server-side-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/server-side-row-model@31.0.3/dist/server-side-row-model.cjs.min.js",
                "@ag-grid-enterprise/set-filter": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/set-filter@31.0.3/dist/set-filter.cjs.min.js",
                "@ag-grid-enterprise/side-bar": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/side-bar@31.0.3/dist/side-bar.cjs.min.js",
                "@ag-grid-enterprise/sparklines": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/sparklines@31.0.3/dist/sparklines.cjs.min.js",
                "@ag-grid-enterprise/status-bar": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/status-bar@31.0.3/dist/status-bar.cjs.min.js",
                "@ag-grid-enterprise/viewport-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/viewport-row-model@31.0.3/dist/viewport-row-model.cjs.min.js",
                "ag-charts-community": "https://cdn.jsdelivr.net/npm/ag-charts-community/"
            };
        </script>
		<script src="https://cdn.jsdelivr.net/npm/systemjs@0.19.47/dist/system.js">
		</script>
		<script src="systemjs.config.js">
		</script>
		<script>System.import('./index.jsx').catch(function(err) { console.error(err); });</script>
	</body>
</html>