Finns det ett sätt att lägga till underordnade rader i datatabeller med Vue JavaScript och Typescript?

Jag gick igenom dokumentationen Vue Datatables Vue Datatable Component. Jag lyckades implementera datatable med TypeScript och Vue.js. Nedan är Datatable-komponenten:

<template>

<DataTable 
:data="data"
 class="display" width="100%">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
  </thead>
</DataTable>

<style scoped>
@import 'datatables.net-dt';
</style>

    <script lang="ts">
import { defineComponent} from "vue";
import DataTable from 'datatables.net-vue3';
import DataTablesLib from 'datatables.net';
DataTable.use(DataTablesLib);

const data = [
  ['Pistone', 'Sanjama', '[email '],
  ['Timothy', 'Banda','[email '],
  ['Blessings', 'Chidambe', '[email ']
];

export default defineComponent({
name: "DataRequestDatatable",
components: {
    DataTable,
},
data(){
    return { data }
}
});
</script>

Jag har framgångsrikt visat tabellen och lagt till kolumner etc. och de har ingen dokumentation om hur man gör detta. Har någon en idé om hur jag kan implementera underordnade rader i denna tabell med hjälp av Vue och Typescript?

Bilden nedan visar barnraderna i aktion: