# Docs Table

A reference table whose rows hang their descriptions off a button beside the name.

A docs table lists names, types and values. A description sits behind the button beside its cell, so a long reference reads as a list of names rather than a wall of sentences.

::docs-table
---
columns:
  - label: Prop
  - label: Type
  - label: Default
rows:
  - items:
      - label: id
        description: Identifies the instance for `useMagicDrawer`.
      - label: string
      - label: none
        plaintext: true
  - items:
      - label: options
        description: Configures the drawer. See [Options](#options).
      - label: MagicDrawerOptions
      - label: '{}'
---
::

## Usage

Write the table as front matter of the directive. Every cell is inline Markdown: `code`, links, **strong** and *emphasis*.

```mdc
::docs-table
---
columns:
  - label: Prop
  - label: Type
rows:
  - items:
      - label: id
        description: Identifies the instance for `useMagicDrawer`.
      - label: string
---
::
```

::docs-table
---
columns:
  - label: Key
  - label: Type
rows:
  - items:
      - label: label
        description: The cell’s content, as inline Markdown.
      - label: string
  - items:
      - label: description
        description: Shown behind the button beside the cell.
      - label: string
  - items:
      - label: plaintext
        description: Sets the cell as muted prose instead of code.
      - label: boolean
  - items:
      - label: escape
        description: Shows the label as written, without reading Markdown in it.
      - label: boolean
---
::

## Markdown tables

A Markdown table renders as a docs table too. If its last column is headed Description, that column becomes the description of each row’s first cell.

```md
| Variable | Default | Description |
| --- | --- | --- |
| `--docs-header` | `3.5rem` | The height of the header. |
```

| Variable | Default | Description |
| --- | --- | --- |
| `--docs-header` | `3.5rem` | The height of the header. |