List Tables

Tables are the only complex stuff in markdown.

Docusaurus - MDX

If the table consists of simple text and no complex UI and no column width control. This can be plain markdown syntax as below:

| Field             | Description                                                                                                                                                                                                                                                                                                                                                                              |
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Region            | The region of the datacentre where your New Relic account stores its data. [Read more about regions on New Relic docs.](https://docs.newrelic.com/docs/using-new-relic/welcome-new-relic/get-started/our-eu-us-region-data-centers)                                                                                                                                                      |
| API Key           | API keys are unique to your organization. An API key is required by the New Relic API to submit metrics and events to New Relic. You can get the API key from [here](https://one.newrelic.com/launcher/api-keys-ui.api-keys-launcher) if you are in New Relic US region and [here](https://one.eu.newrelic.com/launcher/api-keys-ui.api-keys-launcher) if you're in New Relic EU region. |
| Host              | The name of the originating host of the log and metrics.                                                                                                                                                                                                                                                                                                                                 |
| Custom Attributes | Custom Attributes associated with your logs and metrics. A default source tag `hasura-cloud-metrics` is added to all exported logs and metrics. Attributes `project_id` and `project_name` are added to all exported metrics.                                                                                                                                                            |
| Service Name      | The name of the application or service generating the log events.                                                                                                                                                                                                                                                                                                                        |

Unfortunately, markdown doesn't have straightforward syntax to control the width and had to rely on html for this.

<table>
  <thead>
    <tr>
      <th width="20%">Field</th>
      <th width="40%">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Region</td>
      <td>The region of the datacentre where your New Relic account stores its data. <Link to="https://docs.newrelic.com/docs/using-new-relic/welcome-new-relic/get-started/our-eu-us-region-data-centers">Read more about regions on New Relic docs.</Link></td>
    </tr>
    <tr>
      <td>API Key</td>
      <td>API keys are unique to your organization. An API key is required by the New Relic API to submit metrics and events to New Relic. You can get the API key from <Link to="https://one.newrelic.com/launcher/api-keys-ui.api-keys-launcher">here</Link> if you are in New Relic US region and <Link to="https://one.eu.newrelic.com/launcher/api-keys-ui.api-keys-launcher">here</Link> if you're in New Relic EU region.</td>
    </tr>
    <tr>
      <td>Host</td>
      <td>The name of the originating host of the log and metrics.</td>
    </tr>
    <tr>
      <td>Custom Attributes</td>
      <td>Custom Attributes associated with your logs and metrics. A default source tag <code>hasura-cloud-metrics</code> is added to all exported logs and metrics. Attributes <code>project_id</code> and <code>project_name</code> are added to all exported metrics.</td>
    </tr>
    <tr>
      <td>Service Name</td>
      <td>The name of the application or service generating the log events.</td>
    </tr>
  </tbody>
</table>

Few things to note:

If a table cell is mixed with text and markdown elements (code highlighters, links etc., Please prefer html syntax over markdown as markdown won't be parsed correctly.

<!-- Usage of <Link> for `[link](https://...)` -->
<tr>
  <td>Region</td>
  <td>The ... data. <Link to="https://docs.newrelic.com/docs/using-new-relic/welcome-new-relic/get-started/our-eu-us-region-data-centers">Read ... docs.</Link></td>
</tr>

<!-- Usage of <code> for `code` -->
<tr>
  <td>Custom Attributes</td>
  <td>Custom ... tag <code>hasura-cloud-metrics</code> is ... Attributes <code>project_id</code> and <code>project_name</code> are ... metrics.</td>
</tr>

Which would render like this

Field	Description
Region	The region of the datacentre where your New Relic account stores its data. Read more about regions on New Relic docs.
API Key	API keys are unique to your organization. An API key is required by the New Relic API to submit metrics and events to New Relic. You can get the API key from here if you are in New Relic US region and here if you're in New Relic EU region.
Host	The name of the originating host of the log and metrics.
Custom Attributes	Custom Attributes associated with your logs and metrics. A default source tag hasura-cloud-metrics is added to all exported logs and metrics. Attributes project_id and project_name are added to all exported metrics.
Service Name	The name of the application or service generating the log events.

With code blocks

When a table cell is just a codeblock, the normal triple tick syntax works fine. But, please do leave an intentional empty line before and after the code block. Also, start the code block and respective cell (td/th) at the very beginning of line (no empty tabs/spaces at start).

    <table>
      <thead>
        <tr>
          <th width="20%">Field</th>
          <th width="40%">Query</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>query</code></td>
    <td>

    ```graphql
      query MyQuery {
        ...
      }
    ```

    </td>
        </tr>
      </tbody>
    </table>

Do one better and ignore the indentation altogether for all tags in table. This might be bit of not so eye-friendly to read, but works. Please do not that this is required only when there is a cell involving code block.

Field	Query
query	query MyQuery { ... }

The :widths: can be added as width attribute to html - th. And the :header-rows: determines the number of header rows to be considered for <thead>.

    <table>
    <thead>
      <tr>
        <th width="10%">Status code</th>
        <th width="10%">Description</th>
        <th width="30%">Response Structure</th>
      </tr>
    </thead>
    <tbody>
    <tr>
    <td><code>200</code></td>
    <td>Success</td>
    <td>

    ```
    Request Specific
    ```

    </td>
    </tr>
    <tr>
    <td><code>400</code></td>
    <td>Bad Request</td>
    <td>

    ```haskell
    {
        "path"  : String,
        "error" : String
    }
    ```

    </td>
    </tr>
    <tr>
    <td><code>401</code></td>
    <td>Unauthorized</td>
    <td>

    ```haskell
    {
        "error" : String
    }
    ```

    </td>
    </tr>
    <tr>
    <td><code>500</code></td>
    <td>Internal server error</td>
    <td>

    ```haskell
    {
        "error" : String
    }
    ```

    </td>
    </tr>
    </tbody>
    </table>

Status code	Description	Response Structure
200	Success	Request Specific
400	Bad Request	{ "path" : String, "error" : String }
401	Unauthorized	{ "error" : String }
500	Internal server error	{ "error" : String }