AG Grid Row-Grouping for showing version history of data

user_1959323 0
Viewed 59

I'm a first time user of AG Grid and need some help identifying how to configure Row Grouping for my AG Grid in such a way that allows me to see my data group as a timeline/audit history. Was reading through the docs and haven't found an example on there that resembles what I'm looking for.

I have rowData that contains history and the visual expectation is that, the same base columnDefs assigned to the grid are used for the main "group" row (that contains the expand/collapse chevron) and all the expanded rows as well -- so there is no need for a "group column"

Anyone know how I can achieve this outcome? I have also looked at treeData and masterDetail but those didn't work out for me.

P.S. I don't rule out the possibility that I could be misreading/misunderstanding the AG Grid docs so any help there is appreciated.

EDIT: After fiddling around with things further, I believe I'm looking for a combination of two things:

  1. The isRowMaster to enable expand/collapse on the main parent entry.
  2. The groupDisplayType="groupRows" setting (minus the default row group cell because that would be handled by my master row from Point 1 instead)
ag-grid-react ag-grid
1 Answers

After much head banging, turns out the solution was to use treeData. What I ended up creating was treeData containing only one level children.

  • Parent Node (expand/collapse)
    • child 1
    • ...
    • child n

The other key was understanding how to structure your rowData and returning the proper dataPath to feed into the getDataPath handler for treeData. AG Grid expects a flat-list for rowData -- I say this as I was not able to get things working when having a nested tree structure like the following.

const mainRecord = {
  id: "abc"
  foo: 1,
  bar: 2,
  history: [
    { foo: 3, bar: 4 },
    { foo: 5, bar: 6 }
  ]
}

I had to modify my data structure above to return the history items as a flat list alongside the main record that I eventually sent as rowData. The other thing I had to do was add some hierarchy property to my objects to denote its placement in the tree. The hierarchy value is what I supplied to getDataPath

const rowData = [
  { id: "abc", foo: 1, bar: 2, hierarchy: ["abc"] }, // parent
  { foo: 3, bar: 4, hierarchy: ["abc", "34"] }, // child 1
  { foo: 5, bar: 6, hierarchy: ["abc", "56"] }, // child 2
]

After doing the above changes, I was able to get the expected visual outcome I was looking for. I think the big takeaway I got from this is as a first time user of AG Grid is, let it take care of grouping of your data on your behalf (as opposed to doing it yourself via structuring your models with some internal nested children structure)

user_19593230
Related