import React, { useEffect } from 'react';
const DetailCellRenderer = ({ data }) => {
useEffect(() => {
console.log(data.name)
}, [])
return <h1 style={{ padding: '20px' }}>My Custom Detail</h1>
}
export default DetailCellRenderer;
'use strict';
import React, { useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact, AgGridColumn } 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 DetailCellRenderer from './detailCellRenderer.jsx';
const GridExample = () => {
const [gridApi, setGridApi] = useState(null);
const [gridColumnApi, setGridColumnApi] = useState(null);
const [rowData, setRowData] = useState(null);
const onGridReady = (params) => {
setGridApi(params.api);
setGridColumnApi(params.columnApi);
const updateData = (data) => {
setRowData(data);
};
fetch('https://www.ag-grid.com/example-assets/master-detail-data.json')
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return (
<div style={{ width: '100%', height: '100%' }}>
<div
id="myGrid"
style={{
height: '100%',
width: '100%',
}}
className="ag-theme-alpine"
>
<AgGridReact
reactUi
masterDetail={true}
detailCellRenderer={'myDetailCellRenderer'}
frameworkComponents={{ myDetailCellRenderer: DetailCellRenderer }}
defaultColDef={{ flex: 1 }}
onGridReady={onGridReady}
rowData={rowData}
embedFullWidthRows
>
<AgGridColumn field="name" cellRenderer="agGroupCellRenderer" />
<AgGridColumn field="account" />
<AgGridColumn field="calls" />
<AgGridColumn
field="minutes"
valueFormatter="x.toLocaleString() + 'm'"
/>
</AgGridReact>
</div>
</div>
);
};
render(<GridExample></GridExample>, document.querySelector('#root'));
(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: 'plugin-babel',
defaultExtension: 'js',
paths:
assign(
{
// paths serve as alias
"npm:": "https://unpkg.com/",
}, systemJsPaths),
map: assign(
{
// css plugin
'css': 'npm:systemjs-plugin-css/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',
'react-dom-factories': 'npm:react-dom-factories',
redux: 'npm:redux@3.6.0',
'react-redux': 'npm:react-redux@5.0.6',
'prop-types': 'npm:prop-types',
app: appLocation + 'app'
},
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: {
defaultExtension: 'jsx'
},
'ag-grid-react': {
main: './main.js',
defaultExtension: 'js'
},
'ag-grid-community': {
main: './dist/ag-grid-community.cjs.js',
defaultExtension: 'js'
},
'ag-grid-enterprise': {
main: './dist/ag-grid-enterprise.cjs.js',
defaultExtension: 'js'
},
'@ag-grid-community/react': {
main: './main.js',
defaultExtension: 'js'
}
},
meta: {
'*.jsx': {
babelOptions: {
react: true
}
},
'*.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>
</head>
<body>
<div id="root">Loading React example…</div>
<script>
var appLocation = './';
var boilerplatePath = '';
var systemJsMap = {
"@ag-grid-community/all-modules/dist/styles/ag-grid.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-grid.css",
"@ag-grid-community/core/dist/styles/ag-grid.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-grid.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-alpine-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-alpine-dark.css",
"@ag-grid-community/core/dist/styles/ag-theme-alpine-dark.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-alpine-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-alpine.css",
"@ag-grid-community/core/dist/styles/ag-theme-alpine.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-alpine.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-balham-dark.css",
"@ag-grid-community/core/dist/styles/ag-theme-balham-dark.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-balham-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-balham.css",
"@ag-grid-community/core/dist/styles/ag-theme-balham.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-balham.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-blue.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-blue.css",
"@ag-grid-community/core/dist/styles/ag-theme-blue.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-blue.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-bootstrap.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-bootstrap.css",
"@ag-grid-community/core/dist/styles/ag-theme-bootstrap.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-bootstrap.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-dark.css",
"@ag-grid-community/core/dist/styles/ag-theme-dark.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-fresh.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-fresh.css",
"@ag-grid-community/core/dist/styles/ag-theme-fresh.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-fresh.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-material.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-material.css",
"@ag-grid-community/core/dist/styles/ag-theme-material.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-material.css",
"@ag-grid-community/react": "https://unpkg.com/@ag-grid-community/react@26.2.0/",
"@ag-grid-community/angular": "https://unpkg.com/@ag-grid-community/angular@26.2.0/",
"@ag-grid-community/vue": "https://unpkg.com/@ag-grid-community/vue@26.2.0/",
"@ag-grid-community/vue3": "https://unpkg.com/@ag-grid-community/vue3@26.2.0/",
"ag-grid-community": "https://unpkg.com/ag-grid-community@26.2.0/",
"ag-grid-enterprise": "https://unpkg.com/ag-grid-enterprise@26.2.0/",
"ag-grid-angular": "https://unpkg.com/ag-grid-angular@26.2.0/",
"ag-grid-react": "https://unpkg.com/ag-grid-react@26.2.0/",
"ag-grid-vue": "https://unpkg.com/ag-grid-vue@26.2.0/",
"ag-grid-vue3": "https://unpkg.com/ag-grid-vue3@26.2.0/"
};
var systemJsPaths = {
"@ag-grid-community/all-modules": "https://unpkg.com/@ag-grid-community/all-modules/dist/ag-grid-community.cjs.js",
"@ag-grid-community/client-side-row-model": "https://unpkg.com/@ag-grid-community/client-side-row-model/dist/client-side-row-model.cjs.js",
"@ag-grid-community/core": "https://unpkg.com/@ag-grid-community/core/dist/core.cjs.js",
"@ag-grid-community/csv-export": "https://unpkg.com/@ag-grid-community/csv-export/dist/csv-export.cjs.js",
"@ag-grid-community/infinite-row-model": "https://unpkg.com/@ag-grid-community/infinite-row-model/dist/infinite-row-model.cjs.js",
"@ag-grid-enterprise/all-modules": "https://unpkg.com/@ag-grid-enterprise/all-modules/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/charts": "https://unpkg.com/@ag-grid-enterprise/charts/dist/charts.cjs.js",
"@ag-grid-enterprise/clipboard": "https://unpkg.com/@ag-grid-enterprise/clipboard/dist/clipboard.cjs.js",
"@ag-grid-enterprise/column-tool-panel": "https://unpkg.com/@ag-grid-enterprise/column-tool-panel/dist/column-tool-panel.cjs.js",
"@ag-grid-enterprise/core": "https://unpkg.com/@ag-grid-enterprise/core/dist/core.cjs.js",
"@ag-grid-enterprise/excel-export": "https://unpkg.com/@ag-grid-enterprise/excel-export/dist/excel-export.cjs.js",
"@ag-grid-enterprise/filter-tool-panel": "https://unpkg.com/@ag-grid-enterprise/filter-tool-panel/dist/filter-tool-panel.cjs.js",
"@ag-grid-enterprise/master-detail": "https://unpkg.com/@ag-grid-enterprise/master-detail/dist/master-detail.cjs.js",
"@ag-grid-enterprise/menu": "https://unpkg.com/@ag-grid-enterprise/menu/dist/menu.cjs.js",
"@ag-grid-enterprise/multi-filter": "https://unpkg.com/@ag-grid-enterprise/multi-filter/dist/multi-filter.cjs.js",
"@ag-grid-enterprise/range-selection": "https://unpkg.com/@ag-grid-enterprise/range-selection/dist/range-selection.cjs.js",
"@ag-grid-enterprise/rich-select": "https://unpkg.com/@ag-grid-enterprise/rich-select/dist/rich-select.cjs.js",
"@ag-grid-enterprise/row-grouping": "https://unpkg.com/@ag-grid-enterprise/row-grouping/dist/row-grouping.cjs.js",
"@ag-grid-enterprise/server-side-row-model": "https://unpkg.com/@ag-grid-enterprise/server-side-row-model/dist/server-side-row-model.cjs.js",
"@ag-grid-enterprise/set-filter": "https://unpkg.com/@ag-grid-enterprise/set-filter/dist/set-filter.cjs.js",
"@ag-grid-enterprise/side-bar": "https://unpkg.com/@ag-grid-enterprise/side-bar/dist/side-bar.cjs.js",
"@ag-grid-enterprise/sparklines": "https://unpkg.com/@ag-grid-enterprise/sparklines/dist/sparklines.cjs.js",
"@ag-grid-enterprise/status-bar": "https://unpkg.com/@ag-grid-enterprise/status-bar/dist/status-bar.cjs.js",
"@ag-grid-enterprise/viewport-row-model": "https://unpkg.com/@ag-grid-enterprise/viewport-row-model/dist/viewport-row-model.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.jsx').catch(function(err) { console.error(err); });</script>
</body>
</html>