Table
Display structured information with author-defined columns and rows.
On this page
| Name | Value |
|---|---|
timeout | 3000 |
retry | true |
View code
import Table from "@chitrank2050/monoline-docs/components/Table.astro";
<Table
caption="Settings"
columns={[
{ key: "name", label: "Name", format: "code" },
{ key: "value", label: "Value" },
]}
rows={[
{ name: "timeout", value: 3000 },
{ name: "retry", value: true },
]}
/>Usage
Import Table from @chitrank2050/monoline-docs/components/Table.astro.
Column keys read values from each row. Labels and content are supplied by the author;
props, variables, queries and other structured data use the same component.
Set format: "code" for code cells. Missing and null values display an em dash.
Compact
Use variant="compact" when the content needs less cell padding. The default has the standard documentation spacing.
| Name | Value | Description |
|---|---|---|
timeout | 3000 | Request timeout in milliseconds. |
retry | true | Retry failed requests. |
View code
import Table from "@chitrank2050/monoline-docs/components/Table.astro";
<Table
caption="Compact settings"
variant="compact"
columns={[
{ key: "name", label: "Name", format: "code" },
{ key: "value", label: "Value" },
{ key: "description", label: "Description" },
]}
rows={[
{
name: "timeout",
value: 3000,
description: "Request timeout in milliseconds.",
},
{
name: "retry",
value: true,
description: "Retry failed requests.",
},
]}
/>Props reference
Use variant="reference" for technical fields. Define a Default column for props;
use a Required column for type fields. Both use the same Table and visual variant.
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether the disclosure starts expanded. |
title | string | — | The disclosure label. |
View code
import Table from "@chitrank2050/monoline-docs/components/Table.astro";
<Table
variant="reference"
caption="Disclosure props"
columns={[
{ key: "name", label: "Name", format: "code" },
{ key: "type", label: "Type", format: "code" },
{ key: "default", label: "Default", format: "code" },
{ key: "description", label: "Description" },
]}
rows={[
{
name: "open",
type: "boolean",
default: "false",
description: "Whether the disclosure starts expanded.",
},
]}
/>Type reference
| Name | Type | Required | Description |
|---|---|---|---|
id | string | Yes | Unique record identifier. |
label | string | No | Optional display label. |
View code
import Table from "@chitrank2050/monoline-docs/components/Table.astro";
<Table
variant="reference"
caption="Record fields"
columns={[
{ key: "name", label: "Name", format: "code" },
{ key: "type", label: "Type", format: "code" },
{ key: "required", label: "Required", format: "code" },
{ key: "description", label: "Description" },
]}
rows={[
{
name: "id",
type: "string",
required: "Yes",
description: "Unique record identifier.",
},
]}
/>API reference
| Name | Type | Description |
|---|---|---|
columns | { key, label, format? }[] | Required. Unique keys, display labels and optional text/code format. |
rows | Record<string, Cell>[] | Required. Cells accept strings, numbers, booleans, null or undefined. |
caption | string | Required accessible table description. |
variant | default | compact | reference | Default, compact spacing, or reference layout for technical fields. |
Accessibility
The first column supplies row headings; column headings and captions use native table semantics. Overflow remains keyboard-scrollable. Cell content is escaped text.
Use this same component for API props, type fields and other tabular data by supplying the appropriate columns.