Type table component

Use the TypeTable component to document object shapes, API responses, and component props in a structured table.

Basic usage

Pass a type object where each key is a field name and the value describes its type, description, and constraints:


<TypeTable
  type={{
    id: {
      description: "Unique project identifier.",
      type: "string",
      required: true,
    },
    name: {

Published with Edda

Field	Type	Description	Required
`id`	string	Unique project identifier.	Yes
`name`	string	Display name of the project.	Yes
`slug`	string	URL-safe project slug.	Yes
`customDomain`	string	Custom domain if configured.	Optional
`createdAt`	string	ISO 8601 timestamp of project creation.	Yes


<TypeTable
  type={{
    appearance: {
      description: "Initial color mode for the site.",
      type: '"system" | "light" | "dark"',
      default: '"system"',
      required: false,
    },
    lang: {
      description: "Default language for code blocks.",
      type: "string",
      default: '"plaintext"',
      required: false,
    },
    toc: {
      description: "Show a table of contents on each page.",
      type: "boolean",
      default: "true",
      required: false,
    },
  }}
/>

Field	Type	Description	Required	Default
`appearance`	"system" \| "light" \| "dark"	Initial color mode for the site.	Optional	"system"
`lang`	string	Default language for code blocks.	Optional	"plaintext"
`toc`	boolean	Show a table of contents on each page.	Optional	true

Field	Type	Description	Required
`description`	string	Human-readable explanation of the field.	Optional
`type`	string	The field's type annotation.	Optional
`required`	boolean	Whether the field is required. Defaults to the inverse of `optional`.	Optional
`optional`	boolean	Whether the field is optional. Inverse of `required`.	Optional
`default`	string	Default value shown in the table.	Optional

Type table component

Basic usage

Type table component

Basic usage

With default values

Field options