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 editing | Small teams and fast updates | 10 min |
| CMS-backed workflow | Editorial review and non-technical authors | 1-2 days |
| Embedded help panel | In-product documentation and contextual guidance | 1 day |