'use strict';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import {
ColDef,
ColGroupDef,
Grid,
GridOptions,
GridReadyEvent,
ValueGetterParams,
} from 'ag-grid-community';
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
const [rowData, setRowData] = useState<any[]>();
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: 'country' },
{
headerName: 'Year',
valueGetter: 'data.year',
},
{ field: 'athlete', minWidth: 200 },
{ field: 'gold', aggFunc: 'sum' },
{ field: 'silver', aggFunc: 'sum' },
{ field: 'bronze', aggFunc: 'sum' },
{ field: 'total', aggFunc: 'sum' },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 150,
filter: true,
sortable: true,
resizable: true,
enableRowGroup: true,
};
}, []);
const autoGroupColumnDef = useMemo<ColDef>(() => {
return {
minWidth: 200,
filterValueGetter: function (params: ValueGetterParams) {
if (params.node) {
var colGettingGrouped = params.colDef.showRowGroup + '';
return params.api.getValue(colGettingGrouped, params.node);
}
},
};
}, []);
const onGridReady = useCallback((params: GridReadyEvent) => {
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((resp) => resp.json())
.then((data: any[]) => setRowData(data));
}, []);
return (
<div style={containerStyle}>
<div className="example-wrapper">
<div className="example-header">
<span className="legend-item ag-row-level-0"></span>
<span className="legend-label">Top Level Group</span>
<span className="legend-item ag-row-level-1"></span>
<span className="legend-label">Second Level Group</span>
<span className="legend-item ag-row-level-2"></span>
<span className="legend-label">Bottom Rows</span>
</div>
<div style={gridStyle} className="ag-theme-alpine">
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
autoGroupColumnDef={autoGroupColumnDef}
enableRangeSelection={true}
rowGroupPanelShow="always"
groupDisplayType="multipleColumns"
animateRows={true}
onGridReady={onGridReady}
></AgGridReact>
</div>
</div>
</div>
);
};
render(<GridExample></GridExample>, document.querySelector('#root'));
{
"name": "ag-grid-packages",
"description": "NOTE: This package.json file is solely used by Plunker to look up type definitions.",
"dependencies": {
"react": "17",
"react-dom": "17",
"ag-grid-react": "*",
"ag-grid-community": "*",
"ag-grid-enterprise": "*"
}
}
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
.example-header {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 13px;
margin-bottom: 5px;
}
.ag-row-level-0 {
background-color: #fff !important;
}
.ag-row-level-1 {
background-color: #eee !important;
}
.ag-row-level-2 {
background-color: #ddd !important;
}
.legend-item {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid darkgrey;
}
.legend-label {
position: relative;
top: -5px;
margin-right: 20px;
}
(function (global) {
// simplified version of Object.assign for es3
function assign() {
var result = {};
for (var i = 0, len = arguments.length; i < len; i++) {
var arg = arguments[i];
for (var prop in arg) {
result[prop] = arg[prop];
}
}
return result;
}
System.config({
transpiler: 'ts',
typescriptOptions: {
module: 'system',
moduleResolution: 'node',
target: 'es5',
noImplicitAny: false,
sourceMap: true,
jsx: 'react',
lib: ['es2015', 'dom'],
},
paths: assign(
{
// paths serve as alias
'npm:': 'https://unpkg.com/',
},
systemJsPaths
),
map: assign(
{
// css plugin
css: 'npm:systemjs-plugin-css@0.1.37/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@16.13.1',
'react-dom': 'npm:react-dom@16.13.1',
redux: 'npm:redux@3.6.0',
'react-redux': 'npm:react-redux@5.0.6',
'prop-types': 'npm:prop-types@15.8.1',
ts: "npm:plugin-typescript@8.0.0/lib/plugin.js",
typescript: "npm:typescript@3.7.7/lib/typescript.js",
app: appLocation,
},
systemJsMap
), // systemJsMap comes from index.html
packages: {
react: {
main: './umd/react.profiling.min.js',
},
'react-dom': {
main: './umd/react-dom.profiling.min.js',
},
'react-dom/server': {
main: '../umd/react-dom-server.browser.production.min.js',
},
'prop-types': {
main: './prop-types.min.js',
defaultExtension: 'js',
},
redux: {
main: './dist/redux.min.js',
defaultExtension: 'js',
},
'react-redux': {
main: './dist/react-redux.min.js',
defaultExtension: 'js',
},
app: {
main: './index.tsx',
defaultExtension: 'tsx',
},
'ag-grid-react': {
main: './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: './main.js',
defaultExtension: 'js',
},
},
meta: {
typescript: {
exports: 'ts',
},
'*.css': { loader: 'css' },
},
});
})(this);
<!DOCTYPE html>
<html lang="en">
<head>
<title>React example</title>
<meta charSet="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<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: 1rem;
overflow: auto;
}
</style>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="root">Loading React example…</div>
<script>
var appLocation = './';
var boilerplatePath = '';
var systemJsMap = {
"@ag-grid-community/core/dist/styles": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-community/core/dist/styles",
"@ag-grid-community/react": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-community/react",
"ag-grid-community": "//www.ag-grid.com/archive/27.2.0/dev/ag-grid-community",
"ag-grid-enterprise": "//www.ag-grid.com/archive/27.2.0/dev/ag-grid-enterprise",
"ag-grid-react": "//www.ag-grid.com/archive/27.2.0/dev/ag-grid-react"
};
var systemJsPaths = {
"@ag-grid-community/client-side-row-model": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-community/client-side-row-model/dist/client-side-row-model.cjs.js",
"@ag-grid-community/core": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-community/core/dist/core.cjs.js",
"@ag-grid-community/csv-export": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-community/csv-export/dist/csv-export.cjs.js",
"@ag-grid-community/infinite-row-model": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-community/infinite-row-model/dist/infinite-row-model.cjs.js",
"@ag-grid-enterprise/charts": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/charts/dist/charts.cjs.js",
"@ag-grid-enterprise/clipboard": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/clipboard/dist/clipboard.cjs.js",
"@ag-grid-enterprise/column-tool-panel": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/column-tool-panel/dist/column-tool-panel.cjs.js",
"@ag-grid-enterprise/core": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/core/dist/core.cjs.js",
"@ag-grid-enterprise/excel-export": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/excel-export/dist/excel-export.cjs.js",
"@ag-grid-enterprise/filter-tool-panel": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/filter-tool-panel/dist/filter-tool-panel.cjs.js",
"@ag-grid-enterprise/master-detail": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/master-detail/dist/master-detail.cjs.js",
"@ag-grid-enterprise/menu": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/menu/dist/menu.cjs.js",
"@ag-grid-enterprise/multi-filter": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/multi-filter/dist/multi-filter.cjs.js",
"@ag-grid-enterprise/range-selection": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/range-selection/dist/range-selection.cjs.js",
"@ag-grid-enterprise/rich-select": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/rich-select/dist/rich-select.cjs.js",
"@ag-grid-enterprise/row-grouping": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/row-grouping/dist/row-grouping.cjs.js",
"@ag-grid-enterprise/server-side-row-model": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/server-side-row-model/dist/server-side-row-model.cjs.js",
"@ag-grid-enterprise/set-filter": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/set-filter/dist/set-filter.cjs.js",
"@ag-grid-enterprise/side-bar": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/side-bar/dist/side-bar.cjs.js",
"@ag-grid-enterprise/sparklines": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/sparklines/dist/sparklines.cjs.js",
"@ag-grid-enterprise/status-bar": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/status-bar/dist/status-bar.cjs.js",
"@ag-grid-enterprise/viewport-row-model": "//www.ag-grid.com/archive/27.2.0/dev/@ag-grid-enterprise/viewport-row-model/dist/viewport-row-model.cjs.js",
"ag-charts-community": "//www.ag-grid.com/archive/27.2.0/dev/ag-charts-community/dist/ag-charts-community.cjs.js"
};
</script>
<script src="https://unpkg.com/systemjs@0.19.47/dist/system.js">
</script>
<script src="systemjs.config.js">
</script>
<script>System.import('./index.tsx').catch(function(err) { console.error(err); });</script>
</body>
</html>