Tables

Use styled tables for comparisons, feature matrices, and concise reference data inside docs articles.

Use a Table when the content is easier to scan row by row than as a paragraph or list.

Use in MDX

Pass headers and rows arrays directly in your article:

<Table
  headers={['Plan', 'Seats', 'Support']}
  rows={[
    ['Starter', '5', 'Email'],
    ['Team', '25', 'Priority email'],
    ['Enterprise', 'Unlimited', 'Dedicated channel'],
  ]}
/>

You can also align columns and add a caption:

<Table
  caption="Support coverage by plan"
  headers={['Plan', 'Seats', 'Support']}
  align={['left', 'right', 'left']}
  rows={[
    ['Starter', '5', 'Email'],
    ['Team', '25', 'Priority email'],
    ['Enterprise', 'Unlimited', 'Dedicated channel'],
  ]}
/>

Implementation notes

The component lives in src/components/docs/Table.astro. If you want denser spacing or different visual treatment, update that file and the .docs-table* rules in src/index.css.

Preview

Workflow Best for Setup time
Local MDX editingSmall teams and fast updates10 min
CMS-backed workflowEditorial review and non-technical authors1-2 days
Embedded help panelIn-product documentation and contextual guidance1 day