Givet att vi har en datakälla med nästlade rader:

interface Row {
    namn: string;
    land: string;
    nested?: Row[];
}

För att använda expanderade rader i tabellen anger du egenskapens namn när du skapar datamängden:

 import { useDatasetRef } from "@fkui/vue";
 
-const rows = useDatasetRef(data);
+const rows = useDatasetRef(data, "nested");

Tabellen känner av om datamängden har skapats med nästlad data automatiskt.

Följa existerande kolumner

Tabellen presenterar rader med nästlad data som expanderade rader. Som standard följer expanderade rader samma kolumnstruktur som överordnade rader.

Valfritt innehåll

Valfritt innehåll kan presenteras istället för att följa tabellens kolumner genom att använda slotten #expandable. Ditt innehåll placeras i en cell som sträcker sig över hela raden och vad som ligger i datastrukturen behöver inte följa ordinarie rader.

<f-table :rows :columns>
    <template #expandable="{ row }">
        <pre>{{ row }}</pre>
    </template>
</f-table>

Skapa inte ett för komplext expanderat innehåll som till exempel att placera ytterligare expanderbara tabeller inuti.

Relaterat

Expandera rader i tabell

Kod för tabell