VfCol

Basic

VfCol defines a cell inside a VfGrid row. Place elements or plain text inside it.

First name

Last name

Email

Phone

<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>
  <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>

<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>

Text Content

Cells can contain plain text or HTML content instead of form elements.

Name:

name

Email:

email

<VfGrid name="info" :widths="['120px', '1fr']">
  <VfRow>
    <VfCol>Name:</VfCol>
    <VfCol><VfText name="name" /></VfCol>
  </VfRow>
  <VfRow>
    <VfCol>Email:</VfCol>
    <VfCol><VfText name="email" /></VfCol>
  </VfRow>
</VfGrid>

<template>
  <VfGrid name="info" :widths="['120px', '1fr']">
    <VfRow>
      <VfCol>Name:</VfCol>
      <VfCol><VfText name="name" /></VfCol>
    </VfRow>
    <VfRow>
      <VfCol>Email:</VfCol>
      <VfCol><VfText name="email" /></VfCol>
    </VfRow>
  </VfGrid>
</template>

<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  info: {
    type: 'grid',
    widths: ['120px', '1fr'],
    grid: [
      ['Name:', { type: 'text', name: 'name' }],
      ['Email:', { type: 'text', name: 'email' }],
    ],
  },
})

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

<template>
  <Form />
</template>

Colspan and Rowspan

The colspan prop makes a cell span multiple columns. The rowspan prop makes it span multiple rows.

Full name

Bio

City

ZIP

<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>
  <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>

<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>

Alignment

The align prop controls horizontal alignment (left, center, right). The valign prop controls vertical alignment (top, middle, bottom). These override the grid-level alignment for individual cells.

Item

Qty

Price

Widget

10

$5.00

Gadget

3

$12.50

<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>
  <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>

<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>

Props

Configure the component's behavior and appearance with these props.

Layout

Prop	Default	Description
header	false	Whether this column cell should be styled as a header. Automatically resolves to column header, row header, or both based on position.
align	—	Horizontal alignment of the cell content.
valign	—	Vertical alignment of the cell content.
colspan	—	The number of grid columns this cell spans.
rowspan	—	The number of grid rows this cell spans.

Customization

Prop	Default	Description
parts	—	Custom DOM attribute overrides for the component's structural parts.
class	—	CSS classes to apply to the component's root element.
classes	—	Custom CSS class overrides for the component's structural parts.
reclass	—	CSS class overrides that replace (rather than merge with) default classes.
slots	—	Custom Vue components to use for named slots. Every component resolves it through the standard outlets pipeline (see useOutlets).
presets	—	Named configuration presets to apply to the component.
template	—	A custom Vue component to use as the template instead of the default.
component	—	A custom Vue component to render in the component's default slot.

Context

Reactive properties and methods accessible on the component's Context object.

General

Name	Description
props	The resolved component props with defaults applied.

Col

Name	Description
align	The resolved horizontal alignment, falling back to the grid's align prop.
valign	The resolved vertical alignment, falling back to the grid's valign prop.
cell	The grid cell data for this column at the current row position.
cellCss	The CSS text for the cell's grid-area when it spans multiple columns or rows.
colspan	The number of columns the cell spans.
rowspan	The number of rows the cell spans.
colHeader	Whether this cell should be styled as a column header, resolved from the header prop and position or the parent grid's colHeaders setting.
rowHeader	Whether this cell should be styled as a row header, resolved from the header prop and position or the parent grid's rowHeaders setting.

Layout

Name	Description
classes	The resolved CSS class map for the component.
parts	The resolved DOM attribute overrides for internal elements.
nonce	Unique security nonce for injecting scoped styles.

Events

Name	Description
fire()	Fires an event synchronously, invoking before, main, and after listeners in order.
fireAsync()	Fires an event asynchronously, awaiting each callback and short-circuiting when any returns false.
on()	Subscribes a callback to a specific event.
off()	Removes a previously registered event callback.
onBefore()	Registers a callback that runs before the main event listeners.
onAfter()	Registers a callback that runs after the main event listeners.

Accessibility

Name	Description
uid	The unique identifier of the component instance, used to key the cell within the parent row.

Events

Events emitted by the component. See Events for details.

Name	Params	Description
beforeMount	context$	Emitted before the component is mounted.
mounted	context$	Emitted after the component is mounted.
beforeUnmount	context$	Emitted before the component is unmounted.
unmounted	context$	Emitted after the component is unmounted.
updated	context$	Emitted after the component is updated.

Slots

Named Slots for replacing parts of the component's rendering.

Name	Scope	Description
template	context	Slot that replaces the entire component rendering. Receives the full component context as a single context prop.
default	—	Slot for the column's default content.

Parts

DOM attribute overrides targeting internal elements. See Parts for details.

root

The root column element.

Element	<div>
Classes	.vf-grid-cell .vf-grid-col-header? .vf-grid-row-header?
Bindings	data-align data-valign

Tokens

All the CSS variables that control this component's appearance with default values in the default theme. See Theming Guide for details.

:root {
  /**
   * Component tokens
   * -------------------------------------------------------------------------- */
  --vf-grid-col-header-color: inherit;
  --vf-grid-header-font-size: 1rem;
  --vf-grid-row-header-color: inherit;
}

{
  /**
   * Component tokens
   * -------------------------------------------------------------------------- */
  gridColHeaderColor: 'inherit',
  gridHeaderFontSize: '1rem',
  gridRowHeaderColor: 'inherit',
}