Nested data for Tree Data

Question

I'm trying to work with ag-grid's data format while not compromising the data but can't seem to be able to do both.

I have data structure like this

const data = {

singleParent: [
  {
    name: "Karie",
    gender: "f",
    children: [
      { name: "Emily", gender: "f" },
      { name: "John", gender: "m" },
    ],
  },
  {
    name: "Kade",
    gender: "f",
    children: [
      { name: "sam", gender: "f" },
      { name: "rick", gender: "m" },
    ],
  },
],
couple: [
{
    name: "Jack & Jade",
    gender: "f",
    children: [
      { name: "mike", gender: "f" },
      { name: "loyd", gender: "m" },
    ],
  },
  {
    name: "Taylor & Taylor",
    gender: "f",
    children: [
      { name: "sophie", gender: "f" },
      { name: "adam", gender: "m" },
    ],
  },

]

};

In term of code(codesandbox below):

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState(getData());
  const [columnDefs, setColumnDefs] = useState([
    {
      field: "name"
    },
    {
      field: "gender"
    }
  ]);
  const defaultColDef = useMemo(() => {
    return {
      flex: 1,
      filter: true,
      floatingFilter: true,
      sortable: true,
      resizable: true
    };
  }, []);


  // TODO, work around
  const getDataPath = useMemo(() => {
    return (data) => {
      console.log(data);
      return [data.path];
    };
  }, []);

  const getRowId = useMemo(() => {
    return (params) => {
      return params.data.id;
    };
  }, []);

  return (
    <div style={containerStyle}>
      <div className="example-wrapper">
        <div style={gridStyle} className="ag-theme-alpine">
          <AgGridReact
            rowData={rowData.singleParent}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            treeData={true}
            animateRows={true}
            getRowId={getRowId}
            getDataPath={getDataPath}
          />
        </div>
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>
);

But seems like getDataPath is mandatory so I thought of dynamically adding the path to each and make it be their name and the child would look like path: [parentname/childname]

In the end, single parent is one row and couple is another row. You click single parent row and it dropdown two parent row and then you click Karie and it shows the two children row. So a three level. I just started using ag grid and I'm not sure how to do two complete different row to begin with but I can't seem to be able to achieve a way where I don't have to completely change this data which I'm dependent on.

here is a codesandbox: https://codesandbox.io/s/ag-grid-tree-data-forked-hzs2yj?file=/src/index.js

Thanks for any help!

Answer 1

I understand you get the data in a certain format, and that format can't be changed?

In order to do what you want, you'll need to provide ag-grid with the data in a different format. It just requires the hierarchy in the form

{
      orgHierarchy: ["Single Parent", "Karie"],
      gender: "F"
    },
    {
      orgHierarchy: ["Single Parent", "Karie", "Emily"],
      gender: "F"
    },
    {
      orgHierarchy: ["Single Parent", "Karie", "John"],
      gender: "M"
    },
    {
      orgHierarchy: ["Single Parent", "Kade"],
      gender: "M"
    },
    {
      orgHierarchy: ["Single Parent", "Kade", "Sam"],
      gender: "M"
    },
    {
      orgHierarchy: ["Single Parent", "Kade", "Rick"],
      gender: "M"
    },
...etc

I'm afraid there is no getting away from that.

However you can "massage" the data you receive in order to pass it to ag-grid - that should be simple to do. It doesn't even have to be in hierarchy order, any order will do

Take a look at this sandbox https://codesandbox.io/s/ag-grid-packages-forked-hpwnyd?file=/public/data.js:43-541 to get the result

Any problems please comment