From ef9006713b0e507837d073bdc6b43f8ea53f9e28 Mon Sep 17 00:00:00 2001
From: Alexey <andreewsky.alexey@gmail.com>
Date: Wed, 27 Nov 2024 00:41:06 +0300
Subject: [PATCH 1/2] Implement Table render in Markdown component

---
 packages/frontend/package.json                |  1 +
 .../src/components/markdown/Markdown.scss     | 22 +++++++++++++++++++
 .../frontend/src/components/markdown/index.js |  9 +++++++-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 6d433f865..27b297c1f 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -25,6 +25,7 @@
     "react-router-dom": "^6.12.1",
     "react-scripts": "5.0.1",
     "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.69.2",
     "web-vitals": "^2.1.4"
diff --git a/packages/frontend/src/components/markdown/Markdown.scss b/packages/frontend/src/components/markdown/Markdown.scss
index 7200bb399..8843b6ef1 100644
--- a/packages/frontend/src/components/markdown/Markdown.scss
+++ b/packages/frontend/src/components/markdown/Markdown.scss
@@ -19,4 +19,26 @@
     font-size: 100%;
     color: var(--chakra-colors-gray-250);
   }
+
+  &__TableWrapper {
+    border: 1px solid var(--chakra-colors-gray-800);
+    border-radius: var(--chakra-radii-lg);
+    overflow: hidden;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-radius: var(--chakra-radii-lg);
+    border: none;
+  }
+
+  th, td {
+    border: 1px solid var(--chakra-colors-gray-800);
+    padding: 8px;
+  }
+
+  th {
+    font-weight: bold;
+  }
 }
\ No newline at end of file
diff --git a/packages/frontend/src/components/markdown/index.js b/packages/frontend/src/components/markdown/index.js
index 40c923655..0eb74881c 100644
--- a/packages/frontend/src/components/markdown/index.js
+++ b/packages/frontend/src/components/markdown/index.js
@@ -1,5 +1,6 @@
 import Markdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
+import remarkGfm from 'remark-gfm'
 import HeadingRenderer from './HeadingRenderer'
 import './Markdown.scss'
 
@@ -8,13 +9,19 @@ export default function CustomMarkdown ({ children }) {
     <Markdown
       className={'Markdown'}
       rehypePlugins={[rehypeRaw]}
+      remarkPlugins={[remarkGfm]}
       components={{
         h1: HeadingRenderer,
         h2: HeadingRenderer,
         h3: HeadingRenderer,
         h4: HeadingRenderer,
         h5: HeadingRenderer,
-        h6: HeadingRenderer
+        h6: HeadingRenderer,
+        table: ({ node, ...props }) => (
+          <div className='Markdown__TableWrapper'>
+            <table {...props} />
+          </div>
+        )
       }}
     >
       {children}

From b047cfb88bbd2dd7e219d7458e188c402e43d83a Mon Sep 17 00:00:00 2001
From: Alexey <andreewsky.alexey@gmail.com>
Date: Wed, 27 Nov 2024 01:01:39 +0300
Subject: [PATCH 2/2] Add scrollbar to Table in Markdown

---
 .../src/components/markdown/Markdown.scss     | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/markdown/Markdown.scss b/packages/frontend/src/components/markdown/Markdown.scss
index 8843b6ef1..90e0c7d2e 100644
--- a/packages/frontend/src/components/markdown/Markdown.scss
+++ b/packages/frontend/src/components/markdown/Markdown.scss
@@ -23,13 +23,32 @@
   &__TableWrapper {
     border: 1px solid var(--chakra-colors-gray-800);
     border-radius: var(--chakra-radii-lg);
-    overflow: hidden;
+    overflow-x: auto;
+
+    th:first-child,
+    td:first-child {
+      border-left: none;
+    }
+
+    th:last-child,
+    td:last-child {
+      border-right: none;
+    }
+
+    tr:first-child th,
+    tr:first-child td {
+      border-top: none;
+    }
+
+    tr:last-child th,
+    tr:last-child td {
+      border-bottom: none;
+    }
   }
 
   table {
     width: 100%;
     border-collapse: collapse;
-    border-radius: var(--chakra-radii-lg);
     border: none;
   }