Property Components

Standalone UI components for rendering property values. Use these in custom layouts, formulas, or outside DataView.

Property components are standalone UI components that render individual property values. Use them when you need to display a property value outside of a DataView, in custom layouts, or inside formula properties.

import { NumberProperty, SelectProperty } from "@sparkyidea/dataview/properties";

Text

Displays plain text with optional truncation.

Hello WorldThis is a longer text that will be truncated if it exceeds the container width-

"use client";

import { TextProperty } from "@sparkyidea/dataview/properties";

export function TextPropertyDemo() {
  return (
    <div className="flex flex-col gap-4">
      <TextProperty value="Hello World" />
      <TextProperty value="This is a longer text that will be truncated if it exceeds the container width" />
      <TextProperty value={null} />
    </div>
  );
}

Number

Displays numeric values with formatting options.

1235$1,234.5675%

"use client";

import { NumberProperty } from "@sparkyidea/dataview/properties";

export function NumberPropertyDemo() {
  return (
    <div className="flex flex-col gap-4">
      <NumberProperty config={{ numberFormat: "number" }} value={1234.56} />
      <NumberProperty
        config={{ numberFormat: "dollar", decimalPlaces: 2 }}
        value={1234.56}
      />
      <NumberProperty config={{ numberFormat: "percentage" }} value={75} />
      <NumberProperty
        config={{ showAs: { type: "bar", color: "blue", divideBy: 100 } }}
        value={65}
      />
      <NumberProperty
        config={{ showAs: { type: "ring", color: "green", divideBy: 100 } }}
        value={80}
      />
    </div>
  );
}

Props:

Prop	Type	Description
`value`	`number \| null`	The numeric value
`config.numberFormat`	`"number" \| "numberWithCommas" \| "percentage" \| "dollar" \| "euro" \| "pound"`	Format style
`config.decimalPlaces`	`0-10`	Decimal precision
`config.showAs.type`	`"number" \| "bar" \| "ring"`	Visual representation
`config.showAs.color`	`BadgeColor`	Color for bar/ring
`config.showAs.divideBy`	`number`	Max value (default: 100)

Select

Displays single selection as a colored badge.

electronicsclothingfood

"use client";

import { SelectProperty } from "@sparkyidea/dataview/properties";

const config = {
  options: [
    { value: "electronics", color: "blue" as const },
    { value: "clothing", color: "purple" as const },
    { value: "food", color: "green" as const },
  ],
};

export function SelectPropertyDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <SelectProperty config={config} value="electronics" />
      <SelectProperty config={config} value="clothing" />
      <SelectProperty config={config} value="food" />
    </div>
  );
}

Props:

Prop	Type	Description
`value`	`string \| null`	Selected value
`config.options`	`{ value: string, color: BadgeColor }[]`	Available options

Status

Displays status values with icons and colors grouped by category.

todoin_progressdonecancelled

"use client";

import { StatusProperty } from "@sparkyidea/dataview/properties";
import { CheckCircle, CircleDashed, Clock, XCircle } from "lucide-react";

const config = {
  groups: [
    {
      name: "Not Started",
      color: "gray" as const,
      icon: CircleDashed,
      options: ["backlog", "todo"],
    },
    {
      name: "In Progress",
      color: "blue" as const,
      icon: Clock,
      options: ["in_progress", "in_review"],
    },
    {
      name: "Complete",
      color: "green" as const,
      icon: CheckCircle,
      options: ["done"],
    },
    {
      name: "Cancelled",
      color: "red" as const,
      icon: XCircle,
      options: ["cancelled"],
    },
  ],
};

export function StatusPropertyDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <StatusProperty config={config} value="todo" />
      <StatusProperty config={config} value="in_progress" />
      <StatusProperty config={config} value="done" />
      <StatusProperty config={config} value="cancelled" />
    </div>
  );
}

Props:

Prop	Type	Description
`value`	`string \| null`	Status value
`config.groups`	`StatusGroup[]`	Groups with label, color, icon, options

Checkbox

Displays boolean values as a checkbox.

"use client";

import { CheckboxProperty } from "@sparkyidea/dataview/properties";

export function CheckboxPropertyDemo() {
  return (
    <div className="flex gap-4">
      <CheckboxProperty value={true} />
      <CheckboxProperty value={false} />
    </div>
  );
}

Date

Displays date/time values with locale-aware formatting.

March 15, 2026 2:30 PMMar 15, 2026 2:30 PMabout 2 months ago2026-03-15 2:30 PM

"use client";

import { DateProperty } from "@sparkyidea/dataview/properties";

export function DatePropertyDemo() {
  const date = new Date("2026-03-15T14:30:00");

  return (
    <div className="flex flex-col gap-2">
      <DateProperty config={{ dateFormat: "full" }} value={date} />
      <DateProperty config={{ dateFormat: "short" }} value={date} />
      <DateProperty config={{ dateFormat: "relative" }} value={date} />
      <DateProperty config={{ dateFormat: "YMD" }} value={date} />
    </div>
  );
}

Props:

Prop	Type	Description
`value`	`Date \| string \| null`	Date value
`config.dateFormat`	`"full" \| "short" \| "MDY" \| "DMY" \| "YMD" \| "relative"`	Format style
`config.timeFormat`	`"hidden" \| "12hour" \| "24hour"`	Time display

Badge Colors

All select-based properties support these colors:

Color	Use case
`gray`	Default, neutral
`blue`	Information
`purple`	Special, premium
`yellow`	Warning
`red`	Error, danger
`pink`	Accent
`green`	Success
`teal`	Secondary

Property Components

Text

Number

Select

Status

Checkbox

Date

Badge Colors

On this page