Data

DataGrid

A data table that sorts, filters, pages and selects, locally or on your server, with columns the reader can resize, reorder, pin and hide.

WAI-ARIA tested

Import

main.ts

import { DataGrid } from '@vitral/vue';

Sort, filter, page and select

Click a header to sort, type under it to filter (accents are ignored: “sao” finds São Paulo), search every column at once from the header, and tick rows.

People0 selected

People


Ximena Diallo	São Paulo · Brazil	Sep 15, 2020	€4,586.25	Offline
Noémie Nowak	Zürich · Switzerland	Oct 7, 2023	€5,484.63	Offline
Bruno Nowak	Kraków · Poland	Dec 23, 2022	€456.73	Away
Quentin Gómez	Tōkyō · Japan	Nov 26, 2023	€5,444.92	Active
Hanna Mendes	Reykjavík · Iceland	Jun 9, 2021	€16,745.23	Away
Wiktor Lima	Kraków · Poland	Jul 15, 2020	€6,428.86	Active
Bruno Rocha	Tōkyō · Japan	Aug 26, 2021	€8,297.10	Active
Gustavo Rocha	Québec · Canada	Apr 15, 2021	€10,280.87	Active

1<script setup lang="ts">2import { Column, DataGrid, Icon, InputText, Select, useVitral } from '@vitral/vue';3import { computed, ref } from 'vue';4 5type Status = 'Active' | 'Away' | 'Offline' | 'Blocked';6 7interface Person {8    id: number;9    name: string;10    city: string;11    country: string;12    joined: Date;13    balance: number;14    status: Status;15}16 17// A small deterministic generator, so the demo shows the same people every time.18let seed = 7;19const random = () => ((seed = (seed * 16807) % 2147483647) - 1) / 2147483646;20const pick = <T,>(list: readonly T[]) => list[Math.floor(random() * list.length)]!;21 22const firstNames = ['Ana', 'Bruno', 'Carla', 'Diego', 'Élise', 'Fatou', 'Gustavo', 'Hanna', 'Iñaki', 'João', 'Kenji', 'Lucía', 'Mateus', 'Noémie', 'Oskar', 'Paula', 'Quentin', 'Raquel', 'Søren', 'Tomás', 'Valéria', 'Wiktor', 'Ximena', 'Zoë'];23const lastNames = ['Souza', 'Lima', 'Mendes', 'Ferreira', 'Martin', 'Diallo', 'Rocha', 'Müller', 'Etxeberria', 'Pereira', 'Sato', 'Gómez', 'Nowak', 'Dubois', 'Jónsson', 'Costa', 'Fontaine', 'Álvarez'];24const places: [string, string][] = [25    ['São Paulo', 'Brazil'],26    ['Recife', 'Brazil'],27    ['Florianópolis', 'Brazil'],28    ['Lisboa', 'Portugal'],29    ['Évora', 'Portugal'],30    ['Montréal', 'Canada'],31    ['Québec', 'Canada'],32    ['München', 'Germany'],33    ['Köln', 'Germany'],34    ['Córdoba', 'Argentina'],35    ['Bogotá', 'Colombia'],36    ['Kraków', 'Poland'],37    ['Zürich', 'Switzerland'],38    ['Reykjavík', 'Iceland'],39    ['Tōkyō', 'Japan'],40    ['Málaga', 'Spain']41];42const statuses: Status[] = ['Active', 'Active', 'Active', 'Away', 'Offline', 'Blocked'];43 44const people: Person[] = Array.from({ length: 64 }, (_, i) => {45    const [city, country] = pick(places);46    return {47        id: i + 1,48        name: `${pick(firstNames)} ${pick(lastNames)}`,49        city,50        country,51        joined: new Date(2019 + Math.floor(random() * 7), Math.floor(random() * 12), 1 + Math.floor(random() * 28)),52        balance: Math.round(random() * 2_000_000) / 100 - 2000,53        status: pick(statuses)54    };55});56 57const { config } = useVitral();58const money = computed(() => new Intl.NumberFormat(config.locale.code, { style: 'currency', currency: 'EUR' }));59const day = computed(() => new Intl.DateTimeFormat(config.locale.code, { dateStyle: 'medium' }));60const statusOptions: Status[] = ['Active', 'Away', 'Offline', 'Blocked'];61 62const filters = ref({63    global: { value: null as string | null, matchMode: 'contains' },64    name: { value: null as string | null, matchMode: 'contains' },65    city: { value: null as string | null, matchMode: 'startsWith' },66    status: { value: null as Status | null, matchMode: 'equals' }67});68const selected = ref<Person[]>([]);69</script>70 71<template>72    <DataGrid73        v-model:filters="filters"74        v-model:selection="selected"75        :value="people"76        data-key="id"77        caption="People"78        filter-display="row"79        :global-filter-fields="['name', 'city', 'country']"80        paginator81        :rows="8"82        :rows-per-page-options="[8, 16, 32]"83        paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"84        removable-sort85        striped-rows86        class="demo-table"87    >88        <template #header>89            <div class="demo-table-bar">90                <strong>People</strong>91                <small style="color: var(--vt-text-muted-color)">{{ selected.length }} selected</small>92                <InputText v-model="filters.global.value" placeholder="Search people" aria-label="Search people" size="small" clearable class="demo-table-search">93                    <template #prefix><Icon icon="search" /></template>94                </InputText>95            </div>96        </template>97        <Column selection-mode="multiple" />98        <Column field="name" header="Name" sortable filter-placeholder="Name" />99        <Column field="city" header="City" sortable filter-placeholder="Starts with">100            <template #body="{ data }">101                {{ data.city }} <span class="demo-muted">· {{ data.country }}</span>102            </template>103        </Column>104        <Column field="joined" header="Joined" sortable>105            <template #body="{ data }">{{ day.format(data.joined) }}</template>106        </Column>107        <Column field="balance" header="Balance" sortable align="right">108            <template #body="{ data }">109                <span :class="{ 'demo-negative': data.balance < 0 }">{{ money.format(data.balance) }}</span>110            </template>111        </Column>112        <Column field="status" header="Status" sortable>113            <template #body="{ data }">114                <span class="demo-status"><span :class="['demo-dot', `demo-dot-${data.status.toLowerCase()}`]" aria-hidden="true" />{{ data.status }}</span>115            </template>116            <template #filter="{ filterModel }">117                <Select v-if="filterModel && 'value' in filterModel" v-model="filterModel.value" :options="statusOptions" placeholder="Any" show-clear size="small" aria-label="Filter Status" fluid />118            </template>119        </Column>120    </DataGrid>121</template>122 123<style scoped>124.demo-table {125    width: 100%;126}127 128.demo-table-bar {129    display: flex;130    align-items: center;131    gap: 0.75rem;132    flex-wrap: wrap;133}134 135.demo-table-search {136    margin-inline-start: auto;137    width: 16rem;138}139 140.demo-muted {141    color: var(--vt-text-muted-color);142}143 144.demo-negative {145    color: var(--vt-danger-color);146}147 148.demo-status {149    display: inline-flex;150    align-items: center;151    gap: 0.5rem;152}153 154.demo-dot {155    width: 0.5rem;156    height: 0.5rem;157    border-radius: 999px;158    background: var(--vt-text-muted-color);159}160 161.demo-dot-active {162    background: var(--vt-success-color);163}164 165.demo-dot-away {166    background: var(--vt-warn-color);167}168 169.demo-dot-blocked {170    background: var(--vt-danger-color);171}172</style>

Multiple sort, single selection, grid lines

Sorted by country, then by balance, highest first. Ctrl-click (⌘-click) a header to add it to the sort. Click a row, or focus the rows and use the arrows and Space, to choose one. The header stays in view while the body scrolls.


Diego Ferreira	Argentina	Córdoba	€15,492.29
Noémie Fontaine	Argentina	Córdoba	€9,472.17
Ximena Ferreira	Argentina	Córdoba	€2,865.18
Bruno Martin	Brazil	Florianópolis	€17,876.33
Élise Dubois	Brazil	São Paulo	€14,269.79
Bruno Souza	Brazil	Florianópolis	€13,363.03
Bruno Lima	Brazil	São Paulo	€12,562.40
Ana Gómez	Brazil	Recife	€11,750.51
Fatou Ferreira	Brazil	São Paulo	€10,543.41
Oskar Martin	Brazil	São Paulo	€10,400.34
Ximena Diallo	Brazil	São Paulo	€4,586.25
Bruno Rocha	Canada	Montréal	€17,103.69
João Etxeberria	Canada	Montréal	€11,302.35
Wiktor Jónsson	Canada	Québec	€10,857.06
Gustavo Rocha	Canada	Québec	€10,280.87
Élise Sato	Canada	Québec	€4,759.90
Hanna Souza	Canada	Québec	€2,684.86
Ximena Souza	Colombia	Bogotá	€9,305.62
Valéria Fontaine	Colombia	Bogotá	€7,948.90
Ana Jónsson	Colombia	Bogotá	€4,625.47
Ana Lima	Germany	München	€15,860.46
Kenji Costa	Germany	Köln	€11,732.89
Hanna Martin	Germany	München	€7,969.50
Mateus Dubois	Germany	Köln	€3,976.73
João Etxeberria	Germany	Köln	€3,947.82
Carla Lima	Germany	München	€2,002.67
Hanna Mendes	Iceland	Reykjavík	€16,745.23
Diego Costa	Iceland	Reykjavík	€13,914.59
Fatou Fontaine	Iceland	Reykjavík	€13,839.42
Wiktor Fontaine	Iceland	Reykjavík	€13,239.60
Tomás Dubois	Iceland	Reykjavík	€12,242.07
Tomás Ferreira	Iceland	Reykjavík	€8,764.27
Bruno Rocha	Japan	Tōkyō	€8,297.10
Kenji Costa	Japan	Tōkyō	€8,098.99
Carla Diallo	Japan	Tōkyō	€5,945.52
Quentin Gómez	Japan	Tōkyō	€5,444.92
João Martin	Japan	Tōkyō	€5,028.76
Valéria Álvarez	Japan	Tōkyō	€2,964.27
Wiktor Costa	Japan	Tōkyō	-€1,790.27
Fatou Rocha	Japan	Tōkyō	-€1,940.60
Iñaki Dubois	Poland	Kraków	€17,709.64
Wiktor Costa	Poland	Kraków	€17,144.37
João Gómez	Poland	Kraków	€12,230.50
Wiktor Lima	Poland	Kraków	€6,428.86
Wiktor Ferreira	Poland	Kraków	€1,503.44
Wiktor Costa	Poland	Kraków	€504.85
Bruno Nowak	Poland	Kraków	€456.73
Wiktor Souza	Poland	Kraków	-€303.08
Fatou Ferreira	Portugal	Évora	€12,014.06
Fatou Jónsson	Portugal	Lisboa	€10,703.89
Ana Etxeberria	Portugal	Lisboa	€7,618.88
Raquel Diallo	Portugal	Lisboa	-€493.76
Bruno Lima	Spain	Málaga	€17,131.64
Noémie Sato	Spain	Málaga	€9,951.09
João Nowak	Spain	Málaga	€4,612.00
Fatou Gómez	Spain	Málaga	€755.90
Kenji Nowak	Spain	Málaga	-€776.43
Carla Fontaine	Switzerland	Zürich	€15,325.86
Ximena Etxeberria	Switzerland	Zürich	€11,252.24
Søren Müller	Switzerland	Zürich	€11,236.83
Élise Lima	Switzerland	Zürich	€8,895.92
Noémie Nowak	Switzerland	Zürich	€5,484.63
Zoë Mendes	Switzerland	Zürich	€2,202.54
Wiktor Lima	Switzerland	Zürich	€1,071.43

1<script setup lang="ts">2import { Column, DataGrid, useVitral } from '@vitral/vue';3import { computed, ref } from 'vue';4 5type Status = 'Active' | 'Away' | 'Offline' | 'Blocked';6 7interface Person {8    id: number;9    name: string;10    city: string;11    country: string;12    joined: Date;13    balance: number;14    status: Status;15}16 17// A small deterministic generator, so the demo shows the same people every time.18let seed = 7;19const random = () => ((seed = (seed * 16807) % 2147483647) - 1) / 2147483646;20const pick = <T,>(list: readonly T[]) => list[Math.floor(random() * list.length)]!;21 22const firstNames = ['Ana', 'Bruno', 'Carla', 'Diego', 'Élise', 'Fatou', 'Gustavo', 'Hanna', 'Iñaki', 'João', 'Kenji', 'Lucía', 'Mateus', 'Noémie', 'Oskar', 'Paula', 'Quentin', 'Raquel', 'Søren', 'Tomás', 'Valéria', 'Wiktor', 'Ximena', 'Zoë'];23const lastNames = ['Souza', 'Lima', 'Mendes', 'Ferreira', 'Martin', 'Diallo', 'Rocha', 'Müller', 'Etxeberria', 'Pereira', 'Sato', 'Gómez', 'Nowak', 'Dubois', 'Jónsson', 'Costa', 'Fontaine', 'Álvarez'];24const places: [string, string][] = [25    ['São Paulo', 'Brazil'],26    ['Recife', 'Brazil'],27    ['Florianópolis', 'Brazil'],28    ['Lisboa', 'Portugal'],29    ['Évora', 'Portugal'],30    ['Montréal', 'Canada'],31    ['Québec', 'Canada'],32    ['München', 'Germany'],33    ['Köln', 'Germany'],34    ['Córdoba', 'Argentina'],35    ['Bogotá', 'Colombia'],36    ['Kraków', 'Poland'],37    ['Zürich', 'Switzerland'],38    ['Reykjavík', 'Iceland'],39    ['Tōkyō', 'Japan'],40    ['Málaga', 'Spain']41];42const statuses: Status[] = ['Active', 'Active', 'Active', 'Away', 'Offline', 'Blocked'];43 44const people: Person[] = Array.from({ length: 64 }, (_, i) => {45    const [city, country] = pick(places);46    return {47        id: i + 1,48        name: `${pick(firstNames)} ${pick(lastNames)}`,49        city,50        country,51        joined: new Date(2019 + Math.floor(random() * 7), Math.floor(random() * 12), 1 + Math.floor(random() * 28)),52        balance: Math.round(random() * 2_000_000) / 100 - 2000,53        status: pick(statuses)54    };55});56 57const { config } = useVitral();58const money = computed(() => new Intl.NumberFormat(config.locale.code, { style: 'currency', currency: 'EUR' }));59 60const multiSortMeta = ref([61    { field: 'country', order: 1 as const },62    { field: 'balance', order: -1 as const }63]);64const chosen = ref<Person | null>(null);65</script>66 67<template>68    <DataGrid69        v-model:multi-sort-meta="multiSortMeta"70        v-model:selection="chosen"71        :value="people"72        data-key="id"73        aria-label="People by country"74        sort-mode="multiple"75        selection-mode="single"76        size="small"77        show-gridlines78        scrollable79        scroll-height="320px"80        class="demo-table"81    >82        <Column field="name" header="Name" sortable />83        <Column field="country" header="Country" sortable />84        <Column field="city" header="City" sortable />85        <Column field="balance" header="Balance" sortable align="right">86            <template #body="{ data }">{{ money.format(data.balance) }}</template>87        </Column>88        <template #footer>89            <span>{{ chosen ? `${chosen.name}, ${chosen.city}` : 'No one chosen' }}</span>90        </template>91    </DataGrid>92</template>93 94<style scoped>95.demo-table {96    width: 100%;97}98</style>

Columns the reader arranges

Drag a header to move a column, or hold Ctrl (⌘) and press an arrow. Drag the edge of a header to set its width — the handle is in the tab order, so the arrow keys do it too, and Shift makes bigger steps. Name and Balance are pinned to the edges and stay while the rest scrolls sideways. The button opens the list of columns. Everything the reader does is one object, `columnLayout`, which an application can store and hand back.

			Status	Balance
Ximena Diallo	Brazil	São Paulo	Offline	€4,586.25
Noémie Nowak	Switzerland	Zürich	Offline	€5,484.63
Bruno Nowak	Poland	Kraków	Away	€456.73
Quentin Gómez	Japan	Tōkyō	Active	€5,444.92
Hanna Mendes	Iceland	Reykjavík	Away	€16,745.23
Wiktor Lima	Poland	Kraków	Active	€6,428.86
Bruno Rocha	Japan	Tōkyō	Active	€8,297.10
Gustavo Rocha	Canada	Québec	Active	€10,280.87

Nothing changed yet.

1<script setup lang="ts">2import { Button, Column, DataGrid, StackPanel, useVitral, type ColumnLayoutLike } from '@vitral/vue';3import { computed, ref } from 'vue';4 5const people = [6    { id: 1, name: 'Ximena Diallo', city: 'São Paulo', country: 'Brazil', balance: 4586.25, status: 'Offline' },7    { id: 2, name: 'Noémie Nowak', city: 'Zürich', country: 'Switzerland', balance: 5484.63, status: 'Offline' },8    { id: 3, name: 'Bruno Nowak', city: 'Kraków', country: 'Poland', balance: 456.73, status: 'Away' },9    { id: 4, name: 'Quentin Gómez', city: 'Tōkyō', country: 'Japan', balance: 5444.92, status: 'Active' },10    { id: 5, name: 'Hanna Mendes', city: 'Reykjavík', country: 'Iceland', balance: 16745.23, status: 'Away' },11    { id: 6, name: 'Wiktor Lima', city: 'Kraków', country: 'Poland', balance: 6428.86, status: 'Active' },12    { id: 7, name: 'Bruno Rocha', city: 'Tōkyō', country: 'Japan', balance: 8297.1, status: 'Active' },13    { id: 8, name: 'Gustavo Rocha', city: 'Québec', country: 'Canada', balance: 10280.87, status: 'Active' }14];15 16const { config } = useVitral();17const money = computed(() => new Intl.NumberFormat(config.locale.code, { style: 'currency', currency: 'EUR' }));18 19// What the reader has done to the columns: an application would store this.20const layout = ref<ColumnLayoutLike | null>(null);21const layoutSummary = computed(() => {22    const it = layout.value;23    if (!it) return 'Nothing changed yet.';24    const parts = [25        it.order?.length ? `order: ${it.order.join(', ')}` : '',26        it.hidden?.length ? `hidden: ${it.hidden.join(', ')}` : '',27        Object.keys(it.widths ?? {}).length ? `${Object.keys(it.widths!).length} widths` : ''28    ].filter(Boolean);29    return parts.length ? parts.join(' · ') : 'Nothing changed yet.';30});31</script>32 33<template>34    <StackPanel spacing="1rem" style="width: 100%">35        <DataGrid36            v-model:column-layout="layout"37            :value="people"38            data-key="id"39            aria-label="People, arranged"40            resizable-columns41            reorderable-columns42            column-toggle43            scrollable44            size="small"45            show-gridlines46            class="demo-table"47            style="max-width: 100%"48        >49            <Column field="name" header="Name" sortable pinned="left" :width="180" />50            <Column field="country" header="Country" sortable :width="140" />51            <Column field="city" header="City" sortable :width="160" />52            <Column field="role" header="Role" :width="150" />53            <Column field="status" header="Status" :width="120" />54            <Column field="balance" header="Balance" align="right" pinned="right" :width="130">55                <template #body="{ data }">{{ money.format(data.balance) }}</template>56            </Column>57        </DataGrid>58        <div class="demo-table-bar">59            <Button size="small" severity="secondary" variant="outlined" @click="layout = null">Reset the layout</Button>60            <small style="color: var(--vt-text-muted-color)">{{ layoutSummary }}</small>61        </div>62    </StackPanel>63</template>64 65<style scoped>66.demo-table {67    width: 100%;68}69 70.demo-table-bar {71    display: flex;72    align-items: center;73    gap: 0.75rem;74    flex-wrap: wrap;75}76</style>

Two tables, one set of columns

`group` is a name two tables share: rearrange a column in either and both follow, and scrolling one sideways scrolls the other. The rows are each table's own — here, this quarter above last quarter.

Name	Country	City	Balance
Ximena Diallo	Brazil	São Paulo	€4,586.25
Noémie Nowak	Switzerland	Zürich	€5,484.63
Bruno Nowak	Poland	Kraków	€456.73
Quentin Gómez	Japan	Tōkyō	€5,444.92

Name	Country	City	Balance
Hanna Mendes	Iceland	Reykjavík	€16,745.23
Wiktor Lima	Poland	Kraków	€6,428.86
Bruno Rocha	Japan	Tōkyō	€8,297.10
Gustavo Rocha	Canada	Québec	€10,280.87

1<script setup lang="ts">2import { Column, DataGrid, StackPanel, useVitral } from '@vitral/vue';3import { computed } from 'vue';4 5const thisQuarter = [6    { id: 1, name: 'Ximena Diallo', city: 'São Paulo', country: 'Brazil', balance: 4586.25 },7    { id: 2, name: 'Noémie Nowak', city: 'Zürich', country: 'Switzerland', balance: 5484.63 },8    { id: 3, name: 'Bruno Nowak', city: 'Kraków', country: 'Poland', balance: 456.73 },9    { id: 4, name: 'Quentin Gómez', city: 'Tōkyō', country: 'Japan', balance: 5444.92 }10];11const lastQuarter = [12    { id: 5, name: 'Hanna Mendes', city: 'Reykjavík', country: 'Iceland', balance: 16745.23 },13    { id: 6, name: 'Wiktor Lima', city: 'Kraków', country: 'Poland', balance: 6428.86 },14    { id: 7, name: 'Bruno Rocha', city: 'Tōkyō', country: 'Japan', balance: 8297.1 },15    { id: 8, name: 'Gustavo Rocha', city: 'Québec', country: 'Canada', balance: 10280.87 }16];17 18const { config } = useVitral();19const money = computed(() => new Intl.NumberFormat(config.locale.code, { style: 'currency', currency: 'EUR' }));20</script>21 22<template>23    <StackPanel spacing="0.5rem" style="width: 100%">24        <DataGrid :value="thisQuarter" data-key="id" aria-label="This quarter" group="quarters" resizable-columns reorderable-columns size="small" scrollable class="demo-table">25            <Column field="name" header="Name" :width="170" />26            <Column field="country" header="Country" :width="140" />27            <Column field="city" header="City" :width="150" />28            <Column field="balance" header="Balance" align="right" :width="130">29                <template #body="{ data }">{{ money.format(data.balance) }}</template>30            </Column>31        </DataGrid>32        <DataGrid :value="lastQuarter" data-key="id" aria-label="Last quarter" group="quarters" resizable-columns reorderable-columns size="small" scrollable class="demo-table">33            <Column field="name" header="Name" :width="170" />34            <Column field="country" header="Country" :width="140" />35            <Column field="city" header="City" :width="150" />36            <Column field="balance" header="Balance" align="right" :width="130">37                <template #body="{ data }">{{ money.format(data.balance) }}</template>38            </Column>39        </DataGrid>40    </StackPanel>41</template>42 43<style scoped>44.demo-table {45    width: 100%;46}47</style>

Grouped, the way a base is read

`group-by` gathers the rows by a field and puts a heading over each run, with its count and a toggle. It happens after the query, so sorting and filtering still decide which rows there are — and the rows are gathered by value rather than by adjacency, so sorting by another column keeps each group together and sorts inside it. `v-model:collapsedGroups` is what the reader shut, which an application can store.

0 shut

People by group


Ana Etxeberria	Lisboa	Portugal	Active	€7,618.88
Fatou Ferreira	Évora	Portugal	Offline	€12,014.06
Fatou Jónsson	Lisboa	Portugal	Offline	€10,703.89
Raquel Diallo	Lisboa	Portugal	Offline	-€493.76

Ana Gómez	Recife	Brazil	Active	€11,750.51
Bruno Lima	São Paulo	Brazil	Away	€12,562.40
Bruno Martin	Florianópolis	Brazil	Active	€17,876.33
Bruno Souza	Florianópolis	Brazil	Active	€13,363.03
Élise Dubois	São Paulo	Brazil	Active	€14,269.79
Fatou Ferreira	São Paulo	Brazil	Blocked	€10,543.41
Oskar Martin	São Paulo	Brazil	Away	€10,400.34
Ximena Diallo	São Paulo	Brazil	Offline	€4,586.25

Ana Jónsson	Bogotá	Colombia	Offline	€4,625.47
Valéria Fontaine	Bogotá	Colombia	Away	€7,948.90
Ximena Souza	Bogotá	Colombia	Offline	€9,305.62

Ana Lima	München	Germany	Active	€15,860.46
Carla Lima	München	Germany	Away	€2,002.67
Hanna Martin	München	Germany	Blocked	€7,969.50
João Etxeberria	Köln	Germany	Active	€3,947.82
Kenji Costa	Köln	Germany	Active	€11,732.89
Mateus Dubois	Köln	Germany	Away	€3,976.73

Bruno Lima	Málaga	Spain	Active	€17,131.64
Fatou Gómez	Málaga	Spain	Blocked	€755.90
João Nowak	Málaga	Spain	Active	€4,612.00
Kenji Nowak	Málaga	Spain	Active	-€776.43
Noémie Sato	Málaga	Spain	Active	€9,951.09

Bruno Nowak	Kraków	Poland	Away	€456.73
Iñaki Dubois	Kraków	Poland	Blocked	€17,709.64
João Gómez	Kraków	Poland	Away	€12,230.50
Wiktor Costa	Kraków	Poland	Blocked	€17,144.37
Wiktor Costa	Kraków	Poland	Blocked	€504.85
Wiktor Ferreira	Kraków	Poland	Active	€1,503.44
Wiktor Lima	Kraków	Poland	Active	€6,428.86
Wiktor Souza	Kraków	Poland	Active	-€303.08

Bruno Rocha	Tōkyō	Japan	Active	€8,297.10
Carla Diallo	Tōkyō	Japan	Active	€5,945.52
Fatou Rocha	Tōkyō	Japan	Blocked	-€1,940.60
João Martin	Tōkyō	Japan	Away	€5,028.76
Kenji Costa	Tōkyō	Japan	Offline	€8,098.99
Quentin Gómez	Tōkyō	Japan	Active	€5,444.92
Valéria Álvarez	Tōkyō	Japan	Offline	€2,964.27
Wiktor Costa	Tōkyō	Japan	Active	-€1,790.27

Bruno Rocha	Montréal	Canada	Offline	€17,103.69
Élise Sato	Québec	Canada	Offline	€4,759.90
Gustavo Rocha	Québec	Canada	Active	€10,280.87
Hanna Souza	Québec	Canada	Blocked	€2,684.86
João Etxeberria	Montréal	Canada	Away	€11,302.35
Wiktor Jónsson	Québec	Canada	Active	€10,857.06

Carla Fontaine	Zürich	Switzerland	Offline	€15,325.86
Élise Lima	Zürich	Switzerland	Active	€8,895.92
Noémie Nowak	Zürich	Switzerland	Offline	€5,484.63
Søren Müller	Zürich	Switzerland	Away	€11,236.83
Wiktor Lima	Zürich	Switzerland	Active	€1,071.43
Ximena Etxeberria	Zürich	Switzerland	Away	€11,252.24
Zoë Mendes	Zürich	Switzerland	Away	€2,202.54

Diego Costa	Reykjavík	Iceland	Offline	€13,914.59
Fatou Fontaine	Reykjavík	Iceland	Away	€13,839.42
Hanna Mendes	Reykjavík	Iceland	Away	€16,745.23
Tomás Dubois	Reykjavík	Iceland	Active	€12,242.07
Tomás Ferreira	Reykjavík	Iceland	Offline	€8,764.27
Wiktor Fontaine	Reykjavík	Iceland	Away	€13,239.60

Diego Ferreira	Córdoba	Argentina	Away	€15,492.29
Noémie Fontaine	Córdoba	Argentina	Away	€9,472.17
Ximena Ferreira	Córdoba	Argentina	Active	€2,865.18

1<script setup lang="ts">2import { Button, Column, DataGrid, Icon, InputText, SelectButton, useVitral } from '@vitral/vue';3import { computed, onBeforeUnmount, onMounted, ref } from 'vue';4 5type Status = 'Active' | 'Away' | 'Offline' | 'Blocked';6 7interface Person {8    id: number;9    name: string;10    city: string;11    country: string;12    joined: Date;13    balance: number;14    status: Status;15}16 17// A small deterministic generator, so the demo shows the same people every time.18let seed = 7;19const random = () => ((seed = (seed * 16807) % 2147483647) - 1) / 2147483646;20const pick = <T,>(list: readonly T[]) => list[Math.floor(random() * list.length)]!;21 22const firstNames = ['Ana', 'Bruno', 'Carla', 'Diego', 'Élise', 'Fatou', 'Gustavo', 'Hanna', 'Iñaki', 'João', 'Kenji', 'Lucía', 'Mateus', 'Noémie', 'Oskar', 'Paula', 'Quentin', 'Raquel', 'Søren', 'Tomás', 'Valéria', 'Wiktor', 'Ximena', 'Zoë'];23const lastNames = ['Souza', 'Lima', 'Mendes', 'Ferreira', 'Martin', 'Diallo', 'Rocha', 'Müller', 'Etxeberria', 'Pereira', 'Sato', 'Gómez', 'Nowak', 'Dubois', 'Jónsson', 'Costa', 'Fontaine', 'Álvarez'];24const places: [string, string][] = [25    ['São Paulo', 'Brazil'],26    ['Recife', 'Brazil'],27    ['Florianópolis', 'Brazil'],28    ['Lisboa', 'Portugal'],29    ['Évora', 'Portugal'],30    ['Montréal', 'Canada'],31    ['Québec', 'Canada'],32    ['München', 'Germany'],33    ['Köln', 'Germany'],34    ['Córdoba', 'Argentina'],35    ['Bogotá', 'Colombia'],36    ['Kraków', 'Poland'],37    ['Zürich', 'Switzerland'],38    ['Reykjavík', 'Iceland'],39    ['Tōkyō', 'Japan'],40    ['Málaga', 'Spain']41];42const statuses: Status[] = ['Active', 'Active', 'Active', 'Away', 'Offline', 'Blocked'];43 44const people: Person[] = Array.from({ length: 64 }, (_, i) => {45    const [city, country] = pick(places);46    return {47        id: i + 1,48        name: `${pick(firstNames)} ${pick(lastNames)}`,49        city,50        country,51        joined: new Date(2019 + Math.floor(random() * 7), Math.floor(random() * 12), 1 + Math.floor(random() * 28)),52        balance: Math.round(random() * 2_000_000) / 100 - 2000,53        status: pick(statuses)54    };55});56 57const { config } = useVitral();58const money = computed(() => new Intl.NumberFormat(config.locale.code, { style: 'currency', currency: 'EUR' }));59 60const groupField = ref<'country' | 'status'>('country');61const collapsed = ref<string[]>([]);62const boardFilters = ref({ global: { value: null as string | null, matchMode: 'contains' } });63const board = ref<HTMLElement | null>(null);64const wide = ref(false);65 66/** The browser's own full screen, so the grid gets the whole display and nothing else. */67async function toggleWide() {68    if (!document.fullscreenElement) await board.value?.requestFullscreen?.().catch(() => {});69    else await document.exitFullscreen().catch(() => {});70}71const onFullscreen = () => (wide.value = !!document.fullscreenElement);72onMounted(() => document.addEventListener('fullscreenchange', onFullscreen));73onBeforeUnmount(() => document.removeEventListener('fullscreenchange', onFullscreen));74</script>75 76<template>77    <div ref="board" style="display: flex; flex-direction: column; gap: 1rem; width: 100%; background: var(--vt-content-background)">78        <div class="demo-table-bar">79            <SelectButton v-model="groupField" :options="[{ label: 'By country', value: 'country' }, { label: 'By status', value: 'status' }]" option-label="label" option-value="value" size="small" aria-label="Group by" />80            <InputText v-model="boardFilters.global.value" placeholder="Search" aria-label="Search rows" size="small" clearable class="demo-table-search">81                <template #prefix><Icon icon="search" /></template>82            </InputText>83            <small style="color: var(--vt-text-muted-color)">{{ collapsed.length }} shut</small>84            <Button :label="wide ? 'Close' : 'Full screen'" :icon="wide ? 'restore' : 'maximize'" severity="secondary" variant="outlined" size="small" @click="toggleWide" />85        </div>86        <DataGrid87            v-model:filters="boardFilters"88            v-model:collapsed-groups="collapsed"89            :value="people"90            :group-by="groupField"91            :group-label="({ value, count }) => `${value} · ${count}`"92            data-key="id"93            caption="People by group"94            :global-filter-fields="['name', 'city', 'country']"95            sort-field="name"96            :sort-order="1"97            removable-sort98            show-gridlines99            scrollable100            :scroll-height="wide ? 'calc(100vh - 8rem)' : '22rem'"101            class="demo-table"102        >103            <Column field="name" header="Name" sortable />104            <Column field="city" header="City" sortable />105            <Column field="country" header="Country" sortable />106            <Column field="status" header="Status" sortable>107                <template #body="{ data }">108                    <span class="demo-status"><span :class="['demo-dot', `demo-dot-${data.status.toLowerCase()}`]" aria-hidden="true" />{{ data.status }}</span>109                </template>110            </Column>111            <Column field="balance" header="Balance" sortable align="right">112                <template #body="{ data }">{{ money.format(data.balance) }}</template>113            </Column>114        </DataGrid>115    </div>116</template>117 118<style scoped>119.demo-table {120    width: 100%;121}122 123.demo-table-bar {124    display: flex;125    align-items: center;126    gap: 0.75rem;127    flex-wrap: wrap;128}129 130.demo-table-search {131    margin-inline-start: auto;132    width: 16rem;133}134 135.demo-status {136    display: inline-flex;137    align-items: center;138    gap: 0.5rem;139}140 141.demo-dot {142    width: 0.5rem;143    height: 0.5rem;144    border-radius: 999px;145    background: var(--vt-text-muted-color);146}147 148.demo-dot-active {149    background: var(--vt-success-color);150}151 152.demo-dot-away {153    background: var(--vt-warn-color);154}155 156.demo-dot-blocked {157    background: var(--vt-danger-color);158}159</style>

From a data source

The rows come from `createDataSource({ load })`, a stand-in for a server that answers in 450 ms. The table asks it for one page at a time with the sort and the search; a slow answer that arrives after a newer one is thrown away.

Server1 requests


No available options

1<script setup lang="ts">2import { queryData } from '@vitral/core';3import { Column, createDataSource, DataGrid, Icon, InputText, type LoadOptions } from '@vitral/vue';4import { ref } from 'vue';5 6type Status = 'Active' | 'Away' | 'Offline' | 'Blocked';7 8interface Person {9    id: number;10    name: string;11    city: string;12    country: string;13    joined: Date;14    balance: number;15    status: Status;16}17 18// A small deterministic generator, so the demo shows the same people every time.19let seed = 7;20const random = () => ((seed = (seed * 16807) % 2147483647) - 1) / 2147483646;21const pick = <T,>(list: readonly T[]) => list[Math.floor(random() * list.length)]!;22 23const firstNames = ['Ana', 'Bruno', 'Carla', 'Diego', 'Élise', 'Fatou', 'Gustavo', 'Hanna', 'Iñaki', 'João', 'Kenji', 'Lucía', 'Mateus', 'Noémie', 'Oskar', 'Paula', 'Quentin', 'Raquel', 'Søren', 'Tomás', 'Valéria', 'Wiktor', 'Ximena', 'Zoë'];24const lastNames = ['Souza', 'Lima', 'Mendes', 'Ferreira', 'Martin', 'Diallo', 'Rocha', 'Müller', 'Etxeberria', 'Pereira', 'Sato', 'Gómez', 'Nowak', 'Dubois', 'Jónsson', 'Costa', 'Fontaine', 'Álvarez'];25const places: [string, string][] = [26    ['São Paulo', 'Brazil'],27    ['Recife', 'Brazil'],28    ['Florianópolis', 'Brazil'],29    ['Lisboa', 'Portugal'],30    ['Évora', 'Portugal'],31    ['Montréal', 'Canada'],32    ['Québec', 'Canada'],33    ['München', 'Germany'],34    ['Köln', 'Germany'],35    ['Córdoba', 'Argentina'],36    ['Bogotá', 'Colombia'],37    ['Kraków', 'Poland'],38    ['Zürich', 'Switzerland'],39    ['Reykjavík', 'Iceland'],40    ['Tōkyō', 'Japan'],41    ['Málaga', 'Spain']42];43const statuses: Status[] = ['Active', 'Active', 'Active', 'Away', 'Offline', 'Blocked'];44 45const people: Person[] = Array.from({ length: 64 }, (_, i) => {46    const [city, country] = pick(places);47    return {48        id: i + 1,49        name: `${pick(firstNames)} ${pick(lastNames)}`,50        city,51        country,52        joined: new Date(2019 + Math.floor(random() * 7), Math.floor(random() * 12), 1 + Math.floor(random() * 28)),53        balance: Math.round(random() * 2_000_000) / 100 - 2000,54        status: pick(statuses)55    };56});57 58// A stand-in for a server: it answers in 450 ms with one page, sorted and searched.59const requests = ref(0);60const remote = createDataSource<Person>({61    load: async (options: LoadOptions) => {62        requests.value++;63        await new Promise((resolve) => setTimeout(resolve, 450));64        return queryData(people, options);65    }66});67const remoteFilters = ref({ global: { value: null as string | null, matchMode: 'contains' } });68</script>69 70<template>71    <DataGrid :data-source="remote" v-model:filters="remoteFilters" :global-filter-fields="['name', 'city', 'country']" aria-label="Remote people" paginator :rows="6" :filter-delay="250" class="demo-table">72        <template #header>73            <div class="demo-table-bar">74                <strong>Server</strong>75                <small style="color: var(--vt-text-muted-color)">{{ requests }} requests</small>76                <InputText v-model="remoteFilters.global.value" placeholder="Search" aria-label="Search the server" size="small" class="demo-table-search">77                    <template #prefix><Icon icon="search" /></template>78                </InputText>79            </div>80        </template>81        <Column field="name" header="Name" sortable />82        <Column field="city" header="City" sortable />83        <Column field="status" header="Status" sortable>84            <template #body="{ data }">85                <span class="demo-status"><span :class="['demo-dot', `demo-dot-${data.status.toLowerCase()}`]" aria-hidden="true" />{{ data.status }}</span>86            </template>87        </Column>88    </DataGrid>89</template>90 91<style scoped>92.demo-table {93    width: 100%;94}95 96.demo-table-bar {97    display: flex;98    align-items: center;99    gap: 0.75rem;100    flex-wrap: wrap;101}102 103.demo-table-search {104    margin-inline-start: auto;105    width: 16rem;106}107 108.demo-status {109    display: inline-flex;110    align-items: center;111    gap: 0.5rem;112}113 114.demo-dot {115    width: 0.5rem;116    height: 0.5rem;117    border-radius: 999px;118    background: var(--vt-text-muted-color);119}120 121.demo-dot-active {122    background: var(--vt-success-color);123}124 125.demo-dot-away {126    background: var(--vt-warn-color);127}128 129.demo-dot-blocked {130    background: var(--vt-danger-color);131}132</style>

Empty and loading

Invoice	Amount
No invoices this month

Name	City
Ximena Diallo	São Paulo
Noémie Nowak	Zürich
Bruno Nowak	Kraków
Quentin Gómez	Tōkyō

1<script setup lang="ts">2import { Column, DataGrid } from '@vitral/vue';3 4const people = [5    { name: 'Ximena Diallo', city: 'São Paulo' },6    { name: 'Noémie Nowak', city: 'Zürich' },7    { name: 'Bruno Nowak', city: 'Kraków' },8    { name: 'Quentin Gómez', city: 'Tōkyō' }9];10</script>11 12<template>13    <DataGrid :value="[]" aria-label="Empty table" empty-message="No invoices this month" class="demo-table demo-table-half">14        <Column field="number" header="Invoice" />15        <Column field="amount" header="Amount" align="right" />16    </DataGrid>17    <DataGrid :value="people" aria-label="Loading table" loading class="demo-table demo-table-half">18        <Column field="name" header="Name" />19        <Column field="city" header="City" />20    </DataGrid>21</template>22 23<style scoped>24.demo-table {25    width: 100%;26}27 28.demo-table-half {29    flex: 1 1 20rem;30    width: auto;31}32</style>

API

Read from packages/vue/src/components/DataGrid/types.ts, so it says what the component actually accepts.

Props

Name	Type	Description
groupBy	string	Gathers the rows by this field and puts a heading over each run, with a count and a toggle. Grouping happens after the query, so sorting and filtering still decide which rows there are; `v-model:collapsedGroups` holds which of them the reader has shut.
groupLabel	(context: { value: unknown; count: number; rows: any[] }) => string	What a group's heading says; the value itself by default.
value	any[]	—
dataKey	string	A field that identifies a row, for selection and row keys.
dataSource	DataSourceLike	Rows come from a data source, local or remote, instead of `value`.
lazy	boolean	Nothing is computed here: sort, filter and page changes are emitted (`lazy-load`) for the app to answer.
totalRecords	number	The total across pages when `lazy`.
loading	boolean	—
paginator	boolean	—
rowsPerPageOptions	number[]	—
pageLinkSize	number	—
paginatorTemplate	string \| ('FirstPageLink' \| 'PrevPageLink' \| 'PageLinks' \| 'NextPageLink' \| 'LastPageLink' \| 'RowsPerPageDropdown' \| 'CurrentPageReport')[]	—
currentPageReportTemplate	string	—
paginatorPosition	'top' \| 'bottom'	—
alwaysShowPaginator	boolean	—
sortMode	'single' \| 'multiple'	—
removableSort	boolean	A third click on a sorted column takes it out of the sort.
globalFilterFields	string[]	—
filterDisplay	'row'	`'row'` puts a filter box under each filterable column's header.
filterDelay	number	Milliseconds to wait after typing before a lazy table or a data source is asked again.
selectionMode	'single' \| 'multiple'	—
resizableColumns	boolean	A handle on every column's trailing edge, dragged (or keyed) to set its width.
columnResizeMode	'fit' \| 'expand'	`'fit'` takes the width from the next column, keeping the table's own; `'expand'` widens the table.
reorderableColumns	boolean	Columns can be dragged by their header into another order, or moved with Ctrl and an arrow key.
columnToggle	boolean	A button that opens the list of columns, each with a checkbox.
group	string	A name two tables share: they scroll sideways together and keep one column layout.
stripedRows	boolean	—
showGridlines	boolean	—
size	Size	—
scrollable	boolean	—
scrollHeight	string	A CSS height, or `'flex'` to fill a flex parent. The header stays in view.
emptyMessage	string	—
rowClass	(data: any) => unknown	—
tableStyle	string \| Record<string, string>	—
caption	string	Names the table. Hidden unless `showCaption`; without it, name the table with `aria-label`.
showCaption	boolean	—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

Event	Payload	Description
page	event: DataGridPageEvent	—
column-resize	event: DataGridColumnEvent & { width: number }	A column was widened or narrowed.
column-reorder	event: DataGridColumnEvent & { order: string[] }	A column was moved.
column-toggle	event: DataGridColumnEvent & { visible: boolean }	A column was shown or hidden.
column-pin	event: DataGridColumnEvent & { side: 'left' \| 'right' \| null }	A column was stuck to an edge, or let go.
sort	event: DataGridSortEvent	—
filter	event: DataGridFilterEvent	—
lazy-load	event: LoadOptionsLike	—
row-click	event: DataGridRowClickEvent	—
row-select	event: DataGridRowSelectEvent	—
row-unselect	event: DataGridRowSelectEvent	—
row-select-all	event: DataGridSelectAllEvent	—
row-unselect-all	event: DataGridSelectAllEvent	—

Slots

Name	Slot props	Description
default	—	The `<Column>`s.
header	—	—
footer	—	—
empty	—	—
loadingicon	—	—
paginatorstart	(props: DataGridPageEvent)	—
paginatorend	(props: DataGridPageEvent)	—

DataGrid

Import

API

Props

Emits

Slots

Related components

Used in these templates