Type Table - Prisma — ContextQMD

import { TypeTable } from "@prisma/eclipse";

Usage

Basic Type Table

tsx

import { TypeTable } from "@prisma/eclipse";

export function ComponentProps() {
  return (
    <TypeTable
      type={{
        percentage: {
          description: "The percentage of scroll position to display the roll button",
          type: "number",
          default: "0.2",
        },
        disabled: {
          description: "Whether the component is disabled",
          type: "boolean",
          default: "false",
        },
      }}
    />
  );
}

Live Example:

With Required Props

tsx

import { TypeTable } from "@prisma/eclipse";

export function RequiredProps() {
  return (
    <TypeTable
      type={{
        id: {
          description: "Unique identifier for the component",
          type: "string",
          required: true,
        },
        onChange: {
          description: "Callback function when value changes",
          type: "(value: string) => void",
          required: true,
        },
        placeholder: {
          description: "Placeholder text to display",
          type: "string",
        },
      }}
    />
  );
}

Live Example:

<TypeTable type={{ id: { description: "Unique identifier for the component", type: "string", required: true, }, onChange: { description: "Callback function when value changes", type: "(value: string) => void", required: true, }, placeholder: { description: "Placeholder text to display", type: "string", }, }} />

With Complex Types

tsx

import { TypeTable } from "@prisma/eclipse";

export function ComplexTypes() {
  return (
    <TypeTable
      type={{
        variant: {
          description: "Visual style variant",
          type: '"primary" | "secondary" | "outline"',
          default: '"primary"',
        },
        size: {
          description: "Size of the component",
          type: '"sm" | "md" | "lg"',
          default: '"md"',
        },
        config: {
          description: "Configuration object",
          type: "{ theme: string; layout: string }",
        },
      }}
    />
  );
}

Live Example:

With Deprecated Props

tsx

import { TypeTable } from "@prisma/eclipse";

export function DeprecatedProps() {
  return (
    <TypeTable
      type={{
        color: {
          description: "Color of the component",
          type: "string",
        },
        bgColor: {
          description: "Background color (use 'color' instead)",
          type: "string",
          deprecated: true,
        },
      }}
    />
  );
}

Live Example:

TypeTable Props

type - Record of type definitions to display (Record<string, TypeTableItem>, required)
className - Additional CSS classes (optional)

TypeTableItem Properties

description - Description of the property (ReactNode, optional)
type - Type of the property (ReactNode, required)
typeDescription - Additional description for the type (ReactNode, optional)
typeDescriptionLink - Link for the type description (string, optional)
default - Default value (ReactNode, optional)
required - Whether the property is required (boolean, optional)
deprecated - Whether the property is deprecated (boolean, optional)
parameters - Parameters for function types (array, optional)
returns - Return type for function types (ReactNode, optional)

Features

✅ Clean table layout for documenting APIs
✅ Support for required and optional properties
✅ Deprecation indicators
✅ Default value display
✅ Complex type support with code formatting
✅ Built on Fumadocs TypeTable with Eclipse styling

Best Practices

Use clear, concise descriptions for each property
Always specify whether a prop is required
Include default values when applicable
Mark deprecated properties to guide users to newer alternatives
Use proper TypeScript syntax for type definitions
Group related properties together for better readability