I am working on implementing the Tree Data on an AG-Grid. My data comes in with the parent and child as part of each array.
From the documentation it seems like I need to format one of my data columns as an array of strings that outline a hierarchy. The problem is my data doesn’t really have that sort of relationship.
data = [{
stateCode: string
constructionType: string
occupancy: string
soVRecordID: string
tiv: number
soVRecordPayload: {
stateCode: string
constructionType: string
occupancy: string
soVRecordID: string
tiv: number
}
}]
I would like the soVRecordPayload to be the child row in the grid.
<AgGridReact
rowData={sovData}
grandTotalRow="bottom"
getDataPath={function (data) {
return data.stateCode
}}
autoGroupColumnDef={{
headerName: 'State',
field: 'stateCode',
cellRendererParams: {
suppressCount: true,
},
filter: 'agSetColumnFilter',
filterParams: {
treeList: true,
keyCreator: (params) =>
params.value ? params.value.join('#') : null,
},
minWidth: 280,
}}
columnDefs={[
{
headerName: 'Bulk Update',
flex: 1,
cellStyle: {textAlign: 'center'},
cellRenderer: (params) => {
if (params.node.footer) {
return <div></div>
} else {
return (
<Checkbox
label=""
checked={bulkUpdateIds.includes(
params.data?.soVRecordID
)}
onChange={() =>
handleCheck(params.data?.soVRecordID)
}
size="small"
sx={{
height: '26px',
width: '26px',
verticalAlign: 'top',
}}
></Checkbox>
)
}
},
},
{
headerName: 'State',
field: 'stateCode',
flex: 1,
sortable: true,
editable: true,
filter: 'agTextColumnFilter',
floatingFilter: true,
filterParams: {
filterOptions: ['contains'],
},
cellStyle: {textAlign: 'left'},
},
{
headerName: 'Construction',
field: 'constructionType',
flex: 3,
filter: 'agTextColumnFilter',
floatingFilter: true,
filterParams: {
filterOptions: ['contains'],
},
sortable: true,
editable: true,
cellStyle: {textAlign: 'left'},
},
{
headerName: 'Occupancy',
field: 'occupancy',
flex: 2,
sortable: true,
editable: true,
filter: 'agTextColumnFilter',
floatingFilter: true,
filterParams: {
filterOptions: ['contains'],
},
cellStyle: {textAlign: 'left'},
cellRenderer: (params) => {
if (params.node.footer) {
return (
<div style={{fontWeight: 'bold'}}>
Total TIV
</div>
)
} else {
return <div>{params.data.occupancy}</div>
}
},
},
{
aggFunc: 'sum',
headerName: 'TIV',
field: 'tiv',
flex: 2,
valueFormatter: (params) =>
currencyFormatter(
params.data?.tiv || params.node.aggData?.tiv,
'$'
),
valueParser: (params) => Number(params.newValue),
filter: 'agTextColumnFilter',
floatingFilter: true,
editable: true,
sortable: true,
filterParams: {
filterOptions: ['contains'],
},
cellStyle: {textAlign: 'left'},
},
{
headerName: 'Delete',
flex: 1,
cellRenderer: (params) => {
if (params.node.footer) {
return <div></div>
} else {
return (
<IconButton
onClick={() => deleteGridRow(params.data)}
size="small"
sx={{
height: '26px',
width: '26px',
verticalAlign: 'top',
}}
>
<DeleteIcon
fontSize="small"
sx={{height: '20px'}}
/>
</IconButton>
)
}
},
},
]}
onCellEditingStopped={(e) => updateGridRow(e.data)}
rowHeight={35}
pagination={true}
paginationPageSize={50}
domLayout="autoHeight"
treeData={true}
/>
</>
)}
</div>
I feel like I am close but I am not structuring my data properly.
Any ideas how I can get this grid working?