VirtualTableDateField

import { VirtualTableDateField } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
name	string	—
error	Error	—
mode	"date" | "date_time"	—
timezone	string	—
internalValue	Date	yes
updateValue	(newValue: (Date | null)) => void	yes
focused	boolean	yes
disabled	boolean	yes
small	boolean	—
locale	string	—
onBlur	React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>	—

Example

This is the example the design-system sync renders and verifies for this component.

import React from "react";
import { VirtualTableDateField, cls } from "@rebasepro/ui";

function CellShell({
  selected,
  width = 200,
  height = 44,
  children
}: {
  selected?: boolean;
  width?: number;
  height?: number;
  children: React.ReactNode;
}) {
  return (
    <div className="bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-700 rounded-md" style={{ width, height }}>
      <div
        className={cls(
          "flex relative h-full rounded-md border-4 p-1",
          selected ? "border-primary bg-surface-accent-50 dark:bg-surface-accent-900" : "border-transparent"
        )}
      >
        {children}
      </div>
    </div>
  );
}

export function DueDateCell() {
  return (
    <CellShell selected width={180} height={64}>
      <VirtualTableDateField
        mode="date"
        internalValue={new Date(2026, 7, 15)}
        focused
        disabled={false}
        updateValue={() => {}}
      />
    </CellShell>
  );
}