Schema outline
The fields of an asset's schema as a readable outline, with a field panel and JSON/YAML views.
Guidance
The schema outline is the Schema tab of an asset, for flat SQL tables and deep Avro or JSON
schemas alike. Each field reads as two lines: its name, its type in everyday words ("Text",
"Money (GBP)", "List of line item", "One of 3 values: WEB, IOS, ANDROID") and markers (Key,
PII, Certified), then its description with glossary terms beside it. Only exceptions are
marked: "Optional" for a nullable field, "Edited" for a description a person changed, and the
filled share when a field has gaps. Groups fold into a tree only where nesting exists, with a
hairline guide per level; top-level groups start open. density="compact" shows one line per
field for wide tables.
Selecting a field opens a side panel with the exact type, its values (filled share, distinct
count, range, histogram, allowed values, default), who can see it, glossary terms and a copyable
path. A Structure, JSON and YAML switch shows the schema as text with a copy button, from
source (the original Avro or JSON Schema document) when given, or from columns.
It is an ARIA treegrid (https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/) with row focus: one tab stop; Down and Up move between rows, Home and End go to the first and last; Right expands a group or moves to its first field, Left collapses it or moves to its parent (flipped in right-to-left); Enter opens the field panel and Escape closes it, returning focus to the row.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
columns | SchemaColumn[] | [] | The fields. | |
source | unknown | The schema as its source wrote it (an Avro or JSON Schema document, as an object or a JSON string), for the JSON and YAML views. Without it they show columns. | ||
view | view | 'structure' | 'json' | 'yaml' | 'structure' | The outline, or the schema as JSON or YAML text with a copy button. |
density | density | 'comfortable' | 'compact' | 'comfortable' | compact shows one line per field, for wide tables. |
label | label | string | '' | Accessible name. Defaults to "Schema". |
editable | editable | boolean | false | Shows "Edit description" in the field panel. |
filter | filter | string | '' | Finds fields by name, including nested ones. |
piiOnly | pii-only | boolean | false | Shows only fields that hold personal data. |
keysOnly | keys-only | boolean | false | Shows only key fields. |
selected | selected | string | '' | The path of the field open in the panel. |
hideToolbar | hide-toolbar | boolean | false | |
loading | loading | boolean | false | |
error | error | string | '' | Error text; shows a retry button. |
emptyText | empty-text | string | '' | Empty state sentence. |
Methods
| Method | Description |
|---|---|
expandAll() | Expands every group. |
collapseAll() | Collapses every group. |
Events
| Event | Detail | Description |
|---|---|---|
mm-select-field | CustomEvent<MmSelectFieldDetail> | A field was opened in the panel. |
mm-edit-description | CustomEvent<MmEditDescriptionDetail> | The person asked to edit a field's description. |
mm-retry | CustomEvent<null> | The retry button in the error state was activated. |
CSS parts
| Part | Description |
|---|---|
toolbar | The find, filter and view row. |
outline | The treegrid. |
panel | The field panel. |
text | The JSON or YAML view. |
CSS custom properties
| Property | Description |
|---|---|
--mm-schema-table-height | Height at which the outline scrolls. Defaults to none. |
Examples
Every state of mm-schema-table in Storybook, with keyboard and screen reader tests.