Adding sortable tables

website/snippets/_enterprise-permissions-table.md

@@ -13,23 +13,27 @@
 Account roles enable you to manage the dbt Cloud account and manage the account settings (for example, generating service tokens, inviting users, and configuring SSO). They also provide project-level permissions. The **Account Admin** role is the highest level of access you can assign.  
 
 #### Account permissions for account roles
-| Account-level permission| Account Admin | Billing admin |  Manage <br></br> marketplace <br></br> apps | Project creator | Security admin | Viewer | 
-|:-------------------------|:-------------:|:------------:|:-------------------------:|:---------------:|:--------------:|:------:| 
-| Account settings        |     W         |               |                           |        R        |       R        |   R    |
-| Audit logs              |     R         |               |                           |                 |       R        |   R    |
-| Auth provider           |     W         |               |                           |                 |       W        |   R    |
-| Billing                 |     W         |       W       |                           |                 |                |   R    |
-| Connections             |     W         |               |                           |        W        |                |        |
-| Groups                  |     W         |               |                           |        R        |       W        |   R    |
-| Invitations             |     W         |               |                           |        W        |       W        |   R    |
-| IP restrictions         |     W         |               |                           |                 |       W        |   R    |
-| Licenses                |     W         |               |                           |        W        |       W        |   R    |
-| Marketplace app         |               |               |            W              |                 |                |        |
-| Members                 |     W         |               |                           |        W        |       W        |   R    |
-| Project (create)        |     W         |               |                           |        W        |                |        |
-| Public models           |     R         |       R       |                           |        R        |       R        |   R    |
-| Service tokens          |     W         |               |                           |                 |       R        |   R    |
-| Webhooks                |     W         |               |                           |                 |                |        |
+
+<SortableTable columnAlignments={['center', 'center', 'center','center', 'center', 'center','center']} >
+{`
+| Account-level permission| Account Admin | Billing admin |  Manage marketplace apps | Project creator | Security admin | Viewer | 
+| Account settings        |     W         |       -        |        -                  |        R        |       R        |   R    |
+| Audit logs              |     R         |        -       |        -                  |        -        |       R        |   R    |
+| Auth provider           |     W         |       -        |        -                  |        -        |       W        |   R    |
+| Billing                 |     W         |       W       |         -                 |         -       |        -        |   R    |
+| Connections             |     W         |       -        |        -                  |        W        |       -        |   -     |
+| Groups                  |     W         |       -        |        -                  |        R        |       W        |   R    |
+| Invitations             |     W         |       -        |        -                  |        W        |       W        |   R    |
+| IP restrictions         |     W         |       -        |        -                  |        -        |       W        |   R    |
+| Licenses                |     W         |       -        |        -                  |        W        |       W        |   R    |
+| Marketplace app         |     -          |       -        |            W              |       -         |      -         |  -     |
+| Members                 |     W         |       -        |        -                  |        W        |       W        |   R    |
+| Project (create)        |     W         |       -        |        -                  |        W        |       -        |   -    |
+| Public models           |     R         |       R       |         -                 |        R        |       R        |   R    |
+| Service tokens          |     W         |       -        |        -                  |        -        |       R        |   R    |
+| Webhooks                |     W         |       -        |        -                  |        -        |       -        |   -    |
+`}
+</SortableTable>
 
 #### Project permissions for account roles
 

website/src/components/sortableTable/index.js

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+
+const parseMarkdownTable = (markdown) => {
+  const rows = markdown.trim().split('\n');
+  const headers = rows[0].split('|').map((header) => header.trim()).filter(Boolean);
+  const data = rows.slice(1).map(row => row.split('|').map(cell => cell.trim()).filter(Boolean));
+  return { headers, data };
+};
+
+const SortableTable = ({ children, columnAlignments }) => {
+  const { headers, data: initialData } = parseMarkdownTable(children);
+
+  const [data, setData] = useState(initialData);
+  const [sortConfig, setSortConfig] = useState({ key: '', direction: 'asc' });
+
+  const sortTable = (keyIndex) => {
+    const newDirection = (sortConfig.key === keyIndex && sortConfig.direction === 'asc') ? 'desc' : 'asc';
+    setSortConfig({ key: keyIndex, direction: newDirection });
+
+    const sortedData = [...data].sort((a, b) => {
+      const aVal = a[keyIndex];
+      const bVal = b[keyIndex];
+      if (aVal < bVal) return newDirection === 'asc' ? -1 : 1;
+      if (aVal > bVal) return newDirection === 'asc' ? 1 : -1;
+      return 0;
+    });
+
+    setData(sortedData);
+  };
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          {headers.map((header, index) => (
+            <th 
+              key={index} 
+              onClick={() => sortTable(index)} 
+              style={{ cursor: 'pointer', position: 'relative', textAlign: columnAlignments[index] || 'left', padding: '10px' }} // Apply alignment
+            >
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: columnAlignments[index] === 'center' ? 'center' : columnAlignments[index] }}>
+                <span style={{ marginRight: '5px' }}>{header}</span>
+                {/* Always show both carets */}
+                <span style={{ 
+                  opacity: sortConfig.key === index && sortConfig.direction === 'asc' ? 1 : (sortConfig.key === index ? 0.5 : 0.5) 
+                }}>
+                  ↑
+                </span>
+                <span style={{
+                  marginLeft: '5px', 
+                  opacity: sortConfig.key === index && sortConfig.direction === 'desc' ? 1 : (sortConfig.key === index ? 0.5 : 0.5) 
+                }}>
+                  ↓
+                </span>
+              </div>
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((row, rowIndex) => (
+          <tr key={rowIndex}>
+            {row.map((cell, cellIndex) => (
+              <td key={cellIndex} style={{ textAlign: columnAlignments[cellIndex] || 'left', padding: '8px' }}>{cell || '\u00A0'}</td> // Apply alignment to cells
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default SortableTable;

website/src/theme/MDXComponents/index.js

@@ -13,6 +13,7 @@ import Mermaid from '@theme/Mermaid';
 /* dbt Customizations:
  * Imports the following components below for export
  */
+import SortableTable from '@site/src/components/SortableTable';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem'
 import Changelog from '@site/src/components/changelog';
@@ -95,5 +96,6 @@ const MDXComponents = {
   DetailsToggle: DetailsToggle,
   Expandable: Expandable,
   ConfettiTrigger: ConfettiTrigger,
+  SortableTable: SortableTable,
 };
 export default MDXComponents;