Vitral 0.2
Dados

TreeTable

Linhas que se expandem em linhas, com ordenação que preserva o aninhamento e um filtro que mantém os ramos que levam às correspondências.

Testado com WAI-ARIA

Importação

main.ts
import { TreeTable } from '@vitral/vue';

Básico

Size
Applications
300 MBFolder
editor.app
75 MBApplication
Selection: none
<script setup lang="ts">import { Column, TreeTable, type TreeNode } from '@vitral/vue';import { ref } from 'vue'; const files: TreeNode[] = [    {        key: 'apps',        data: { name: 'Applications', size: '300 MB', type: 'Folder' },        children: [            { key: 'vue', data: { name: 'Vue', size: '25 MB', type: 'Folder' }, children: [{ key: 'vue-app', data: { name: 'vue.app', size: '10 MB', type: 'Application' } }, { key: 'vue-cli', data: { name: 'cli', size: '15 MB', type: 'Application' } }] },            { key: 'editor', data: { name: 'editor.app', size: '75 MB', type: 'Application' } }        ]    },    {        key: 'docs',        data: { name: 'Documents', size: '75 KB', type: 'Folder' },        children: [            { key: 'work', data: { name: 'Work', size: '55 KB', type: 'Folder' }, children: [{ key: 'expenses', data: { name: 'Expenses.doc', size: '30 KB', type: 'Document' } }, { key: 'resume', data: { name: 'Resume.doc', size: '25 KB', type: 'Document' } }] },            { key: 'invoices', data: { name: 'Invoices.txt', size: '20 KB', type: 'Text' } }        ]    },    { key: 'music', data: { name: 'Música', size: '1.2 GB', type: 'Folder' }, children: [{ key: 'track', data: { name: 'Samba.mp3', size: '6 MB', type: 'Audio' } }] }]; const expanded = ref<Record<string, boolean>>({ apps: true });const selection = ref({});</script> <template>    <TreeTable v-model:expanded-keys="expanded" v-model:selection-keys="selection" :value="files" selection-mode="checkbox" aria-label="Files">        <Column field="name" header="Name" expander sortable />        <Column field="size" header="Size" align="right" />        <Column field="type" header="Type" sortable />    </TreeTable>    <small style="color: var(--vt-text-muted-color)">Selection: {{ Object.keys(selection).join(', ') || 'none' }}</small></template>

Filtro e páginas

NameType
<script setup lang="ts">import { Column, InputText, TreeTable, type TreeNode } from '@vitral/vue';import { ref } from 'vue'; const files: TreeNode[] = [    {        key: 'apps',        data: { name: 'Applications', size: '300 MB', type: 'Folder' },        children: [            { key: 'vue', data: { name: 'Vue', size: '25 MB', type: 'Folder' }, children: [{ key: 'vue-app', data: { name: 'vue.app', size: '10 MB', type: 'Application' } }, { key: 'vue-cli', data: { name: 'cli', size: '15 MB', type: 'Application' } }] },            { key: 'editor', data: { name: 'editor.app', size: '75 MB', type: 'Application' } }        ]    },    {        key: 'docs',        data: { name: 'Documents', size: '75 KB', type: 'Folder' },        children: [            { key: 'work', data: { name: 'Work', size: '55 KB', type: 'Folder' }, children: [{ key: 'expenses', data: { name: 'Expenses.doc', size: '30 KB', type: 'Document' } }, { key: 'resume', data: { name: 'Resume.doc', size: '25 KB', type: 'Document' } }] },            { key: 'invoices', data: { name: 'Invoices.txt', size: '20 KB', type: 'Text' } }        ]    },    { key: 'music', data: { name: 'Música', size: '1.2 GB', type: 'Folder' }, children: [{ key: 'track', data: { name: 'Samba.mp3', size: '6 MB', type: 'Audio' } }] }]; const query = ref('');</script> <template>    <InputText v-model="query" placeholder="Filter by name" aria-label="Filter by name" style="align-self: flex-start" />    <TreeTable :value="files" :global-filter="query" :global-filter-fields="['name']" paginator :rows="2" striped-rows show-gridlines selection-mode="single" aria-label="Files, filtered">        <Column field="name" header="Name" expander />        <Column field="type" header="Type" />    </TreeTable></template>

API

Lido de packages/vue/src/components/TreeTable/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
valueTreeNodeLike[]As linhas, como nós de árvore cujo `data` as colunas leem.
selectionMode'single' | 'multiple' | 'checkbox'—
sortFieldstring | nullOrdena por este campo de `data`…
sortOrder1 | -1 | null…crescente (1) ou decrescente (-1).
removableSortbooleanUm terceiro clique numa coluna ordenada a tira da ordenação.
globalFilterstringMantém as linhas (e os ramos que levam a elas) cujos `globalFilterFields` contêm este texto.
globalFilterFieldsstring[]Os campos de `data` em que `globalFilter` busca.
paginatorbooleanPagina as linhas de primeiro nível.
rowsnumberLinhas de primeiro nível por página. O padrão é 10.
rowsPerPageOptionsnumber[]—
loadingboolean—
emptyMessagestring—
stripedRowsboolean—
showGridlinesboolean—
sizeSize—
scrollHeightstringUma altura CSS; o cabeçalho fica visível.
tableStylestring | Record<string, string>—
captionstringDá nome à tabela para as tecnologias assistivas. Ou nomeie-a com `aria-label`.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
node-expandnode: TreeNodeLike—
node-collapsenode: TreeNodeLike—
node-selectnode: TreeNodeLike—
node-unselectnode: TreeNodeLike—
sortevent: { sortField: string | null; sortOrder: 1 | -1 | null }—
pageevent: { page: number; first: number; rows: number; pageCount: number }—

Slots

NomeProps do slotDescrição
default—Os `<Column>`s, o mesmo componente que o DataGrid lê. `expander` marca a coluna com o botão de expandir.
header——
footer——
empty——
loadingicon——