Display the parent and child list records using angular SlickGrid

Question

I am new to SlickGrid. I have to display the parent and child list records using SlickGrid. By default slick grid should display the parent records. There should be action to expand and collapse the child records in the parent record. When I click the action in the parent record it should show corresponding child records at below of the parent record.

I have referred this link

Here i shared my code snippet for your reference

gridOption

  {
   autoResize: {
    containerId: "demo-container",
    sidePadding: 10,
  },
  enableAutoSizeColumns: true,
  enableAutoResize: true,
  enableExport: true,
  enableFiltering: true,
  enableTreeData: true, 
  treeDataOptions: {
    columnId: 'productname',
   levelPropName: 'indent',
    parentPropName: 'pfm123'
  },
 
  headerRowHeight: 45,
  rowHeight: 40,
  contextMenu: {
    iconCollapseAllGroupsCommand: "mdi mdi-arrow-collapse",
    iconExpandAllGroupsCommand: "mdi mdi-arrow-expand",
    iconClearGroupingCommand: "mdi mdi-close",
    iconCopyCellValueCommand: "mdi mdi-content-copy",
    iconExportCsvCommand: "mdi mdi-download",
    iconExportExcelCommand:
      "mdi mdi-file-excel-outline text-success has-text-success",
    iconExportTextDelimitedCommand: "mdi mdi-download",
  },
  gridMenu: {
    iconCssClass: "mdi mdi-menu",
    iconClearAllFiltersCommand: "mdi mdi-filter-remove-outline",
    iconClearAllSortingCommand: "mdi mdi-swap-vertical text-danger",
    iconExportCsvCommand: "mdi mdi-download",
    iconExportExcelCommand:
      "mdi mdi-file-excel-outline text-success has-text-success",
    iconExportTextDelimitedCommand: "mdi mdi-download",
    iconRefreshDatasetCommand: "mdi mdi-sync",
    iconToggleFilterCommand: "mdi mdi-flip-vertical",
    iconTogglePreHeaderCommand: "mdi mdi-flip-vertical",
  },
  headerMenu: {
    iconClearFilterCommand: "mdi mdi mdi-filter-remove-outline text-danger",
    iconClearSortCommand: "mdi mdi-swap-vertical",
    iconSortAscCommand: "mdi mdi-sort-ascending",
    iconSortDescCommand: "mdi mdi-flip-v mdi-sort-descending",
    iconColumnHideCommand: "mdi mdi-close",
  },
   };}

columnDefinition

[
  {
    id: 'customername',
    name: 'Customer Name',
    field: 'customername',
    width: 220,
    cssClass: 'cell-title',
    filterable: true,
    sortable: true,
    queryFieldSorter: 'id',
    type: FieldType.string,
    formatter: Formatters.tree
  },

  { 
     id: 'orderamount',
     name: 'order Amount',
     field: 'orderamount',
     minWidth: 90,
     filterable: true },
     {
      id: 'orderdate',
      name: 'Orderdate',
      field: 'orderdate',
      minWidth: 60,
      type: FieldType.dateIso,
      filterable: true, sortable: true,
      filter: { model: Filters.compoundDate },
      formatter: Formatters.dateIso,
      },
        {
      id: 'productname',
      name: 'Product Name',
      field: 'productname',
      width: 220,
      cssClass: 'cell-title',
      filterable: true,
      sortable: true,
      queryFieldSorter: 'id',
      type: FieldType.string

      },

     { 
     id: 'price',
     name: 'Price',
     field: 'price',
     minWidth: 90,
     filterable: true 
      },
      { 
      id: 'quantity',
      name: 'Quantity',
      field: 'quantity',
      minWidth: 90,
      filterable: true 
}];

DataSet

 [
  {
    id: 0,
    indent: 0,
    customername: "customer1",
    orderamount: "50300",
    orderdate: "dec15",
  },
  {
    id: 1,
    indent: 1,
    pfm123: 0,
    productname: "Laptop",
    quantity: "1",
    price: "50000",
  },
  {
    id: 5,
    indent: 2,
    pfm123: 1,
    productname: "Keyboard",
    quantity: "1",
    price: "300",
  },
  {
    id: 2,
    indent: 0,
    customername: "customer2",
    orderamount: "10500",
    orderdate: "dec16",
  },
  {
    id: 3,
    indent: 1,
    pfm123: 2,
    productname: "Mobile",

    price: "10000",
    quantity: "1",
  },
  {
    id: 4,
    indent: 1,
    pfm123: 2,
    productname: "HeadPhone",
    quantity: "1",
    price: "500",
  },
];

Current output

Expected Output