"use client";
import React, { useCallback, useMemo, useState, StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact } from "ag-grid-react";
import {
ClientSideRowModelModule,
ModuleRegistry,
TextFilterModule,
ValidationModule,
} from "ag-grid-community";
import {
AdvancedFilterModule,
ColumnMenuModule,
ContextMenuModule,
NumberFilterModule,
ClientSideRowModelModule,
ColumnsToolPanelModule,
FiltersToolPanelModule,
SetFilterModule,
PivotModule,
TextFilterModule,
} from "ag-grid-enterprise";
ModuleRegistry.registerModules([
TextFilterModule,
AdvancedFilterModule,
ClientSideRowModelModule,
ColumnMenuModule,
ContextMenuModule,
NumberFilterModule,
ClientSideRowModelModule,
ColumnsToolPanelModule,
FiltersToolPanelModule,
SetFilterModule,
PivotModule,
TextFilterModule,
...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState();
const [columnDefs, setColumnDefs] = useState([
{ field: "athlete" },
{ field: "age", minWidth: 100 },
{ field: "hasGold", minWidth: 100, headerName: "Gold" },
{ field: "dateObject", headerName: "Date" },
{ field: "date", headerName: "Date (String)" },
{
field: "dateTime",
headerName: "DateTime",
cellDataType: "dateTime",
minWidth: 250,
},
{ field: "dateTimeString", headerName: "DateTime (String)", minWidth: 250 },
{ field: "countryObject", headerName: "Country" },
]);
const defaultColDef = useMemo(() => {
return {
flex: 1,
minWidth: 180,
filter: true,
};
}, []);
const dataTypeDefinitions = useMemo(() => {
return {
object: {
baseDataType: "object",
extendsDataType: "object",
valueParser: (params) => ({ name: params.newValue }),
valueFormatter: (params) =>
params.value == null ? "" : params.value.name,
},
};
}, []);
const onGridReady = useCallback((params) => {
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) =>
setRowData(
data.map((rowData) => {
const dateParts = rowData.date.split("/");
const [year, month, day] = dateParts
.reverse()
.map((e) => parseInt(e, 10));
const [h, m, s] = [
Math.floor(Math.random() * 24),
Math.floor(Math.random() * 60),
Math.floor(Math.random() * 60),
];
const paddedDateTimeStrings = [month, day, h, m, s].map((e) =>
e.toString().padStart(2, "0"),
);
const dateString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}`;
const dateTimeString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}T${paddedDateTimeStrings.slice(2).join(":")}`;
return {
...rowData,
date: dateString,
dateObject: new Date(year, month - 1, day),
dateTimeString,
dateTime: new Date(year, month - 1, day, h, m, s),
countryObject: {
name: rowData.country,
},
hasGold: rowData.gold > 0,
};
}),
),
);
}, []);
const [advancedFilter, setAdvancedFilter] = useState(true);
return (
<div style={containerStyle}>
<button onClick={()=>setAdvancedFilter(p=>!p)}>Toggle Advancend Filter</button> <p> the filter sidebar should be visible when advanced filter is not</p>
<div style={gridStyle}>
<AgGridReact
sideBar={true}
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
dataTypeDefinitions={dataTypeDefinitions}
enableAdvancedFilter={advancedFilter}
onGridReady={onGridReady}
/>
</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) {
process = { env: { NODE_ENV: 'development' } };
// Valid versions (18/19)
const config = { version: 19, isProd: true };
const filePart = config.isProd ? 'production.min' : 'development';
const reactConfig =
config.version == 18
? {
map: {
react: 'npm:react@18.2.0',
'react-dom': 'npm:react-dom@18.2.0',
'react-dom/client': 'npm:react-dom@18.2.0',
},
packages: {
react: {
main: `./umd/react.${filePart}.js`,
},
'react-dom': {
main: `./umd/react-dom.${filePart}.js`,
},
},
}
: {
map: {
react: `npm:react@19.1.0/cjs/react.${filePart}.js`,
'react-dom': `npm:react-dom@19.1.0/cjs/react-dom.${filePart}.js`,
'react-dom/client': `npm:react-dom@19.1.0/cjs/react-dom-client.${filePart}.js`,
scheduler: `npm:scheduler@0.26.0/cjs/scheduler.${filePart}.js`,
},
packages: {
react: {
format: 'cjs',
},
'react-dom': {
format: 'cjs',
},
scheduler: {
format: 'cjs',
},
},
};
System.config({
transpiler: 'ts',
typescriptOptions: {
target: 'es2020',
jsx: 'react',
},
paths: {
// paths serve as alias
'npm:': 'https://cdn.jsdelivr.net/npm/',
...systemJsPaths,
},
map: {
css: (boilerplatePath.length === 0 ? `./` : `${boilerplatePath}/`) + 'css.js',
...reactConfig.map,
ts: 'npm:plugin-typescript@8.0.0/lib/plugin.js',
typescript: 'npm:typescript@5.4.5/lib/typescript.min.js',
app: appLocation,
// systemJsMap comes from index.html
...systemJsMap,
},
packages: {
css: {},
...reactConfig.packages,
app: {
main: './index.jsx',
defaultExtension: 'jsx',
},
'ag-grid-community': {
main: './dist/package/main.cjs.js',
defaultExtension: 'js',
format: 'cjs',
},
'ag-grid-enterprise': {
main: './dist/package/main.cjs.js',
defaultExtension: 'js',
format: 'cjs',
},
'ag-grid-react': {
main: './dist/package/index.cjs.js',
defaultExtension: 'js',
format: 'cjs',
},
'ag-charts-types': {
defaultExtension: 'js',
format: 'cjs',
},
'ag-charts-core': {
defaultExtension: 'js',
format: 'cjs',
},
'ag-charts-community': {
defaultExtension: 'js',
format: 'cjs',
},
'ag-charts-enterprise': {
defaultExtension: 'js',
format: 'cjs',
},
'@ag-grid-community/locale': {
format: 'cjs',
},
},
meta: {
typescript: {
exports: 'ts',
},
'*.css': { loader: 'css' },
},
});
})(this);
window.addEventListener('error', (e) => {
console.error('ERROR', e.message, e.filename);
});
{
"name": "ag-grid-example",
"dependencies": {
"react": "18",
"react-dom": "18",
"@types/react": "18",
"@types/react-dom": "18",
"ag-grid-react": "34.0.0",
"ag-grid-community": "34.0.0",
"ag-grid-enterprise": "34.0.0"
},
"devDependencies": {
"@types/node": "^22"
}
}
<!doctype html>
<html lang="en">
<head>
<title>React Example - Filter Advanced - Advanced Filter</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<style media="only screen">
:root,
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;
font-family: -apple-system, "system-ui", "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
}
body {
padding: 16px;
overflow: auto;
background-color: transparent;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
var appLocation = "";
var boilerplatePath = "";
var systemJsMap = {
"@ag-grid-community/styles":
"https://cdn.jsdelivr.net/npm/@ag-grid-community/styles@34.0.0",
"ag-grid-community":
"https://cdn.jsdelivr.net/npm/ag-grid-community@34.0.0",
"ag-grid-enterprise":
"https://cdn.jsdelivr.net/npm/ag-grid-enterprise@34.0.0/",
"ag-grid-react": "https://cdn.jsdelivr.net/npm/ag-grid-react@34.0.0/",
};
var systemJsPaths = {
"@ag-grid-community/locale":
"https://cdn.jsdelivr.net/npm/@ag-grid-community/locale@34.0.0/dist/package/main.cjs.js",
"ag-charts-community":
"https://cdn.jsdelivr.net/npm/ag-charts-community@12.0.0/dist/package/main.cjs.js",
"ag-charts-core":
"https://cdn.jsdelivr.net/npm/ag-charts-core@12.0.0/dist/package/main.cjs.js",
"ag-charts-enterprise":
"https://cdn.jsdelivr.net/npm/ag-charts-enterprise@12.0.0/dist/package/main.cjs.js",
"ag-charts-react":
"https://cdn.jsdelivr.net/npm/ag-charts-react@12.0.0/",
"ag-charts-types":
"https://cdn.jsdelivr.net/npm/ag-charts-types@12.0.0/",
};
</script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@0.19.47/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.jsdelivr.net/npm/seedrandom@3.0.5/seedrandom.min.js"></script>
<script>
// Seed random number generator for predictable tests and examples
Math.seedrandom("AG Grid Random Seed");
</script>
<script>
System.import("index.jsx").catch(function (err) {
document.body.innerHTML =
'<div class="example-error" style="background:#fdb022;padding:1rem;">' +
"Example Error: " +
err +
"</div>";
console.error(err);
});
</script>
</body>
</html>