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

#homepage NorthwesternHomepageConfig

Homepage hero layout configuration. See below for nested options.

#mermaid boolean | object true

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

#email Required string

The user’s email address. Must be unique.

#name Required string

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.

#email Required string

The user’s email address.

#avatar string

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.

#metadata object

Arbitrary key-value pairs.

properties

#department string

Organizational department.

#netid string

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.

#apiKey Deprecated string

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

#token Required v2.0 string

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

#mailables Illuminate\Mail\Mailable

Mailable class for outbound email.

#notifications Illuminate\Notifications\Notification

Notification channel configuration.

#queue Illuminate\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

#open boolean

#modal boolean true

<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

#src Required string

#loading v2.0 "eager" | "lazy" "lazy"

#srcSet Deprecated string

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

#host string "localhost"

Server hostname.

#port number 3000

Port to listen on.

Security

#tls boolean false

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.

#verbose boolean false

Enable verbose logging output.

#timeout number 30000

Request timeout in milliseconds.

<PropertyTable> Props

Implementation: PropertyTable.astro

#title string

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.

#showOptional boolean false

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

<Property> Props

Implementation: Property.astro

#name Required string

Property name, displayed in monospace.

#type string

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

#typeHref string

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

#default string

Default value, displayed in a purple-tinted badge.

#required boolean false

Displays a “Required” badge.

#deprecated boolean false

Strikes through the name and desaturates the row.

#since string

Version added. Displays a teal badge.

<PropertyGroup> Props

Implementation: PropertyGroup.astro

#title Required string

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

<Expandable> Props

Implementation: Expandable.astro

#title string "Show properties"

Label for the toggle.

#open boolean false

Start expanded.