Customise the generated group column when using Tree Data.
Group Column Configuration Copy Link
When using Tree Data, the grid will automatically generate a group column to display the hierarchy. This column can be configured by using the autoGroupColumnDef grid option, allowing any Column Property to be overridden.
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
AutoGroupColumnDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GetDataPath,
GridApi,
GridOptions,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [ClientSideRowModelModule, TreeDataModule];
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState<any[]>(getData());
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "created" },
{ field: "modified" },
{
field: "size",
aggFunc: "sum",
valueFormatter: (params) => {
if (params.value == null) {
return ""; // params.value can be null/undefined here (e.g. no size for this row)
}
const sizeInKb = params.value / 1024;
if (sizeInKb > 1024) {
return `${+(sizeInKb / 1024).toFixed(2)} MB`;
} else {
return `${+sizeInKb.toFixed(2)} KB`;
}
},
},
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
};
}, []);
const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
return {
headerName: "My Group",
minWidth: 340,
};
}, []);
const getDataPath = useCallback((data) => data.path, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
autoGroupColumnDef={autoGroupColumnDef}
treeData={true}
groupDefaultExpanded={-1}
getDataPath={getDataPath}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
const files = [
{ path: ['Desktop', 'ProjectAlpha', 'Proposal.docx'], size: 512000, created: '2023-07-10', modified: '2023-08-01' },
{
path: ['Desktop', 'ProjectAlpha', 'Timeline.xlsx'],
size: 1048576,
created: '2023-07-12',
modified: '2023-08-03',
},
{ path: ['Desktop', 'ToDoList.txt'], size: 51200, created: '2023-08-05', modified: '2023-08-10' },
{ path: ['Desktop', 'MeetingNotes_August.pdf'], size: 460800, created: '2023-08-15', modified: '2023-08-15' },
{
path: ['Documents', 'Work', 'ProjectAlpha', 'Proposal.docx'],
size: 512000,
created: '2023-07-10',
modified: '2023-08-01',
},
{
path: ['Documents', 'Work', 'ProjectAlpha', 'Timeline.xlsx'],
size: 1048576,
created: '2023-07-12',
modified: '2023-08-03',
},
{
path: ['Documents', 'Work', 'ProjectBeta', 'Report.pdf'],
size: 1024000,
created: '2023-06-22',
modified: '2023-07-15',
},
{
path: ['Documents', 'Work', 'ProjectBeta', 'Budget.xlsx'],
size: 1048576,
created: '2023-06-25',
modified: '2023-07-18',
},
{
path: ['Documents', 'Work', 'Meetings', 'TeamMeeting_August.pdf'],
size: 512000,
created: '2023-08-20',
modified: '2023-08-21',
},
{
path: ['Documents', 'Work', 'Meetings', 'ClientMeeting_July.pdf'],
size: 1048576,
created: '2023-07-15',
modified: '2023-07-16',
},
{
path: ['Documents', 'Personal', 'Taxes', '2022.pdf'],
size: 1024000,
created: '2023-04-10',
modified: '2023-04-10',
},
{
path: ['Documents', 'Personal', 'Taxes', '2021.pdf'],
size: 1048576,
created: '2022-04-05',
modified: '2022-04-06',
},
{
path: ['Documents', 'Personal', 'Taxes', '2020.pdf'],
size: 1024000,
created: '2021-04-03',
modified: '2021-04-03',
},
{ path: ['Pictures', 'Vacation2019', 'Beach.jpg'], size: 1048576, created: '2019-07-10', modified: '2019-07-12' },
{
path: ['Pictures', 'Vacation2019', 'Mountain.png'],
size: 2048000,
created: '2019-07-11',
modified: '2019-07-13',
},
{ path: ['Pictures', 'Family', 'Birthday2022.jpg'], size: 3072000, created: '2022-12-15', modified: '2022-12-20' },
{ path: ['Pictures', 'Family', 'Christmas2021.png'], size: 2048000, created: '2021-12-25', modified: '2021-12-26' },
{ path: ['Videos', 'Vacation2019', 'Beach.mov'], size: 4194304, created: '2019-07-10', modified: '2019-07-12' },
{ path: ['Videos', 'Vacation2019', 'Hiking.mp4'], size: 4194304, created: '2019-07-15', modified: '2019-07-16' },
{ path: ['Videos', 'Family', 'Birthday2022.mp4'], size: 6291456, created: '2022-12-15', modified: '2022-12-20' },
{ path: ['Videos', 'Family', 'Christmas2021.mov'], size: 6291456, created: '2021-12-25', modified: '2021-12-26' },
{ path: ['Downloads', 'SoftwareInstaller.exe'], size: 2097152, created: '2023-08-01', modified: '2023-08-01' },
{ path: ['Downloads', 'Receipt_OnlineStore.pdf'], size: 1048576, created: '2023-08-05', modified: '2023-08-05' },
{ path: ['Downloads', 'Ebook.pdf'], size: 1048576, created: '2023-08-08', modified: '2023-08-08' },
];
export function getData() {
return files;
}
The example above sets different header text and a minimum width to each Group Column cell using the following configuration:
const autoGroupColumnDef = useMemo(() => {
return {
headerName: 'My Group',
minWidth: 220,
};
}, []);
<AgGridReact autoGroupColumnDef={autoGroupColumnDef} /> Group Cell Component Copy Link
The grid uses the agGroupCellRenderer component to render the group column cells.
Child Row Counts Copy Link
When showing child counts with Tree Data, the child count is a count of all descendants, including groups.
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
AutoGroupColumnDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GetDataPath,
GridApi,
GridOptions,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [ClientSideRowModelModule, TreeDataModule];
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState<any[]>(getData());
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "created" },
{ field: "modified" },
{
field: "size",
aggFunc: "sum",
valueFormatter: (params) => {
if (params.value == null) {
return ""; // params.value can be null/undefined here (e.g. no size for this row)
}
const sizeInKb = params.value / 1024;
if (sizeInKb > 1024) {
return `${+(sizeInKb / 1024).toFixed(2)} MB`;
} else {
return `${+sizeInKb.toFixed(2)} KB`;
}
},
},
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
};
}, []);
const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
return {
headerName: "File Explorer",
minWidth: 270,
};
}, []);
const getDataPath = useCallback((data) => data.path, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
autoGroupColumnDef={autoGroupColumnDef}
treeData={true}
groupDefaultExpanded={-1}
getDataPath={getDataPath}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
const files = [
{ path: ['Desktop', 'ProjectAlpha', 'Proposal.docx'], size: 512000, created: '2023-07-10', modified: '2023-08-01' },
{
path: ['Desktop', 'ProjectAlpha', 'Timeline.xlsx'],
size: 1048576,
created: '2023-07-12',
modified: '2023-08-03',
},
{ path: ['Desktop', 'ToDoList.txt'], size: 51200, created: '2023-08-05', modified: '2023-08-10' },
{ path: ['Desktop', 'MeetingNotes_August.pdf'], size: 460800, created: '2023-08-15', modified: '2023-08-15' },
];
export function getData() {
return files;
}
Note how in the example above, the Desktop row has a child count of 5, of which one of is the ProjectAlpha Filler Group row.
Default Component Options Copy Link
The options configurable on the agGroupCellRenderer via the column definition cellRendererParams are:
Set to true to not include any padding (indentation) in the child rows. |
Set to true to suppress expand on double click. |
Set to true to suppress expand on ↵ Enter |
The value getter for the total row text. Can be a function or expression. |
If true, count is not displayed beside the name. |
The renderer to use for inside the cell (after grouping functions are added) |
Additional params to customise to the innerRenderer. |
Callback to enable different innerRenderers to be used based of value of params. |
Custom Component Copy Link
Where the default agGroupCellRenderer does not meet your requirements, you can provide a Custom Cell Component, via the cellRenderer property in the autoGroupColumnDef grid option.
The below example provides a custom cell renderer which:
- Uses a custom icon to represent the groups expanded state
- Responds to row expansion events to update if the group is expanded or collapsed from another source
- Cleans up all event listeners when it's destroyed
'use client';
import React, { StrictMode, useCallback, useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import type {
CellDoubleClickedEvent,
CellKeyDownEvent,
ColDef,
} from "ag-grid-community";
import {
ClientSideRowModelModule,
enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { AgGridProvider, AgGridReact } from "ag-grid-react";
import CustomGroupCellRenderer from "./customGroupCellRenderer";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [ClientSideRowModelModule, TreeDataModule];
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "created" },
{ field: "modified" },
{
field: "size",
aggFunc: "sum",
valueFormatter: (params) => {
if (params.value == null) {
return ""; // params.value can be null/undefined here (e.g. no size for this row)
}
const sizeInKb = params.value / 1024;
if (sizeInKb > 1024) {
return `${+(sizeInKb / 1024).toFixed(2)} MB`;
} else {
return `${+sizeInKb.toFixed(2)} KB`;
}
},
},
]);
const autoGroupColumnDef = useMemo<ColDef>(() => {
return {
cellRenderer: CustomGroupCellRenderer,
};
}, []);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 120,
};
}, []);
const getDataPath = useCallback((data: any) => data.path, []);
const onCellDoubleClicked = useCallback((params: CellDoubleClickedEvent) => {
if (params.colDef.showRowGroup) {
params.node.setExpanded(!params.node.expanded);
}
}, []);
const onCellKeyDown = useCallback((params: CellKeyDownEvent) => {
if (!("colDef" in params)) {
return;
}
if (!(params.event instanceof KeyboardEvent)) {
return;
}
if (params.event.code !== "Enter") {
return;
}
if (params.colDef.showRowGroup) {
params.node.setExpanded(!params.node.expanded);
}
}, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact
treeData
getDataPath={getDataPath}
rowData={getData()}
columnDefs={columnDefs}
autoGroupColumnDef={autoGroupColumnDef}
defaultColDef={defaultColDef}
groupDefaultExpanded={1}
onCellDoubleClicked={onCellDoubleClicked}
onCellKeyDown={onCellKeyDown}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
import React, { useCallback, useEffect, useState } from "react";
import type { RowEvent } from "ag-grid-community";
import type { CustomCellRendererProps } from "ag-grid-react";
export default (props: CustomCellRendererProps) => {
const { node, value } = props;
const [expanded, setExpanded] = useState(node.expanded);
useEffect(() => {
const expandListener = (event: RowEvent) =>
setExpanded(event.node.expanded);
node.addEventListener("expandedChanged", expandListener);
return () => {
node.removeEventListener("expandedChanged", expandListener);
};
}, []);
const onClick = useCallback(() => node.setExpanded(!node.expanded), [node]);
return (
<div
style={{
paddingLeft: `${node.level * 15}px`,
}}
>
{node.group && (
<div
style={{
cursor: "pointer",
transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
display: "inline-block",
}}
onClick={onClick}
>
→
</div>
)}
{value}
</div>
);
};
const files = [
{
path: ["Desktop", "ProjectAlpha", "Proposal.docx"],
size: 512000,
created: "2023-07-10",
modified: "2023-08-01",
},
{
path: ["Desktop", "ProjectAlpha", "Timeline.xlsx"],
size: 1048576,
created: "2023-07-12",
modified: "2023-08-03",
},
{
path: ["Desktop", "ToDoList.txt"],
size: 51200,
created: "2023-08-05",
modified: "2023-08-10",
},
{
path: ["Desktop", "MeetingNotes_August.pdf"],
size: 460800,
created: "2023-08-15",
modified: "2023-08-15",
},
{
path: ["Documents", "Work", "ProjectAlpha", "Proposal.docx"],
size: 512000,
created: "2023-07-10",
modified: "2023-08-01",
},
{
path: ["Documents", "Work", "ProjectAlpha", "Timeline.xlsx"],
size: 1048576,
created: "2023-07-12",
modified: "2023-08-03",
},
{
path: ["Documents", "Work", "ProjectBeta", "Report.pdf"],
size: 1024000,
created: "2023-06-22",
modified: "2023-07-15",
},
{
path: ["Documents", "Work", "ProjectBeta", "Budget.xlsx"],
size: 1048576,
created: "2023-06-25",
modified: "2023-07-18",
},
{
path: ["Documents", "Work", "Meetings", "TeamMeeting_August.pdf"],
size: 512000,
created: "2023-08-20",
modified: "2023-08-21",
},
{
path: ["Documents", "Work", "Meetings", "ClientMeeting_July.pdf"],
size: 1048576,
created: "2023-07-15",
modified: "2023-07-16",
},
{
path: ["Documents", "Personal", "Taxes", "2022.pdf"],
size: 1024000,
created: "2023-04-10",
modified: "2023-04-10",
},
{
path: ["Documents", "Personal", "Taxes", "2021.pdf"],
size: 1048576,
created: "2022-04-05",
modified: "2022-04-06",
},
{
path: ["Documents", "Personal", "Taxes", "2020.pdf"],
size: 1024000,
created: "2021-04-03",
modified: "2021-04-03",
},
{
path: ["Pictures", "Vacation2019", "Beach.jpg"],
size: 1048576,
created: "2019-07-10",
modified: "2019-07-12",
},
{
path: ["Pictures", "Vacation2019", "Mountain.png"],
size: 2048000,
created: "2019-07-11",
modified: "2019-07-13",
},
{
path: ["Pictures", "Family", "Birthday2022.jpg"],
size: 3072000,
created: "2022-12-15",
modified: "2022-12-20",
},
{
path: ["Pictures", "Family", "Christmas2021.png"],
size: 2048000,
created: "2021-12-25",
modified: "2021-12-26",
},
{
path: ["Videos", "Vacation2019", "Beach.mov"],
size: 4194304,
created: "2019-07-10",
modified: "2019-07-12",
},
{
path: ["Videos", "Vacation2019", "Hiking.mp4"],
size: 4194304,
created: "2019-07-15",
modified: "2019-07-16",
},
{
path: ["Videos", "Family", "Birthday2022.mp4"],
size: 6291456,
created: "2022-12-15",
modified: "2022-12-20",
},
{
path: ["Videos", "Family", "Christmas2021.mov"],
size: 6291456,
created: "2021-12-25",
modified: "2021-12-26",
},
{
path: ["Downloads", "SoftwareInstaller.exe"],
size: 2097152,
created: "2023-08-01",
modified: "2023-08-01",
},
{
path: ["Downloads", "Receipt_OnlineStore.pdf"],
size: 1048576,
created: "2023-08-05",
modified: "2023-08-05",
},
{
path: ["Downloads", "Ebook.pdf"],
size: 1048576,
created: "2023-08-08",
modified: "2023-08-08",
},
];
export function getData() {
return files;
}
This demonstrates supplying a custom cell renderer via the cellRenderer property in the autoGroupColumnDef:
const autoGroupColumnDef = useMemo(() => {
return {
cellRenderer: CellRenderer,
};
}, []);
<AgGridReact autoGroupColumnDef={autoGroupColumnDef} /> Dynamic Component Selection Copy Link
When it's necessary to use different renderers in the same column, you can configure this with the cellRendererSelector property in the autoGroupColumnDef grid option.
Callback to select which cell renderer to be used for a given row within the same column. |
The example below extends the Custom Component example to use a different renderer based on the rows level:
'use client';
import React, { StrictMode, useCallback, useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import type {
CellDoubleClickedEvent,
CellKeyDownEvent,
ColDef,
} from "ag-grid-community";
import {
ClientSideRowModelModule,
enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { AgGridProvider, AgGridReact } from "ag-grid-react";
import CustomGroupCellRenderer from "./customGroupCellRenderer";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [ClientSideRowModelModule, TreeDataModule];
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "created" },
{ field: "modified" },
{
field: "size",
aggFunc: "sum",
valueFormatter: (params) => {
if (params.value == null) {
return ""; // params.value can be null/undefined here (e.g. no size for this row)
}
const sizeInKb = params.value / 1024;
if (sizeInKb > 1024) {
return `${+(sizeInKb / 1024).toFixed(2)} MB`;
} else {
return `${+sizeInKb.toFixed(2)} KB`;
}
},
},
]);
const autoGroupColumnDef = useMemo<ColDef>(() => {
return {
cellRendererSelector: (params) => {
if (params.node.level === 0) {
return {
component: "agGroupCellRenderer",
};
}
return {
component: CustomGroupCellRenderer,
};
},
};
}, []);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 120,
};
}, []);
const getDataPath = useCallback((data: any) => data.path, []);
const onCellDoubleClicked = useCallback((params: CellDoubleClickedEvent) => {
if (params.colDef.showRowGroup) {
params.node.setExpanded(!params.node.expanded);
}
}, []);
const onCellKeyDown = useCallback((params: CellKeyDownEvent) => {
if (!("colDef" in params)) {
return;
}
if (!(params.event instanceof KeyboardEvent)) {
return;
}
if (params.event.code !== "Enter") {
return;
}
if (params.node.level === 0) {
return;
}
if (params.colDef.showRowGroup) {
params.node.setExpanded(!params.node.expanded);
}
}, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact
treeData
getDataPath={getDataPath}
rowData={getData()}
columnDefs={columnDefs}
autoGroupColumnDef={autoGroupColumnDef}
defaultColDef={defaultColDef}
groupDefaultExpanded={1}
onCellDoubleClicked={onCellDoubleClicked}
onCellKeyDown={onCellKeyDown}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
import React, { useCallback, useEffect, useState } from "react";
import type { RowEvent } from "ag-grid-community";
import type { CustomCellRendererProps } from "ag-grid-react";
export default (props: CustomCellRendererProps) => {
const { node, value } = props;
const [expanded, setExpanded] = useState(node.expanded);
useEffect(() => {
const expandListener = (event: RowEvent) =>
setExpanded(event.node.expanded);
node.addEventListener("expandedChanged", expandListener);
return () => {
node.removeEventListener("expandedChanged", expandListener);
};
}, []);
const onClick = useCallback(() => node.setExpanded(!node.expanded), [node]);
return (
<div
style={{
paddingLeft: `${node.level * 15}px`,
}}
>
{node.group && (
<div
style={{
cursor: "pointer",
transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
display: "inline-block",
}}
onClick={onClick}
>
→
</div>
)}
{value}
</div>
);
};
const files = [
{
path: ["Desktop", "ProjectAlpha", "Proposal.docx"],
size: 512000,
created: "2023-07-10",
modified: "2023-08-01",
},
{
path: ["Desktop", "ProjectAlpha", "Timeline.xlsx"],
size: 1048576,
created: "2023-07-12",
modified: "2023-08-03",
},
{
path: ["Desktop", "ToDoList.txt"],
size: 51200,
created: "2023-08-05",
modified: "2023-08-10",
},
{
path: ["Desktop", "MeetingNotes_August.pdf"],
size: 460800,
created: "2023-08-15",
modified: "2023-08-15",
},
{
path: ["Documents", "Work", "ProjectAlpha", "Proposal.docx"],
size: 512000,
created: "2023-07-10",
modified: "2023-08-01",
},
{
path: ["Documents", "Work", "ProjectAlpha", "Timeline.xlsx"],
size: 1048576,
created: "2023-07-12",
modified: "2023-08-03",
},
{
path: ["Documents", "Work", "ProjectBeta", "Report.pdf"],
size: 1024000,
created: "2023-06-22",
modified: "2023-07-15",
},
{
path: ["Documents", "Work", "ProjectBeta", "Budget.xlsx"],
size: 1048576,
created: "2023-06-25",
modified: "2023-07-18",
},
{
path: ["Documents", "Work", "Meetings", "TeamMeeting_August.pdf"],
size: 512000,
created: "2023-08-20",
modified: "2023-08-21",
},
{
path: ["Documents", "Work", "Meetings", "ClientMeeting_July.pdf"],
size: 1048576,
created: "2023-07-15",
modified: "2023-07-16",
},
{
path: ["Documents", "Personal", "Taxes", "2022.pdf"],
size: 1024000,
created: "2023-04-10",
modified: "2023-04-10",
},
{
path: ["Documents", "Personal", "Taxes", "2021.pdf"],
size: 1048576,
created: "2022-04-05",
modified: "2022-04-06",
},
{
path: ["Documents", "Personal", "Taxes", "2020.pdf"],
size: 1024000,
created: "2021-04-03",
modified: "2021-04-03",
},
{
path: ["Pictures", "Vacation2019", "Beach.jpg"],
size: 1048576,
created: "2019-07-10",
modified: "2019-07-12",
},
{
path: ["Pictures", "Vacation2019", "Mountain.png"],
size: 2048000,
created: "2019-07-11",
modified: "2019-07-13",
},
{
path: ["Pictures", "Family", "Birthday2022.jpg"],
size: 3072000,
created: "2022-12-15",
modified: "2022-12-20",
},
{
path: ["Pictures", "Family", "Christmas2021.png"],
size: 2048000,
created: "2021-12-25",
modified: "2021-12-26",
},
{
path: ["Videos", "Vacation2019", "Beach.mov"],
size: 4194304,
created: "2019-07-10",
modified: "2019-07-12",
},
{
path: ["Videos", "Vacation2019", "Hiking.mp4"],
size: 4194304,
created: "2019-07-15",
modified: "2019-07-16",
},
{
path: ["Videos", "Family", "Birthday2022.mp4"],
size: 6291456,
created: "2022-12-15",
modified: "2022-12-20",
},
{
path: ["Videos", "Family", "Christmas2021.mov"],
size: 6291456,
created: "2021-12-25",
modified: "2021-12-26",
},
{
path: ["Downloads", "SoftwareInstaller.exe"],
size: 2097152,
created: "2023-08-01",
modified: "2023-08-01",
},
{
path: ["Downloads", "Receipt_OnlineStore.pdf"],
size: 1048576,
created: "2023-08-05",
modified: "2023-08-05",
},
{
path: ["Downloads", "Ebook.pdf"],
size: 1048576,
created: "2023-08-08",
modified: "2023-08-08",
},
];
export function getData() {
return files;
}
This uses the following configuration to display the default cell renderer for root level groups, and the custom renderer for all others:
const cellRendererSelector = (params) => {
if (params.node.level === 0) {
return {
component: 'agGroupCellRenderer',
};
}
return {
component: CustomGroupCellRenderer,
};
};
<AgGridReact cellRendererSelector={cellRendererSelector} />Refer to the Cell Components documentation for information on how to create custom cell renderers.