Expanding Tree

Give rows a subRows array, enable expanding, and tell the table where to find them with getSubRows.

	First Name	Last Name	State	Salary
	Clarabelle	Hamill	Montana	32688
	Ulices	Bogisich	Massachusetts	77138
	Lawson	Runolfsdottir	Wyoming	128846
	Nelson	Hansen	Arkansas	38477
	Sandrine	Rutherford	Tennessee	176061
	Brigitte	Lynch	South Dakota	183021
	Ilene	Howe	Iowa	117308
	Alvin	Braun	Illinois	46425
	Geneva	Mohr	Iowa	51058
	Sherman	Rempel	Nevada	85660

Rows per page 5101520253050100

1-10 of 80

ExpandingTree.svelte

<script lang="ts">
  import { ShadcnSvelteTable, type MRT_ColumnDef } from 'shadcn-svelte-tanstack-table';
  import { type Person, makeTree } from '../data/makeData';

  const columns: MRT_ColumnDef<Person>[] = [
    { accessorKey: 'firstName', header: 'First Name' },
    { accessorKey: 'lastName', header: 'Last Name' },
    { accessorKey: 'state', header: 'State' },
    { accessorKey: 'salary', header: 'Salary' },
  ];

  // each person can have `subRows`
  const data = makeTree();
</script>

<ShadcnSvelteTable
  options={{
    columns,
    data,
    enableExpandAll: true,
    enableExpanding: true,
    getSubRows: (row) => row.subRows,
    initialState: { expanded: true },
  }}
/>