DataGrid

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>

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>

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>

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>

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>

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>

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>