From 1d3f476ff568001323a73b1c31c94ca5088eaa07 Mon Sep 17 00:00:00 2001
From: Matt Shaver <60105315+matthewshaver@users.noreply.github.com>
Date: Tue, 22 Oct 2024 17:26:42 -0400
Subject: [PATCH] Removing need to define alignment

---
 .../snippets/_enterprise-permissions-table.md |  5 +-
 website/src/components/sortableTable/index.js | 49 ++++++++++++++++---
 2 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/website/snippets/_enterprise-permissions-table.md b/website/snippets/_enterprise-permissions-table.md
index 51a3924bf87..04dca2f6090 100644
--- a/website/snippets/_enterprise-permissions-table.md
+++ b/website/snippets/_enterprise-permissions-table.md
@@ -14,9 +14,11 @@ Account roles enable you to manage the dbt Cloud account and manage the account
 
 #### Account permissions for account roles
 
-<SortableTable columnAlignments={['center', 'center', 'center','center', 'center', 'center','center']} >
+<SortableTable >
+
 {`
 | 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    |
@@ -33,6 +35,7 @@ Account roles enable you to manage the dbt Cloud account and manage the account
 | Service tokens          |     W         |       -        |        -                  |        -        |       R        |   R    |
 | Webhooks                |     W         |       -        |        -                  |        -        |       -        |   -    |
 `}
+
 </SortableTable>
 
 #### Project permissions for account roles
diff --git a/website/src/components/sortableTable/index.js b/website/src/components/sortableTable/index.js
index c51bb46bfa4..e1ebf7ff21a 100644
--- a/website/src/components/sortableTable/index.js
+++ b/website/src/components/sortableTable/index.js
@@ -3,12 +3,29 @@ 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 };
+
+  // Parse the alignment row
+  const alignmentsRow = rows[1].split('|').map((align) => align.trim()).filter(Boolean);
+  const columnAlignments = alignmentsRow.map((alignment) => {
+    if (alignment.startsWith(':') && alignment.endsWith(':')) {
+      return 'center';  // :-----:
+    } else if (alignment.startsWith(':')) {
+      return 'left';    // :-----
+    } else if (alignment.endsWith(':')) {
+      return 'right';   // -----:
+    } else {
+      return 'left';    // Default alignment
+    }
+  });
+
+  // Get the table data
+  const data = rows.slice(2).map(row => row.split('|').map(cell => cell.trim()).filter(Boolean));
+
+  return { headers, data, columnAlignments };
 };
 
-const SortableTable = ({ children, columnAlignments }) => {
-  const { headers, data: initialData } = parseMarkdownTable(children);
+const SortableTable = ({ children }) => {
+  const { headers, data: initialData, columnAlignments } = parseMarkdownTable(children);
 
   const [data, setData] = useState(initialData);
   const [sortConfig, setSortConfig] = useState({ key: '', direction: 'asc' });
@@ -36,11 +53,19 @@ const SortableTable = ({ children, columnAlignments }) => {
             <th 
               key={index} 
               onClick={() => sortTable(index)} 
-              style={{ cursor: 'pointer', position: 'relative', textAlign: columnAlignments[index] || 'left', padding: '10px' }} // Apply alignment
+              style={{ 
+                cursor: 'pointer', 
+                position: 'relative', 
+                textAlign: columnAlignments[index],  // Use detected alignment
+                padding: '10px' 
+              }} 
             >
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: columnAlignments[index] === 'center' ? 'center' : columnAlignments[index] }}>
+              <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) 
                 }}>
@@ -61,7 +86,15 @@ const SortableTable = ({ children, columnAlignments }) => {
         {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
+              <td 
+                key={cellIndex} 
+                style={{ 
+                  textAlign: columnAlignments[cellIndex],  // Use detected alignment
+                  padding: '8px' 
+                }}
+              >
+                {cell || '\u00A0'}
+              </td>
             ))}
           </tr>
         ))}