Adding sortable tables

[matthewshaver]

What are you changing in this pull request and why?

Adding sortable tables by wrapping markdown in react.

Static tables function the same. To make a sortable table would wrap markdown table with :

<SortableTable>

{`

Markdown table here

`}

</SortableTable>

I couldn't successfully format this so that the { } are not required.

I also couldn't figure out how to enforce this globally (which was a request). It has to be implemented purposefully.

In the UI this will put light grey arrows to the right of the headers. When users click the arrows it will sort the table according to the column and the directional arrow will be darker. There is no "reset," but if the user reloads the page, the table will be in the original order if it wasn't alphabetical by the first column already (which it really should be unless it's a connections config table).

Checklist

• I have reviewed the Content style guide so my content adheres to these guidelines.
• The topic I'm writing about is for specific dbt version(s) and I have versioned it according to the version a whole page and/or version a block of content guidelines.
• I have added checklist item(s) to this list for anything anything that needs to happen before this PR is merged, such as "needs technical review" or "change base branch."
• The content in this PR requires a dbt release note, so I added one to the release notes page.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
docs-getdbt-com	✅ Ready (Inspect)	Visit Preview	Nov 8, 2024 4:15am

[mirnawong1]

hey @matthewshaver , this looks great! however the sortable table component doesn't seem to supported elements such as bolded or line breaks, links, etc.

this is what i tested in the website/docs/docs/cloud/about-cloud/regions-ip-addresses.md file:

<SortableTable >
{`

| Region | Location | Access URL | IP addresses | Developer plan | Team plan | Enterprise plan |
|--------|----------|------------|--------------|----------------|-----------|-----------------|
| North America [^1] | AWS us-east-1 (N. Virginia) | **Multi-tenant:** cloud.getdbt.com <br /> **Cell based:** ACCOUNT_PREFIX.us1.dbt.com | 52.45.144.63 <br /> 54.81.134.249 <br />52.22.161.231 <br />52.3.77.232 <br />3.214.191.130 <br />34.233.79.135 | ✅ | ✅ | ✅ |
| EMEA [^1] | AWS eu-central-1	(Frankfurt) | emea.dbt.com | 3.123.45.39 <br /> 3.126.140.248 <br /> 3.72.153.148 | ❌ | ❌ | ✅ |
| EMEA [^1] | Azure <br /> North Europe (Ireland)  |    **Cell based:** ACCOUNT_PREFIX.eu2.dbt.com  | 20.13.190.192/26                                     | ❌ | ❌ | ✅ |
| APAC  [^1] | 	AWS ap-southeast-2  (Sydney)| au.dbt.com | 52.65.89.235 <br /> 3.106.40.33 <br /> 13.239.155.206 <br />| ❌ | ❌ | ✅ |
| Virtual Private dbt or Single tenant | Customized |  Customized | Ask [Support](/community/resources/getting-help#dbt-cloud-support) for your IPs | ❌ | ❌ | ✅ |

`}
</SortableTable>

the front end team will know more but i wonder if the solution is it needs to use a markdown parser library to support markdown and HTML for each cell?

here are the images: