'use strict';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import {
ColDef,
ColGroupDef,
Grid,
GridOptions,
GridReadyEvent,
} from 'ag-grid-community';
import PersonFilter from './personFilter';
import YearFilter from './yearFilter';
import CountryFilter from './countryFilter';
import { IOlympicData } from './interfaces';
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
const [rowData, setRowData] = useState<IOlympicData[]>();
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: 'athlete', minWidth: 150, filter: PersonFilter },
{ field: 'age', filter: 'agNumberColumnFilter' },
{ field: 'country', minWidth: 150,
filter: CountryFilter,
filterParams: {
values: ['Russia', 'Australia', 'United States', 'China']
}
},
{ field: 'year', filter: YearFilter },
{
field: 'date',
minWidth: 130,
filter: 'agDateColumnFilter',
filterParams: {
comparator: function (
filterLocalDateAtMidnight: Date,
cellValue: string
) {
const dateAsString = cellValue;
const dateParts = dateAsString.split('/');
const cellDate = new Date(
Number(dateParts[2]),
Number(dateParts[1]) - 1,
Number(dateParts[0])
);
if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
return 0;
}
if (cellDate < filterLocalDateAtMidnight) {
return -1;
}
if (cellDate > filterLocalDateAtMidnight) {
return 1;
}
},
},
},
{ field: 'sport' },
{ field: 'gold', filter: 'agNumberColumnFilter' },
{ field: 'silver', filter: 'agNumberColumnFilter' },
{ field: 'bronze', filter: 'agNumberColumnFilter' },
{ field: 'total', filter: 'agNumberColumnFilter' },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
editable: true,
sortable: true,
flex: 1,
minWidth: 100,
filter: true,
resizable: true,
};
}, []);
const onGridReady = useCallback((params: GridReadyEvent) => {
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((resp) => resp.json())
.then((data: IOlympicData[]) => {
setRowData(data);
});
}, []);
return (
<div style={containerStyle}>
<div style={gridStyle} className="ag-theme-alpine">
<AgGridReact<IOlympicData>
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
onGridReady={onGridReady}
></AgGridReact>
</div>
</div>
);
};
render(<GridExample></GridExample>, document.querySelector('#root'));
export interface IOlympicData {
athlete: string;
age: number;
country: string;
year: number;
date: string;
sport: string;
gold: number;
silver: number;
bronze: number;
total: number;
}
{
"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": "^28.1.1",
"ag-grid-community": "^28.1.1",
"ag-grid-enterprise": "^28.1.1"
}
}
import React, {
forwardRef,
useEffect,
useImperativeHandle,
useRef,
useState,
} from 'react';
import { IDoesFilterPassParams, IFilterParams } from 'ag-grid-community';
export default forwardRef((props: IFilterParams, ref) => {
const [filterText, setFilterText] = useState<string | undefined>(undefined);
// expose AG Grid Filter Lifecycle callbacks
useImperativeHandle(ref, () => {
return {
doesFilterPass(params: IDoesFilterPassParams) {
const { api, colDef, column, columnApi, context } = props;
const { node } = params;
// make sure each word passes separately, ie search for firstname, lastname
let passed = true;
if (filterText) {
filterText
.toLowerCase()
.split(' ')
.forEach((filterWord) => {
const value = props.valueGetter({
api,
colDef,
column,
columnApi,
context,
data: node.data,
getValue: (field) => node.data[field],
node,
});
if (value.toString().toLowerCase().indexOf(filterWord) < 0) {
passed = false;
}
});
}
return passed;
},
isFilterActive() {
return filterText != null && filterText !== '';
},
getModel() {
if (!this.isFilterActive()) {
return null;
}
return { value: filterText };
},
setModel(model: any) {
setFilterText(model == null ? null : model.value);
},
};
});
const onChange = (event: any) => {
setFilterText(event.target.value);
};
useEffect(() => {
props.filterChangedCallback();
}, [filterText]);
return (
<div style={{ padding: 4, width: 200 }}>
<div style={{ fontWeight: 'bold' }}>Custom Athlete Filter</div>
<div>
<input
style={{ margin: '4 0 4 0' }}
type="text"
value={filterText}
onChange={onChange}
placeholder="Full name search..."
/>
</div>
<div style={{ marginTop: 20 }}>
This filter does partial word search on multiple words, eg "mich phel"
still brings back Michael Phelps.
</div>
<div style={{ marginTop: 20 }}>
Just to emphasise that anything can go in here, here is an image!!
</div>
<div>
<img
src="https://www.ag-grid.com/images/ag-Grid2-200.png"
style={{
width: 150,
textAlign: 'center',
padding: 10,
margin: 10,
border: '1px solid lightgrey',
}}
/>
</div>
</div>
);
});
import React, {
forwardRef,
useEffect,
useImperativeHandle,
useState,
} from 'react';
import { IDoesFilterPassParams, IFilterParams } from 'ag-grid-community';
export default forwardRef((props: IFilterParams, ref) => {
const [year, setYear] = useState('All');
// expose AG Grid Filter Lifecycle callbacks
useImperativeHandle(ref, () => {
return {
doesFilterPass(params: IDoesFilterPassParams) {
return params.data.year >= 2010;
},
isFilterActive() {
return year === '2010';
},
// this example isn't using getModel() and setModel(),
// so safe to just leave these empty. don't do this in your code!!!
getModel() {},
setModel() {},
};
});
const onYearChange = (event: any) => {
setYear(event.target.value);
};
useEffect(() => {
props.filterChangedCallback();
}, [year]);
return (
<div
style={{ display: 'inline-block', width: '400px' }}
onChange={onYearChange}
>
<div
style={{
padding: '10px',
backgroundColor: '#d3d3d3',
textAlign: 'center',
}}
>
This is a very wide filter
</div>
<label
style={{
margin: '10px',
padding: '50px',
display: 'inline-block',
backgroundColor: '#999999',
}}
>
<input type="radio" name="year" value="All" checked={year === 'All'} />{' '}
All
</label>
<label
style={{
margin: '10px',
padding: '50px',
display: 'inline-block',
backgroundColor: '#999999',
}}
>
<input type="radio" name="year" value="2010" /> Since 2010
</label>
</div>
);
});
(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: boilerplatePath + "css.js",
// 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: {
css: {
},
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);
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])
}
}
<!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/react": "https://unpkg.com/@ag-grid-community/react@28.1.1/",
"@ag-grid-community/styles": "https://unpkg.com/@ag-grid-community/styles@28.1.1/",
"ag-grid-community": "https://unpkg.com/ag-grid-community@28.1.1/",
"ag-grid-enterprise": "https://unpkg.com/ag-grid-enterprise@28.1.3/",
"ag-grid-react": "https://unpkg.com/ag-grid-react@28.1.1/"
};
var systemJsPaths = {
"@ag-grid-community/client-side-row-model": "https://unpkg.com/@ag-grid-community/client-side-row-model@28.1.1/dist/client-side-row-model.cjs.min.js",
"@ag-grid-community/core": "https://unpkg.com/@ag-grid-community/core@28.1.1/dist/core.cjs.min.js",
"@ag-grid-community/csv-export": "https://unpkg.com/@ag-grid-community/csv-export@28.1.1/dist/csv-export.cjs.min.js",
"@ag-grid-community/infinite-row-model": "https://unpkg.com/@ag-grid-community/infinite-row-model@28.1.1/dist/infinite-row-model.cjs.min.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>
import React, {forwardRef, useImperativeHandle, useState, useCallback, useEffect} from 'react';
export default forwardRef( (props, ref) => {
const [filterState, setFilterState] = useState('off');
useImperativeHandle(ref, () => {
return {
isFilterActive() {
return filterState !='off';
},
doesFilterPass(params) {
const field = props.colDef.field;
return params.data[field] == filterState;
},
getModel() {
return undefined;
},
setModel() {
}
};
});
useEffect( () => props.filterChangedCallback(), [filterState]);
const onListener = useCallback( () => setFilterState('on'), []);
const offListener = useCallback( () => setFilterState('off'), []);
return (
<>
<div>Country Filter</div>
<div className='filter-entry'>
<button onClick={() => setFilterState('off')}>
Off
</button>
</div>
{props.values.map(value => (
<div className='filter-entry'>
<button key={value} onClick={() => setFilterState(value)}>
{value}
</button>
</div>
))}
</>
);
});