Appearance

VfGrid ​

Basic ​

The grid prop defines the cell layout as a 2D array. Each cell contains an element schema with at least type and name.

vue
<VfGrid
  name="contacts"
  :grid="[
    [
      { type: 'text', name: 'first_name', placeholder: 'First name' },
      { type: 'text', name: 'last_name', placeholder: 'Last name' },
    ],
    [
      { type: 'text', name: 'email', placeholder: 'Email' },
      { type: 'text', name: 'phone', placeholder: 'Phone' },
    ],
  ]"
/>
vue
<template>
  <VfGrid name="contacts">
    <VfRow>
      <VfCol><VfText name="first_name" placeholder="First name" /></VfCol>
      <VfCol><VfText name="last_name" placeholder="Last name" /></VfCol>
    </VfRow>
    <VfRow>
      <VfCol><VfText name="email" placeholder="Email" /></VfCol>
      <VfCol><VfText name="phone" placeholder="Phone" /></VfCol>
    </VfRow>
  </VfGrid>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  contacts: {
    type: 'grid',
    grid: [
      [
        { type: 'text', name: 'first_name', placeholder: 'First name' },
        { type: 'text', name: 'last_name', placeholder: 'Last name' },
      ],
      [
        { type: 'text', name: 'email', placeholder: 'Email' },
        { type: 'text', name: 'phone', placeholder: 'Phone' },
      ],
    ],
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Content Cells ​
Cells in the grid array can be null for empty space, a string for static text, { content: '...' } for a content object, or an element schema for a form input.
Name:
Email:
vue
<VfGrid
  name="info"
  :grid="[
    ['Name:', { type: 'text', name: 'name' }],
    ['Email:', { type: 'text', name: 'email' }],
    [null, { type: 'checkbox', name: 'subscribe', text: 'Subscribe' }],
  ]"
/>
vue
<template>
  <VfGrid name="info" valign="middle">
    <VfRow>
      <VfCol>Name:</VfCol>
      <VfCol><VfText name="name" /></VfCol>
    </VfRow>
    <VfRow>
      <VfCol>Email:</VfCol>
      <VfCol><VfText name="email" /></VfCol>
    </VfRow>
    <VfRow>
      <VfCol />
      <VfCol><VfCheckbox name="subscribe" text="Subscribe" /></VfCol>
    </VfRow>
  </VfGrid>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  info: {
    type: 'grid',
    valign: 'middle',
    grid: [
      [
        'Name:',
        { type: 'text', name: 'name' },
      ],
      [
        'Email:',
        { type: 'text', name: 'email' },
      ],
      [
        null,
        { type: 'checkbox', name: 'subscribe', text: 'Subscribe' },
      ],
    ],
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Cell Spans ​
The colspan and rowspan properties make a cell span multiple columns or rows.
vue
<VfGrid
  name="layout"
  :grid="[
    [
      {
        type: 'text',
        name: 'full_name',
        placeholder: 'Full name',
        colspan: 2,
      },
    ],
    [
      {
        type: 'textarea',
        name: 'bio',
        placeholder: 'Bio',
        rowspan: 2,
      },
      { type: 'text', name: 'city', placeholder: 'City' },
    ],
    [
      { type: 'text', name: 'zip', placeholder: 'ZIP' },
    ],
  ]"
/>
vue
<template>
  <VfGrid name="layout">
    <VfRow>
      <VfCol :colspan="2">
        <VfText name="full_name" placeholder="Full name" />
      </VfCol>
    </VfRow>
    <VfRow>
      <VfCol :rowspan="2">
        <VfTextarea name="bio" placeholder="Bio" />
      </VfCol>
      <VfCol><VfText name="city" placeholder="City" /></VfCol>
    </VfRow>
    <VfRow>
      <VfCol><VfText name="zip" placeholder="ZIP" /></VfCol>
    </VfRow>
  </VfGrid>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  layout: {
    type: 'grid',
    grid: [
      [
        {
          type: 'text',
          name: 'full_name',
          placeholder: 'Full name',
          colspan: 2,
        },
      ],
      [
        {
          type: 'textarea',
          name: 'bio',
          placeholder: 'Bio',
          rowspan: 2,
        },
        { type: 'text', name: 'city', placeholder: 'City' },
      ],
      [
        { type: 'text', name: 'zip', placeholder: 'ZIP' },
      ],
    ],
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Column Widths ​
The widths prop sets custom widths for each column using CSS values such as px or fr.
Name:
Email:
vue
<VfGrid name="profile" :widths="['120px', '1fr', '1fr']" />
vue
<template>
  <VfGrid name="profile" :widths="['120px', '1fr', '1fr']" valign="middle">
    <VfRow>
      <VfCol>Name:</VfCol>
      <VfCol><VfText name="first_name" placeholder="First" /></VfCol>
      <VfCol><VfText name="last_name" placeholder="Last" /></VfCol>
    </VfRow>
    <VfRow>
      <VfCol>Email:</VfCol>
      <VfCol :colspan="2">
        <VfText name="email" placeholder="Email" />
      </VfCol>
    </VfRow>
  </VfGrid>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  profile: {
    type: 'grid',
    widths: ['120px', '1fr', '1fr'],
    valign: 'middle',
    grid: [
      [
        'Name:',
        { type: 'text', name: 'first_name', placeholder: 'First' },
        { type: 'text', name: 'last_name', placeholder: 'Last' },
      ],
      [
        'Email:',
        { colspan: 2, type: 'text', name: 'email', placeholder: 'Email' },
      ],
    ],
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Headers ​
The colHeaders prop treats the first row as styled column headers. The rowHeaders prop treats the first column as styled row headers.
Morning
Afternoon
Monday
Math
English
Tuesday
Science
History
vue
<VfGrid name="schedule" col-headers row-headers />
vue
<template>
  <VfGrid name="schedule" col-headers row-headers>
    <VfRow>
      <VfCol />
      <VfCol>Morning</VfCol>
      <VfCol>Afternoon</VfCol>
    </VfRow>
    <VfRow>
      <VfCol>Monday</VfCol>
      <VfCol>Math</VfCol>
      <VfCol>English</VfCol>
    </VfRow>
    <VfRow>
      <VfCol>Tuesday</VfCol>
      <VfCol>Science</VfCol>
      <VfCol>History</VfCol>
    </VfRow>
  </VfGrid>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  schedule: {
    type: 'grid',
    colHeaders: true,
    rowHeaders: true,
    grid: [
      [null, 'Morning', 'Afternoon'],
      ['Monday', 'Math', 'English'],
      ['Tuesday', 'Science', 'History'],
    ],
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Tabular ​
The tabular prop applies bordered table styling with structured cells. Combine it with colHeaders for a traditional table layout.
Plan
Price
Storage
Basic
$9/mo
10 GB
Pro
$29/mo
100 GB
Enterprise
$99/mo
1 TB
vue
<VfGrid name="pricing" tabular col-headers />
vue
<template>
  <VfGrid name="pricing" tabular col-headers>
    <VfRow>
      <VfCol>Plan</VfCol>
      <VfCol>Price</VfCol>
      <VfCol>Storage</VfCol>
    </VfRow>
    <VfRow>
      <VfCol>Basic</VfCol>
      <VfCol>$9/mo</VfCol>
      <VfCol>10 GB</VfCol>
    </VfRow>
    <VfRow>
      <VfCol>Pro</VfCol>
      <VfCol>$29/mo</VfCol>
      <VfCol>100 GB</VfCol>
    </VfRow>
    <VfRow>
      <VfCol>Enterprise</VfCol>
      <VfCol>$99/mo</VfCol>
      <VfCol>1 TB</VfCol>
    </VfRow>
  </VfGrid>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  pricing: {
    type: 'grid',
    tabular: true,
    colHeaders: true,
    grid: [
      ['Plan', 'Price', 'Storage'],
      ['Basic', '$9/mo', '10 GB'],
      ['Pro', '$29/mo', '100 GB'],
      ['Enterprise', '$99/mo', '1 TB'],
    ],
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Alignment ​
The align prop controls horizontal alignment of cell content (left, center, right). The valign prop controls vertical alignment (top, middle, bottom). Individual cells can override the grid-level alignment by setting align or valign in the cell object.
Item
Qty
Price
Widget
10
$5.00
Gadget
3
$12.50
vue
<VfGrid
  name="aligned"
  align="center"
  :grid="[
    ['Item', 'Qty', 'Price'],
    ['Widget', '10', { content: '$5.00', align: 'right' }],
    ['Gadget', '3', { content: '$12.50', align: 'right' }],
  ]"
/>
vue
<template>
  <VfGrid name="aligned" align="center" tabular col-headers>
    <VfRow>
      <VfCol>Item</VfCol>
      <VfCol>Qty</VfCol>
      <VfCol>Price</VfCol>
    </VfRow>
    <VfRow>
      <VfCol>Widget</VfCol>
      <VfCol>10</VfCol>
      <VfCol align="right">$5.00</VfCol>
    </VfRow>
    <VfRow>
      <VfCol>Gadget</VfCol>
      <VfCol>3</VfCol>
      <VfCol align="right">$12.50</VfCol>
    </VfRow>
  </VfGrid>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  aligned: {
    type: 'grid',
    align: 'center',
    tabular: true,
    colHeaders: true,
    grid: [
      ['Item', 'Qty', 'Price'],
      ['Widget', '10', { content: '$5.00', align: 'right' }],
      ['Gadget', '3', { content: '$12.50', align: 'right' }],
    ],
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Scrollable ​
The scrollable prop enables horizontal scrolling when the grid overflows its container. Use minWidth to set the minimum content width.
vue
<VfGrid name="wide" scrollable />
vue
<template>
  <VfGrid name="wide" scrollable min-width="800px">
    <VfRow>
      <VfCol><VfText name="col1" placeholder="Column 1" /></VfCol>
      <VfCol><VfText name="col2" placeholder="Column 2" /></VfCol>
      <VfCol><VfText name="col3" placeholder="Column 3" /></VfCol>
      <VfCol><VfText name="col4" placeholder="Column 4" /></VfCol>
      <VfCol><VfText name="col5" placeholder="Column 5" /></VfCol>
    </VfRow>
  </VfGrid>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  wide: {
    type: 'grid',
    scrollable: true,
    minWidth: '800px',
    grid: [
      [
        { type: 'text', name: 'col1', placeholder: 'Column 1' },
        { type: 'text', name: 'col2', placeholder: 'Column 2' },
        { type: 'text', name: 'col3', placeholder: 'Column 3' },
        { type: 'text', name: 'col4', placeholder: 'Column 4' },
        { type: 'text', name: 'col5', placeholder: 'Column 5' },
      ],
    ],
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Nested ​
The nested prop nests all grid element data under the grid's own key in the form model instead of flattening them into the parent level.
vue
<VfGrid
  name="address"
  nested
  :grid="[
    [
      { type: 'text', name: 'city', placeholder: 'City' },
      { type: 'text', name: 'zip', placeholder: 'ZIP' },
    ],
  ]"
/>
vue
<template>
  <VfGrid name="address" nested>
    <VfRow>
      <VfCol><VfText name="city" placeholder="City" /></VfCol>
      <VfCol><VfText name="zip" placeholder="ZIP" /></VfCol>
    </VfRow>
  </VfGrid>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  address: {
    type: 'grid',
    nested: true,
    grid: [
      [
        { type: 'text', name: 'city', placeholder: 'City' },
        { type: 'text', name: 'zip', placeholder: 'ZIP' },
      ],
    ],
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Disabled ​
The disabled prop disables all child elements in the grid. It also accepts Conditions.
vue
<VfGrid name="locked" disabled />
vue
<template>
  <VfGrid name="locked" disabled>
    <VfRow>
      <VfCol><VfText name="first_name" placeholder="First name" /></VfCol>
      <VfCol><VfText name="last_name" placeholder="Last name" /></VfCol>
    </VfRow>
    <VfRow>
      <VfCol><VfText name="email" placeholder="Email" /></VfCol>
      <VfCol><VfText name="phone" placeholder="Phone" /></VfCol>
    </VfRow>
  </VfGrid>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  locked: {
    type: 'grid',
    disabled: true,
    grid: [
      [
        { type: 'text', name: 'first_name', placeholder: 'First name' },
        { type: 'text', name: 'last_name', placeholder: 'Last name' },
      ],
      [
        { type: 'text', name: 'email', placeholder: 'Email' },
        { type: 'text', name: 'phone', placeholder: 'Phone' },
      ],
    ],
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Released under the MIT License.
Copyright © 2022-present Adam Berecz