Vitral 0.2
Dados

DataTable

A tabela pequena: linhas já em mãos, ordenadas, zebradas e em tamanhos, com cabeçalho fixo. Quando precisar de mais, o DataGrid assume.

Testado com WAI-ARIA

Importação

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

Padrão

As linhas na ordem em que vieram. Nada mais está ligado.

VersionNamePublished
0.4.0Spreadsheet2026-08-14
0.3.2Taskboard2026-06-02
0.3.0Schedule2026-04-21
0.2.1Chart2026-02-09
0.2.0Editor2025-12-18
0.1.0Foundations2025-10-30
<script setup lang="ts">import { DataTable } from '@vitral/vue'; const releases = [    { version: '0.4.0', name: 'Spreadsheet', published: '2026-08-14', downloads: 12840 },    { version: '0.3.2', name: 'Taskboard', published: '2026-06-02', downloads: 9310 },    { version: '0.3.0', name: 'Schedule', published: '2026-04-21', downloads: 24105 },    { version: '0.2.1', name: 'Chart', published: '2026-02-09', downloads: 31760 },    { version: '0.2.0', name: 'Editor', published: '2025-12-18', downloads: 8422 },    { version: '0.1.0', name: 'Foundations', published: '2025-10-30', downloads: 4190 }];</script> <template>    <DataTable :value="releases" data-key="version" aria-label="Releases">        <DataTable.Column field="version" header="Version" />        <DataTable.Column field="name" header="Name" />        <DataTable.Column field="published" header="Published" />    </DataTable></template>

Ordenável

Clique num cabeçalho para ordenar por ele: crescente, depois decrescente, depois de volta à ordem em que as linhas chegaram. Uma coluna por vez — ordenar por várias colunas é coisa do DataGrid.

0.4.0SpreadsheetAug 14, 202612,840
0.3.2TaskboardJun 2, 20269,310
0.3.0ScheduleApr 21, 202624,105
0.2.1ChartFeb 9, 202631,760
0.2.0EditorDec 18, 20258,422
0.1.0FoundationsOct 30, 20254,190
<script setup lang="ts">import { DataTable } from '@vitral/vue'; interface Release {    version: string;    name: string;    published: string;    downloads: number;} const releases: Release[] = [    { version: '0.4.0', name: 'Spreadsheet', published: '2026-08-14', downloads: 12840 },    { version: '0.3.2', name: 'Taskboard', published: '2026-06-02', downloads: 9310 },    { version: '0.3.0', name: 'Schedule', published: '2026-04-21', downloads: 24105 },    { version: '0.2.1', name: 'Chart', published: '2026-02-09', downloads: 31760 },    { version: '0.2.0', name: 'Editor', published: '2025-12-18', downloads: 8422 },    { version: '0.1.0', name: 'Foundations', published: '2025-10-30', downloads: 4190 }]; const number = new Intl.NumberFormat('en-US');const date = (iso: string) => new Date(`${iso}T00:00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });</script> <template>    <DataTable :value="releases" data-key="version" striped-rows row-hover aria-label="Releases by column">        <DataTable.Column field="version" header="Version" sortable />        <DataTable.Column field="name" header="Name" sortable />        <DataTable.Column field="published" header="Published" sortable>            <template #body="{ data }">{{ date((data as Release).published) }}</template>        </DataTable.Column>        <DataTable.Column field="downloads" header="Downloads" sortable align="right">            <template #body="{ data }">{{ number.format((data as Release).downloads) }}</template>        </DataTable.Column>    </DataTable></template>

Linhas de grade, tamanhos e um cabeçalho seu

Uma linha entre as colunas, além da que há entre as linhas, células mais justas ou mais folgadas, e o cabeçalho e o rodapé como conteúdo que você escreve.

Recent releases
VersionNameDownloads
0.4.0Spreadsheet12,840
0.3.2Taskboard9,310
0.3.0Schedule24,105
0.2.1Chart31,760
6 releases in all
<script setup lang="ts">import { DataTable } from '@vitral/vue'; interface Release {    version: string;    name: string;    published: string;    downloads: number;} const releases: Release[] = [    { version: '0.4.0', name: 'Spreadsheet', published: '2026-08-14', downloads: 12840 },    { version: '0.3.2', name: 'Taskboard', published: '2026-06-02', downloads: 9310 },    { version: '0.3.0', name: 'Schedule', published: '2026-04-21', downloads: 24105 },    { version: '0.2.1', name: 'Chart', published: '2026-02-09', downloads: 31760 },    { version: '0.2.0', name: 'Editor', published: '2025-12-18', downloads: 8422 },    { version: '0.1.0', name: 'Foundations', published: '2025-10-30', downloads: 4190 }]; const number = new Intl.NumberFormat('en-US');</script> <template>    <DataTable :value="releases.slice(0, 4)" data-key="version" show-gridlines size="small" aria-label="Recent releases">        <template #header><strong>Recent releases</strong></template>        <DataTable.Column field="version" header="Version" />        <DataTable.Column field="name" header="Name" />        <DataTable.Column field="downloads" header="Downloads" align="right">            <template #body="{ data }">{{ number.format((data as Release).downloads) }}</template>        </DataTable.Column>        <template #footer>{{ releases.length }} releases in all</template>    </DataTable></template>

Rolagem própria

Com uma altura definida, a tabela rola dentro dela e o cabeçalho fica parado. O cabeçalho fixo recebe um fundo opaco, senão as linhas apareceriam através dele.

Published
0.4.0Spreadsheet2026-08-14
0.3.2Taskboard2026-06-02
0.3.0Schedule2026-04-21
0.2.1Chart2026-02-09
0.2.0Editor2025-12-18
0.1.0Foundations2025-10-30
<script setup lang="ts">import { DataTable } from '@vitral/vue'; const releases = [    { version: '0.4.0', name: 'Spreadsheet', published: '2026-08-14', downloads: 12840 },    { version: '0.3.2', name: 'Taskboard', published: '2026-06-02', downloads: 9310 },    { version: '0.3.0', name: 'Schedule', published: '2026-04-21', downloads: 24105 },    { version: '0.2.1', name: 'Chart', published: '2026-02-09', downloads: 31760 },    { version: '0.2.0', name: 'Editor', published: '2025-12-18', downloads: 8422 },    { version: '0.1.0', name: 'Foundations', published: '2025-10-30', downloads: 4190 }];</script> <template>    <DataTable :value="releases" data-key="version" scroll-height="11rem" striped-rows aria-label="Releases, scrolling">        <DataTable.Column field="version" header="Version" sortable />        <DataTable.Column field="name" header="Name" sortable />        <DataTable.Column field="published" header="Published" />    </DataTable></template>

Nada para mostrar

Sem linhas, uma única célula ocupa a tabela inteira e avisa. `empty` — o slot ou `<DataTable.Empty>` — substitui as palavras.

VersionName
No releases yet. The first one is on its way.
<script setup lang="ts">import { DataTable } from '@vitral/vue';</script> <template>    <DataTable :value="[]" aria-label="No releases">        <DataTable.Column field="version" header="Version" />        <DataTable.Column field="name" header="Name" />        <DataTable.Empty>No releases yet. The first one is on its way.</DataTable.Empty>    </DataTable></template>

API

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

Props

NomeTipoDescrição
valuereadonly unknown[]As linhas, já em mãos. Esta tabela não busca, pagina nem filtra.
dataKeystringO campo que identifica uma linha, usado como sua chave. Na falta dele, a posição.
captionstringMostrado acima do cabeçalho, para leitores de tela; use o slot `header` para algo visível.
stripedRowsbooleanUma linha sim, outra não, com fundo tingido.
showGridlinesbooleanUma linha entre as colunas além de entre as linhas.
rowHoverbooleanAs linhas se destacam sob o ponteiro. Vale a pena quando uma linha é um link ou abre algo.
size'small' | 'large'—
scrollHeightstringDá à tabela uma área rolável própria com esta altura e fixa o cabeçalho no topo dela.
emptyMessagestringO que dizer quando não há linhas; o slot `empty` tem prioridade.

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

Slots

NomeProps do slotDescrição
default() => VNode[]Os `<Column>`s. Qualquer outro conteúdo aqui é ignorado.
header() => VNode[]—
footer() => VNode[]—
empty() => VNode[]—