.test-container {
height: 100%;
display: flex;
flex-direction: column;
}
/*
Ag-grid's default row hover and row selected colour have some transparency. But, since our action buttons column is placed absolutely over other columns, its background looks darker because of the way those transparent colours blend. So, it is better to use background colours with no transparency in this method.
*/
.ag-theme-alpine {
--ag-row-hover-color: hsl(207, 90%, 94%);
--ag-selected-row-background-color: hsl(207, 87%, 86%);
}
/* Hide right header and spacer */
.ag-pinned-right-header,
.ag-horizontal-right-spacer {
width: 0 !important;
min-width: 0 !important;
}
/* Add absolute position so that action buttons column will appear on top of other columns. pointer-events: none to pass on mousemove event to behind columns */
.ag-pinned-right-cols-container {
position: absolute !important;
right: 0;
pointer-events: none;
}
/* Reset pointer-events so that click can happen on action buttons */
.ag-pinned-right-cols-container * {
pointer-events: initial;
}
/* Hide border of right-cols-container */
.ag-pinned-right-cols-container .ag-cell {
border: none !important;
}
/* Show action buttons only for row that is being hovered. For rows which are not being hovered, hide them by setting their width and padding to 0.*/
.ag-pinned-right-cols-container .ag-row:not(.ag-row-hover),
.ag-pinned-right-cols-container .ag-row:not(.ag-row-hover) .ag-cell {
width: 0 !important;
padding: 0 !important;
}
<!--
Plunk created for answer
https://stackoverflow.com/a/62364900/11167389
-->
<!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/all-modules/dist/styles/ag-grid.css':
'https://unpkg.com/@ag-grid-community/all-modules@23.1.1/dist/styles/ag-grid.css',
'@ag-grid-community/core/dist/styles/ag-grid.css':
'https://unpkg.com/@ag-grid-community/core@23.1.1/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@23.1.1/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@23.1.1/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@23.1.1/dist/styles/ag-theme-alpine.css',
'@ag-grid-community/core/dist/styles/ag-theme-alpine.css':
'https://unpkg.com/@ag-grid-community/core@23.1.1/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@23.1.1/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@23.1.1/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@23.1.1/dist/styles/ag-theme-balham.css',
'@ag-grid-community/core/dist/styles/ag-theme-balham.css':
'https://unpkg.com/@ag-grid-community/core@23.1.1/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@23.1.1/dist/styles/ag-theme-blue.css',
'@ag-grid-community/core/dist/styles/ag-theme-blue.css':
'https://unpkg.com/@ag-grid-community/core@23.1.1/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@23.1.1/dist/styles/ag-theme-bootstrap.css',
'@ag-grid-community/core/dist/styles/ag-theme-bootstrap.css':
'https://unpkg.com/@ag-grid-community/core@23.1.1/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@23.1.1/dist/styles/ag-theme-dark.css',
'@ag-grid-community/core/dist/styles/ag-theme-dark.css':
'https://unpkg.com/@ag-grid-community/core@23.1.1/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@23.1.1/dist/styles/ag-theme-fresh.css',
'@ag-grid-community/core/dist/styles/ag-theme-fresh.css':
'https://unpkg.com/@ag-grid-community/core@23.1.1/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@23.1.1/dist/styles/ag-theme-material.css',
'@ag-grid-community/core/dist/styles/ag-theme-material.css':
'https://unpkg.com/@ag-grid-community/core@23.1.1/dist/styles/ag-theme-material.css',
'@ag-grid-community/react':
'https://unpkg.com/@ag-grid-community/react@23.1.1/',
'@ag-grid-community/angular':
'https://unpkg.com/@ag-grid-community/angular@23.1.1/',
'@ag-grid-community/vue':
'https://unpkg.com/@ag-grid-community/vue@23.1.1/',
'ag-charts-community':
'https://unpkg.com/ag-charts-community@1.1.0/dist/ag-charts-community.cjs.js',
'ag-grid-community': 'https://unpkg.com/ag-grid-community@23.1.1/',
'ag-grid-enterprise': 'https://unpkg.com/ag-grid-enterprise@23.1.1/',
'ag-grid-angular': 'https://unpkg.com/ag-grid-angular@23.1.1/',
'ag-grid-react': 'https://unpkg.com/ag-grid-react@23.1.1/',
'ag-grid-vue': 'https://unpkg.com/ag-grid-vue@23.1.1/',
};
var systemJsPaths = {
'@ag-grid-community/all-modules':
'https://unpkg.com/@ag-grid-community/all-modules@23.1.1/dist/ag-grid-community.cjs.js',
'@ag-grid-community/client-side-row-model':
'https://unpkg.com/@ag-grid-community/all-modules@23.1.1/dist/ag-grid-community.cjs.js',
'@ag-grid-community/core':
'https://unpkg.com/@ag-grid-community/all-modules@23.1.1/dist/ag-grid-community.cjs.js',
'@ag-grid-community/csv-export':
'https://unpkg.com/@ag-grid-community/all-modules@23.1.1/dist/ag-grid-community.cjs.js',
'@ag-grid-community/infinite-row-model':
'https://unpkg.com/@ag-grid-community/all-modules@23.1.1/dist/ag-grid-community.cjs.js',
};
</script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('index.jsx').catch(function(err) {
console.error(err);
});
</script>
</body>
</html>
'use strict';
import React, { Component } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from '@ag-grid-community/react';
import { AllCommunityModules } from '@ag-grid-community/all-modules';
import '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
import '@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css';
import ActionBtnRenderer from './ActionBtnRenderer.jsx';
class GridExample extends Component {
constructor(props) {
super(props);
this.state = {
modules: AllCommunityModules,
columnDefs: [
{
headerName: '#',
colId: 'rowNum',
valueGetter: 'node.id',
width: 80,
pinned: 'left',
},
{
headerName: 'Athlete',
field: 'athlete',
width: 150,
},
{
headerName: 'Age',
field: 'age',
width: 90,
},
{
headerName: 'Country',
field: 'country',
width: 150,
},
{
headerName: 'Year',
field: 'year',
width: 90,
},
{
headerName: 'Date',
field: 'date',
width: 110,
},
{
headerName: 'Sport',
field: 'sport',
width: 150,
},
{
headerName: 'Gold',
field: 'gold',
width: 100,
},
{
headerName: 'Silver',
field: 'silver',
width: 100,
},
{
headerName: 'Bronze',
field: 'bronze',
width: 100,
},
{
headerName: 'Action Buttons',
width: 220,
pinned: 'right',
cellRenderer: 'ActionBtnRenderer',
},
],
frameworkComponents: {
ActionBtnRenderer: ActionBtnRenderer,
},
defaultColDef: { resizable: true },
rowData: null,
};
}
onGridReady = params => {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
const httpRequest = new XMLHttpRequest();
const updateData = data => {
this.setState({ rowData: data });
};
httpRequest.open(
'GET',
'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json'
);
httpRequest.send();
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
updateData(JSON.parse(httpRequest.responseText));
}
};
};
render() {
return (
<div style={{ width: '100%', height: '100%' }}>
<div className="test-container">
<div
id="myGrid"
style={{
height: '100%',
width: '100%',
}}
className="ag-theme-alpine"
>
<AgGridReact
modules={this.state.modules}
columnDefs={this.state.columnDefs}
defaultColDef={this.state.defaultColDef}
debug={true}
rowData={this.state.rowData}
onGridReady={this.onGridReady}
frameworkComponents={this.state.frameworkComponents}
/>
</div>
</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:
Object.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.0.0',
'react-dom': 'npm:react-dom@16.0.0',
'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.production.min.js'
},
'react-dom': {
main: './umd/react-dom.production.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);
import React, { Component } from 'react';
export default () => {
return (
<div>
<button>Mark read</button>
<button>Delete</button>
<button>Archive</button>
</div>
);
};