---
url: "https://vueda.dev/v3/reference/api/vue/ColumnDateTime.md"
title: "ColumnDateTime"
---

# ColumnDateTime

## Overview

Date/time/datetime list column adapter. Wraps {@link DateTimeDisplay},
binding the cell's raw `value` and forwarding display configuration resolved
from `columnMappings` (per field type) and any `columnProps` override.

Receives the ObjectsGrid `value` slot props; only `value` is consumed for
rendering. `inheritAttrs` is disabled so the remaining cell context props
(`field`, `formatted`, `obj`, etc.) are not leaked as DOM attributes onto the
DateTimeDisplay root. DateTimeDisplay renders a dash for empty/invalid values.

The default `format` is `"absolute"` (clean absolute text with the relative
time on hover), which reads better in a dense table than the inline default.

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-value">value</span> | `string\|object\|date` |  | `""` | Raw cell value (ISO string, Date, or Luxon DateTime). |
| <span id="prop-format">format</span> | `string\|object` |  | `"absolute"` | Display layout passed to DateTimeDisplay; `"absolute"` keeps tables tidy. |
| <span id="prop-showTime">showTime</span> | `boolean` |  | `true` | Whether to include the time portion in the absolute output. |
| <span id="prop-showRelative">showRelative</span> | `boolean` |  | `true` | Whether to show the relative time label. |
| <span id="prop-showTooltip">showTooltip</span> | `boolean` |  | `true` | Whether to show the complementary representation as a hover tooltip. |
| <span id="prop-tooltipFormat">tooltipFormat</span> | `string\|object` |  | `"default"` | Luxon format used for the tooltip when a custom `format` is active. |
| <span id="prop-inline">inline</span> | `boolean` |  | `false` | When true, renders inline (no wrapping div). |

## Source

`client/lib/objects-grid/ColumnDateTime.vue`