PropertyTable

Document configuration options, API parameters, and component props with types, defaults, required flags, deprecation notices, and nested properties.

Import

import { PropertyTable, Property, PropertyGroup, Expandable } from "@nu-appdev/northwestern-starlight-theme/components";

Basic Usage

NorthwesternThemeConfig

#homepageNorthwesternHomepageConfig

Homepage hero layout configuration. See below for nested options.

#mermaidboolean | objecttrue

Mermaid diagram support. Set false to disable. Pass an object to override the default mermaid config.

<PropertyTable title="NorthwesternThemeConfig">
    <Property name="homepage" type="NorthwesternHomepageConfig">
        Homepage hero layout configuration. See below for nested options.
    </Property>
    <Property name="mermaid" type="boolean | object" default="true">
        Mermaid diagram support. Set `false` to disable. Pass an object to override
        the default mermaid config.
    </Property>
</PropertyTable>

Required Fields

Use the required prop to display a “Required” badge.

POST /api/users

#emailRequiredstring

The user’s email address. Must be unique.

#nameRequiredstring

Display name.

#role"admin" | "editor" | "viewer""viewer"

Permission level for the new user.

<PropertyTable title="POST /api/users">
    <Property name="email" type="string" required>
        The user's email address. Must be unique.
    </Property>
    <Property name="name" type="string" required>
        Display name.
    </Property>
    <Property name="role" type='"admin" | "editor" | "viewer"' default='"viewer"'>
        Permission level for the new user.
    </Property>
</PropertyTable>

Optional Indicator

Use showOptional on the table to label non-required properties.

#emailRequiredstring

The user’s email address.

#avatarstring

URL to a profile image.

<PropertyTable showOptional>
    <Property name="email" type="string" required>
        The user's email address.
    </Property>
    <Property name="avatar" type="string">
        URL to a profile image.
    </Property>
</PropertyTable>

Nested Properties

Use <Expandable> inside a <Property> to show child properties in a collapsible section.

#metadataobject

Arbitrary key-value pairs.

properties

#departmentstring

Organizational department.

#netidstring

Northwestern NetID.

<PropertyTable>
    <Property name="metadata" type="object">
        Arbitrary key-value pairs.
        <Expandable title="properties">
            <Property name="department" type="string">
                Organizational department.
            </Property>
            <Property name="netid" type="string">
                Northwestern NetID.
            </Property>
        </Expandable>
    </Property>
</PropertyTable>

Deprecated Fields

The deprecated prop strikes through the name and desaturates the row. The since prop adds a version badge.

#apiKeyDeprecatedstring

Deprecated. Use token instead. Will be removed in v3.0.

#tokenRequiredv2.0string

Authentication token from the dashboard.

<PropertyTable>
    <Property name="apiKey" type="string" deprecated>
        **Deprecated.** Use `token` instead. Will be removed in v3.0.
    </Property>
    <Property name="token" type="string" required since="2.0">
        Authentication token from the dashboard.
    </Property>
</PropertyTable>

Linked Types

typeHref makes the type annotation a clickable link, useful for linking to type definitions or external documentation.

config/services.php

#mailablesIlluminate\Mail\Mailable

Mailable class for outbound email.

#notificationsIlluminate\Notifications\Notification

Notification channel configuration.

#queueIlluminate\Queue\QueueManager

Queue connection and driver settings.

<Property
    name="mailables"
    type="Illuminate\Mail\Mailable"
    typeHref="https://laravel.com/docs/mail#generating-mailables"
>
    Mailable class for outbound email.
</Property>

Table Variant

variant="table" renders a columnar grid. Columns default to Prop / Type / Default, configurable via the columns prop.

Dialog

PropTypeDefault

#openboolean

#modalbooleantrue

<PropertyTable variant="table" title="Dialog">
    <Property name="open" type="boolean" />
    <Property name="modal" type="boolean" default="true" />
</PropertyTable>

Table with Badges

Badges display inline next to the property name.

PropTypeDefault

#srcRequiredstring

#loadingv2.0"eager" | "lazy""lazy"

#srcSetDeprecatedstring

On mobile, the table variant falls back to the list layout.

Custom Columns

Control which columns appear and their labels with the columns prop. Pass field keys ("name", "type", "default") or { key, label } objects.

Data attributeValues

#[data-state]"open" | "closed"

#[data-disabled]Present when disabled

<PropertyTable
    variant="table"
    columns={[
        { key: "name", label: "Data attribute" },
        { key: "type", label: "Values" },
    ]}
>
    <Property name="[data-state]" type='"open" | "closed"' />
    <Property name="[data-disabled]" type="Present when disabled" />
</PropertyTable>

Grouped Properties

<PropertyGroup> adds subheading dividers to break large tables into sections.

ServerConfig

Connection

#hoststring"localhost"

Server hostname.

#portnumber3000

Port to listen on.

Security

#tlsbooleanfalse

Enable TLS encryption.

<PropertyTable title="ServerConfig">
    <PropertyGroup title="Connection">
        <Property name="host" type="string" default='"localhost"'>
            Server hostname.
        </Property>
        <Property name="port" type="number" default="3000">
            Port to listen on.
        </Property>
    </PropertyGroup>
    <PropertyGroup title="Security">
        <Property name="tls" type="boolean" default="false">
            Enable TLS encryption.
        </Property>
    </PropertyGroup>
</PropertyTable>

Without Title

Omit title for inline property lists.

#verbosebooleanfalse

Enable verbose logging output.

#timeoutnumber30000

Request timeout in milliseconds.

<PropertyTable> Props

Implementation: PropertyTable.astro

#titlestring

Heading displayed in the card header.

#variant"list" | "table""list"

"list" renders stacked rows with descriptions. "table" renders a columnar grid.

#columns(string | { key, label })[]["name", "type", "default"]

Columns for table variant. Each entry is a field key ("name", "type", "default") or a { key, label } object for custom headers.

#showOptionalbooleanfalse

Labels non-required, non-deprecated properties as “Optional.”

<Property> Props

Implementation: Property.astro

#nameRequiredstring

Property name, displayed in monospace.

#typestring

Type annotation in monospace. Supports union syntax like "string | number".

#typeHrefstring

URL to link the type annotation to. Makes the type clickable.

#defaultstring

Default value, displayed in a purple-tinted badge.

#requiredbooleanfalse

Displays a “Required” badge.

#deprecatedbooleanfalse

Strikes through the name and desaturates the row.

#sincestring

Version added. Displays a teal badge.

<PropertyGroup> Props

Implementation: PropertyGroup.astro

#titleRequiredstring

Group heading text, rendered as a full-width subheading row.

<Expandable> Props

Implementation: Expandable.astro

#titlestring"Show properties"

Label for the toggle.

#openbooleanfalse

Start expanded.