Skip to content

[pull] latest from ag-grid:latest #645

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 5 commits into from
Mar 13, 2026
Merged

[pull] latest from ag-grid:latest #645

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a75ac47
Ag 16513 grouping api docs theme params (#13284)
markdurrant Mar 13, 2026
1c3bd74
AG-8814 Perf demo updates (#13287)
StephenCooper Mar 13, 2026
1c74087
Merge from latest.
AgGitDeployment Mar 13, 2026
f67e674
Merge pull request #13288 from ag-grid/charts-integration-523
AgGitDeployment Mar 13, 2026
b3d6f84
Remove @vitejs/plugin-react-swc, use esbuild built-in JSX handling (#…
SalvatorePreviti Mar 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions documentation/ag-grid-docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,12 @@
"@types/react": "^18.2.47",
"@types/react-dom": "^18.2.18",
"@pqina/flip": "^1.8.4",
"ag-charts-angular": "13.1.0-beta.20260312",
"ag-charts-community": "13.1.0-beta.20260312",
"ag-charts-enterprise": "13.1.0-beta.20260312",
"ag-charts-types": "13.1.0-beta.20260312",
"ag-charts-react": "13.1.0-beta.20260312",
"ag-charts-vue3": "13.1.0-beta.20260312",
"ag-charts-angular": "13.1.0-beta.20260313",
"ag-charts-community": "13.1.0-beta.20260313",
"ag-charts-enterprise": "13.1.0-beta.20260313",
"ag-charts-types": "13.1.0-beta.20260313",
"ag-charts-react": "13.1.0-beta.20260313",
"ag-charts-vue3": "13.1.0-beta.20260313",
"ag-grid-angular": "35.1.0-beta.20260312.1528",
"ag-grid-community": "35.1.0-beta.20260312.1528",
"ag-grid-enterprise": "35.1.0-beta.20260312.1528",
Expand Down
62 changes: 51 additions & 11 deletions documentation/ag-grid-docs/src/components/example-grid/Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
RowNumbersModule,
SetFilterModule,
SideBarModule,
SparklinesModule,
StatusBarModule,
} from 'ag-grid-enterprise';
import { AgGridReact } from 'ag-grid-react';
Expand All @@ -49,7 +50,7 @@ import {
smallDefaultCols,
} from './config/colDefs';
import { excelStyles } from './config/excelStyles';
import { COUNTRY_CODES, colNames, countries, createRowItem } from './data';
import { COUNTRY_CODES, countries, createRowItem, extraColumns } from './data';
import { createDataSizeValue } from './utils';

const IS_SSR = typeof window === 'undefined';
Expand Down Expand Up @@ -83,6 +84,7 @@ const modules = [
PivotModule,
RowNumbersModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
SparklinesModule.with(AgChartsEnterpriseModule),
];

const staticGridOptions: GridOptions = {
Expand Down Expand Up @@ -279,14 +281,14 @@ const ExampleInner = ({ darkMode, theme, isSmall }: { darkMode: boolean; theme:

const newRowsCols = [
[100, defaultColCount],
[1000, defaultColCount],
[1_000, defaultColCount],
];

if (!isSmall) {
newRowsCols.push([10000, 100], [50000, defaultColCount], [100000, defaultColCount]);
newRowsCols.push([10_000, 100], [50_000, defaultColCount], [100_000, defaultColCount]);
}

setDataSize(createDataSizeValue(newRowsCols[0][0], newRowsCols[0][1]));
setDataSize(createDataSizeValue(newRowsCols[1][0], newRowsCols[1][1]));
setRowCols(newRowsCols);
}, [isSmall]);

Expand Down Expand Up @@ -315,18 +317,56 @@ const ExampleInner = ({ darkMode, theme, isSmall }: { darkMode: boolean; theme:

const createCols = (colCount: number) => {
// start with a copy of the default cols
const columns = defaultCols?.slice(0, colCount) ?? [];
const columns: (ColDef | ColGroupDef)[] = defaultCols?.slice(0, colCount) ?? [];

// Group extra columns by their group name
const groups = new Map<string, ColDef[]>();
for (let col = defaultColCount; col < colCount; col++) {
const colName = colNames[col % colNames.length];
const colDef = {
headerName: colName,
const extraColIndex = col - defaultColCount;
const colConfig = extraColumns[extraColIndex % extraColumns.length];
const colDef: ColDef = {
headerName: colConfig.headerName,
field: 'col' + col,
width: 200,
width: 150,
editable: true,
filter: 'agTextColumnFilter',
};
columns.push(colDef);
switch (colConfig.dataType) {
case 'currency':
colDef.cellDataType = 'currency';
colDef.filter = 'agNumberColumnFilter';
colDef.width = 160;
break;
case 'percent':
colDef.filter = 'agNumberColumnFilter';
colDef.valueFormatter = (params) => (params.value != null ? `${params.value.toFixed(1)}%` : '');
colDef.width = 130;
break;
case 'rating':
colDef.filter = 'agNumberColumnFilter';
colDef.width = 120;
break;
case 'text':
colDef.filter = 'agSetColumnFilter';
colDef.width = 160;
break;
case 'number':
default:
colDef.filter = 'agNumberColumnFilter';
colDef.width = 140;
break;
}
const group = colConfig.group;
if (!groups.has(group)) {
groups.set(group, []);
}
groups.get(group)!.push(colDef);
}

for (const [groupName, children] of groups) {
columns.push({
headerName: groupName,
children,
});
}

return columns;
Expand Down
53 changes: 45 additions & 8 deletions documentation/ag-grid-docs/src/components/example-grid/config/colDefs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import type { CellStyleFunc, ColDef, ColGroupDef, GridOptions, ValueFormatterParams } from 'ag-grid-community';
import type {
CellStyleFunc,
ColDef,
ColGroupDef,
GridOptions,
ValueFormatterParams,
ValueGetterParams,
} from 'ag-grid-community';

import { COUNTRY_NAMES, LANGUAGES, type RowItem, games, months } from '../data';
import { CountryCellRenderer, RatingRenderer } from './renderers';
Expand Down Expand Up @@ -107,9 +114,6 @@ const mobileDefaultCols: ColDef<RowItem>[] = [
field: 'country',
width: 150,
cellRenderer: CountryCellRenderer,
cellRendererParams: {
deferRender: true,
},
cellClass: 'v-align',
cellEditor: 'agRichSelectCellEditor',
cellEditorParams: {
Expand Down Expand Up @@ -192,9 +196,6 @@ const desktopDefaultCols: (ColDef<RowItem> | ColGroupDef<RowItem>)[] = [
field: 'country',
width: 150,
cellRenderer: CountryCellRenderer,
cellRendererParams: {
deferRender: true,
},
cellClass: ['country-cell', 'v-align'],
enableRowGroup: true,
enablePivot: true,
Expand Down Expand Up @@ -308,7 +309,43 @@ const desktopDefaultCols: (ColDef<RowItem> | ColGroupDef<RowItem>)[] = [
},
{
headerName: 'Monthly Breakdown',
children: monthCols,
openByDefault: false,
children: [
{
headerName: 'Winning Trends',
colId: 'winningTrends',
sortable: false,
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
deferRender: true,
sparklineOptions: {
type: 'area',
xKey: 'month',
yKey: 'value',
tooltip: {
renderer: (params: { datum: { month: string; value: number } }) => {
const { month, value } = params.datum;
const formatted = '$' + Math.floor(Math.abs(value)).toLocaleString();
const currency = value < 0 ? `(${formatted})` : formatted;
return { content: `${month.charAt(0).toUpperCase() + month.slice(1)}: ${currency}` };
},
},
},
},
valueGetter: (params: ValueGetterParams) => {
const data = params.data;
if (!data) {
return undefined;
}
return months.map((month) => ({ month, value: data[month] }));
},
width: 200,
} as ColDef,
...monthCols.map((col) => ({
...col,
columnGroupShow: 'open' as const,
})),
],
},
];

Expand Down
160 changes: 144 additions & 16 deletions documentation/ag-grid-docs/src/components/example-grid/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,124 @@
import { pseudoRandom } from './utils';

export const colNames = [
'Station',
'Railway',
'Street',
'Address',
'Toy',
'Soft Box',
'Make and Model',
'Longest Day',
'Shortest Night',
export type ExtraColDataType = 'number' | 'currency' | 'percent' | 'text' | 'rating';

export interface ExtraColConfig {
headerName: string;
group: string;
dataType: ExtraColDataType;
values?: string[];
}

const difficulties = ['Beginner', 'Intermediate', 'Advanced', 'Expert', 'Master'];
const roles = ['Attacker', 'Defender', 'Strategist', 'Support', 'Wildcard'];
const teamNames = [
'Phoenix Rising',
'Shadow Wolves',
'Thunder Hawks',
'Iron Bears',
'Storm Riders',
'Silver Foxes',
'Dark Knights',
'Golden Eagles',
'Arctic Falcons',
'Crimson Tide',
];
const strategies = ['Aggressive', 'Defensive', 'Balanced', 'Counter-Attack', 'Positional'];
const controllerTypes = ['Keyboard', 'Gamepad', 'Touchscreen', 'Joystick', 'Custom'];
const regions = ['North', 'South', 'East', 'West', 'Central'];
const tiers = ['Bronze', 'Silver', 'Gold', 'Platinum', 'Diamond'];
const platforms = ['PC', 'Console', 'Mobile', 'Tablet', 'VR'];
const statuses = ['Active', 'Inactive', 'Suspended', 'Retired', 'Probation'];
const divisions = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Omega'];

export const extraColumns: ExtraColConfig[] = [
// Performance Metrics
{ headerName: 'Win Rate', group: 'Performance', dataType: 'percent' },
{ headerName: 'Avg Score', group: 'Performance', dataType: 'number' },
{ headerName: 'Best Score', group: 'Performance', dataType: 'number' },
{ headerName: 'Matches Played', group: 'Performance', dataType: 'number' },
{ headerName: 'Hours Played', group: 'Performance', dataType: 'number' },
{ headerName: 'XP Points', group: 'Performance', dataType: 'number' },
{ headerName: 'Level', group: 'Performance', dataType: 'number' },
{ headerName: 'Accuracy', group: 'Performance', dataType: 'percent' },
{ headerName: 'Win Streak', group: 'Performance', dataType: 'number' },
{ headerName: 'Rank Points', group: 'Performance', dataType: 'number' },

// Tournament History
{ headerName: 'Tournaments Entered', group: 'Tournaments', dataType: 'number' },
{ headerName: 'Tournaments Won', group: 'Tournaments', dataType: 'number' },
{ headerName: 'Runner Up Finishes', group: 'Tournaments', dataType: 'number' },
{ headerName: 'Prize Money', group: 'Tournaments', dataType: 'currency' },
{ headerName: 'Best Finish', group: 'Tournaments', dataType: 'number' },
{ headerName: 'Entry Fees', group: 'Tournaments', dataType: 'currency' },
{ headerName: 'Forfeits', group: 'Tournaments', dataType: 'number' },
{ headerName: 'Disqualifications', group: 'Tournaments', dataType: 'number' },

// Social
{ headerName: 'Friends', group: 'Social', dataType: 'number' },
{ headerName: 'Followers', group: 'Social', dataType: 'number' },
{ headerName: 'Posts', group: 'Social', dataType: 'number' },
{ headerName: 'Achievements', group: 'Social', dataType: 'number' },
{ headerName: 'Reputation', group: 'Social', dataType: 'number' },
{ headerName: 'Community Rating', group: 'Social', dataType: 'rating' },

// Financial
{ headerName: 'Equipment Cost', group: 'Financial', dataType: 'currency' },
{ headerName: 'Travel Expenses', group: 'Financial', dataType: 'currency' },
{ headerName: 'Sponsorship', group: 'Financial', dataType: 'currency' },
{ headerName: 'Net Profit', group: 'Financial', dataType: 'currency' },
{ headerName: 'Tax Paid', group: 'Financial', dataType: 'currency' },
{ headerName: 'Insurance Cost', group: 'Financial', dataType: 'currency' },
{ headerName: 'Coaching Fees', group: 'Financial', dataType: 'currency' },
{ headerName: 'Subscription Cost', group: 'Financial', dataType: 'currency' },

// Game Details
{ headerName: 'Difficulty', group: 'Game Details', dataType: 'text', values: difficulties },
{ headerName: 'Team Name', group: 'Game Details', dataType: 'text', values: teamNames },
{ headerName: 'Role', group: 'Game Details', dataType: 'text', values: roles },
{ headerName: 'Strategy', group: 'Game Details', dataType: 'text', values: strategies },
{ headerName: 'Controller Type', group: 'Game Details', dataType: 'text', values: controllerTypes },
{ headerName: 'Division', group: 'Game Details', dataType: 'text', values: divisions },
{ headerName: 'Platform', group: 'Game Details', dataType: 'text', values: platforms },
{ headerName: 'Status', group: 'Game Details', dataType: 'text', values: statuses },

// Training
{ headerName: 'Training Hours', group: 'Training', dataType: 'number' },
{ headerName: 'Sessions Completed', group: 'Training', dataType: 'number' },
{ headerName: 'Drills Passed', group: 'Training', dataType: 'number' },
{ headerName: 'Coaching Score', group: 'Training', dataType: 'percent' },
{ headerName: 'Fitness Level', group: 'Training', dataType: 'rating' },
{ headerName: 'Reaction Time (ms)', group: 'Training', dataType: 'number' },
{ headerName: 'Training Cost', group: 'Training', dataType: 'currency' },
{ headerName: 'Improvement Rate', group: 'Training', dataType: 'percent' },

// Seasonal Stats
{ headerName: 'Q1 Earnings', group: 'Seasonal', dataType: 'currency' },
{ headerName: 'Q2 Earnings', group: 'Seasonal', dataType: 'currency' },
{ headerName: 'Q3 Earnings', group: 'Seasonal', dataType: 'currency' },
{ headerName: 'Q4 Earnings', group: 'Seasonal', dataType: 'currency' },
{ headerName: 'Q1 Wins', group: 'Seasonal', dataType: 'number' },
{ headerName: 'Q2 Wins', group: 'Seasonal', dataType: 'number' },
{ headerName: 'Q3 Wins', group: 'Seasonal', dataType: 'number' },
{ headerName: 'Q4 Wins', group: 'Seasonal', dataType: 'number' },

// Equipment
{ headerName: 'Setup Cost', group: 'Equipment', dataType: 'currency' },
{ headerName: 'Monitor Size', group: 'Equipment', dataType: 'number' },
{ headerName: 'Peripherals Cost', group: 'Equipment', dataType: 'currency' },
{ headerName: 'Upgrades', group: 'Equipment', dataType: 'number' },
{ headerName: 'Tier', group: 'Equipment', dataType: 'text', values: tiers },
{ headerName: 'Region', group: 'Equipment', dataType: 'text', values: regions },

// Misc
{ headerName: 'Penalties', group: 'Miscellaneous', dataType: 'number' },
{ headerName: 'Bonus Points', group: 'Miscellaneous', dataType: 'number' },
{ headerName: 'Referrals', group: 'Miscellaneous', dataType: 'number' },
{ headerName: 'Complaints', group: 'Miscellaneous', dataType: 'number' },
{ headerName: 'Awards', group: 'Miscellaneous', dataType: 'number' },
{ headerName: 'Loyalty Points', group: 'Miscellaneous', dataType: 'number' },
{ headerName: 'Event Attendance', group: 'Miscellaneous', dataType: 'number' },
{ headerName: 'Feedback Score', group: 'Miscellaneous', dataType: 'percent' },
];

export const countries = [
Expand Down Expand Up @@ -120,8 +229,8 @@ export const firstNames = [
'Andrew',
'Kevin',
'Bricker',
'Dimple',
'Gil',
'Harper',
'Noel',
'Sophie',
'Isabelle',
'Emily',
Expand Down Expand Up @@ -152,7 +261,7 @@ export const lastNames = [
'Connell',
'Flanagan',
'McGee',
'Unalkat',
'Thornton',
'Lopes',
'Beckham',
'Black',
Expand Down Expand Up @@ -287,10 +396,29 @@ export const createRowItem = (row: number, colCount: number, defaultCols: number
}
}

//create dummy data for the additional columns
//create data for the additional columns
for (let col = defaultColCount; col < colCount; col++) {
const randomBit = pseudoRandom().toString().substring(2, 5);
const value = colNames[col % colNames.length] + '-' + randomBit + ' - (' + (row + 1) + ',' + col + ')';
const extraColIndex = col - defaultColCount;
const colConfig = extraColumns[extraColIndex % extraColumns.length];
let value: string | number;
switch (colConfig.dataType) {
case 'currency':
value = Math.round(pseudoRandom() * 50000) - 5000;
break;
case 'percent':
value = Math.round(pseudoRandom() * 10000) / 100;
break;
case 'rating':
value = Math.round(pseudoRandom() * 5);
break;
case 'text':
value = colConfig.values![Math.floor(pseudoRandom() * colConfig.values!.length)];
break;
case 'number':
default:
value = Math.round(pseudoRandom() * 1000);
break;
}
rowItem['col' + col] = value;
}

Expand Down
Loading
Loading