DataTable
Responsive structured tables for plans, limits, environment variables, SDK support, and compatibility matrices.
For isolated previews, theme switching, and sandbox editing, open the DataTable playground on holydocs.com .
When to use
Use this component when page density, comparison, or spatial composition matters as much as the words themselves.
Live Examples
Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.
Plan Limits
Pricing and entitlement comparison.
| Plan | Requests / month | Seats | Support |
|---|---|---|---|
| Free | 1,000 | 3 | Community |
| Pro | 100,000 | 25 | |
| Enterprise | Custom | Unlimited | Dedicated CSM |
mdx<DataTable caption="Requests and seats included per plan." columns={[ {"key":"plan","label":"Plan","emphasize":true}, {"key":"requests","label":"Requests / month","mono":true}, {"key":"seats","label":"Seats","mono":true}, {"key":"support","label":"Support"} ]} rows={[ {"plan":"Free","requests":"1,000","seats":"3","support":"Community"}, {"plan":"Pro","requests":"100,000","seats":"25","support":"Email"}, {"plan":"Enterprise","requests":"Custom","seats":"Unlimited","support":"Dedicated CSM"} ]}/>
Environment Variables
Dense config reference table.
| Variable | Required | Description |
|---|---|---|
| HOLYDOCS_API_KEY | Yes | Server-side token used for authenticated CLI and API calls. |
| HOLYDOCS_PROJECT_ID | Yes | Project identifier that maps requests to the correct docs workspace. |
| HOLYDOCS_BASE_URL | No | Overrides the default API host for self-hosted or preview environments. |
mdx<DataTable compact columns={[ {"key":"name","label":"Variable","mono":true,"emphasize":true}, {"key":"required","label":"Required","align":"center"}, {"key":"description","label":"Description"} ]} rows={[ {"name":"HOLYDOCS_API_KEY","required":"Yes","description":"Server-side token used for authenticated CLI and API calls."}, {"name":"HOLYDOCS_PROJECT_ID","required":"Yes","description":"Project identifier that maps requests to the correct docs workspace."}, {"name":"HOLYDOCS_BASE_URL","required":"No","description":"Overrides the default API host for self-hosted or preview environments."} ]}/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | JSON | [] | Array of column objects with key and label. |
rows | JSON | [] | Array of row objects keyed by the column key values. |
caption | string | -- | Optional caption displayed below the table. |
compact | boolean | false | Use denser row spacing. |
Usage
Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.
mdx<DataTable caption="Requests and seats included per plan." columns={[ {"key":"plan","label":"Plan","emphasize":true}, {"key":"requests","label":"Requests / month","mono":true}, {"key":"seats","label":"Seats","mono":true}, {"key":"support","label":"Support"} ]} rows={[ {"plan":"Free","requests":"1,000","seats":"3","support":"Community"}, {"plan":"Pro","requests":"100,000","seats":"25","support":"Email"}, {"plan":"Enterprise","requests":"Custom","seats":"Unlimited","support":"Dedicated CSM"} ]}/>
Tips
- Layout components amplify good content and bad content equally. Fix hierarchy and copy length before adding more structure.
- Test long headings, narrow screens, and translated strings. Layout bugs usually appear at the edges, not in the happy path.
- Use layout to create contrast between sections, not to decorate every paragraph.
Related Components
Columns
Equal-width column grid for side-by-side comparisons, feature lists, or mixed content layouts.
More
- Interactive playground: DataTable on holydocs.com
- Component library index: /components