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 13, 2024 9:59pm

[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:

[mirnawong1]

i keep getting the same error but made some changes and the deploy looks good! incredible job @matthewshaver !!!

[breezyfasano]

Hey Matt! This is a totally awesome implementation. Really nice work here. It was clever to include cases for different alignment codes for table rows in markdown - I always forget those syntax options exist!

Re: what I was saying in our meeting yesterday: if you really wanted to, you could wrap parseMarkdownTable in a useMemo hook to avoid it running on every re-render for performance reasons! But I did check out the component on the enterprise perms table, adjusted some things to re-run the state, and the performance hit is negligible.

I wouldn't say it's a blocking change IMO, but feel free to update it if you want to! All in all, this LGTM. 🚢