> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# DataTable

Responsive structured tables for plans, limits, environment variables, SDK support, and compatibility matrices.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the DataTable playground on holydocs.com](https://holydocs.com/components/data-table).

## 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.

Requests and seats included per plan.

| Plan | Requests / month | Seats | Support |
| --- | --- | --- | --- |
| Free | ` 1,000 ` | ` 3 ` | Community |
| Pro | ` 100,000 ` | ` 25 ` | Email |
| 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](/components/columns)**

Equal-width column grid for side-by-side comparisons, feature lists, or mixed content layouts.
**[View](/components/view)**

Switchable content panels for presenting alternative configurations, languages, or frameworks.
**[Panel](/components/panel)**

Place supplementary content in the right-side panel alongside your main documentation.

## More

- Interactive playground: [DataTable on holydocs.com](https://holydocs.com/components/data-table)
- Component library index: [/components](/components)