VirtualTableInput

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

Props

Prop	Type	Required	Description
error	Error	—
value	string	yes
multiline	boolean	—
focused	boolean	yes
disabled	boolean	yes
updateValue	(newValue: (string | null)) => void	yes
onBlur	() => void	—

Example

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

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

function CellShell({
  selected,
  width = 240,
  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 FocusedTextCell() {
  return (
    <CellShell selected width={260}>
      <VirtualTableInput
        value="Add authentication middleware to /api routes"
        focused
        disabled={false}
        updateValue={() => {}}
      />
    </CellShell>
  );
}