برای اینکار می توانیم از قابلیت parentChildData در کامپوننت material-table  کنیم.با استفاده از این ویژگی زیرمجموعه های هر سطر زیر آن سطر نمایش داده می شود.

function BasicTreeData() {
  return (
    <MaterialTable
      title=" Tree Data "
      data={[
        {
          id: 1,
          name: 'a',
          surname: 'Baran',
          sex: 'Male',
          type: 'adult',
        },
        {
          id: 2,
          name: 'b',
          surname: 'Baran',
          sex: 'Female',
          type: 'adult',
          parentId: 1,
        },
        {
          id: 3,
          name: 'c',
          surname: 'Baran',
          sex: 'Female',
          type: 'child',
          parentId: 1,
        },
        {
          id: 4,
          name: 'd',
          surname: 'Baran',
          sex: 'Female',
          type: 'child',
          parentId: 3,
        },
        {
          id: 5,
          name: 'e',
          surname: 'Baran',
          sex: 'Female',
          type: 'child',
        },
        {
          id: 6,
          name: 'f',
          surname: 'Baran',
          sex: 'Female',
          type: 'child',
          parentId: 5,
        },
      ]}
      columns={[
        { title: 'name', field: 'name' },
        { title: 'lastname', field: 'lastname' },
        { title: 'sex', field: 'sex' },
        { title: 'type', field: 'type', removable: false },
      
      ]}
      parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
     
    />
  )
}

متد parentChildData پدر هر رکورد را پیدا کرده و به آن مرتبط می کند.