feat(#3581): add support for tables in markdown

CHANGELOG.md

@@ -12,6 +12,8 @@ changes.
 
 ### Added
 
+- Add support for the tables in markdown [Issue 3581](https://github.com/IntersectMBO/govtool/issues/3581)
+
 ### Fixed
 
 ### Changed

govtool/frontend/package.json

@@ -58,6 +58,7 @@
     "react-router-dom": "^6.13.0",
     "rehype-katex": "^7.0.1",
     "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "storybook-addon-manual-mocks": "^1.0.3",
     "storybook-addon-module-mock": "^1.3.4",

govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx

@@ -3,9 +3,11 @@ import { Box, Skeleton } from "@mui/material";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import Markdown from "react-markdown";
 import remarkMath from "remark-math";
+import remarkGfm from "remark-gfm";
 import rehypeKatex from "rehype-katex";
 import remarkBreaks from "remark-breaks";
 import "katex/dist/katex.min.css";
+import "./tableMarkdown.css";
 
 import { Typography, Tooltip, CopyButton, TooltipProps } from "@atoms";
 import { removeMarkdown } from "@/utils";
@@ -135,7 +137,7 @@ export const GovernanceActionCardElement = ({
   const renderMarkdown = () => (
     <Markdown
       components={markdownComponents}
-      remarkPlugins={[remarkMath, remarkBreaks]}
+      remarkPlugins={[remarkMath, remarkBreaks, remarkGfm]}
       rehypePlugins={[rehypeKatex]}
     >
       {text.toString()}

govtool/frontend/src/components/molecules/tableMarkdown.css

@@ -0,0 +1,23 @@
+table {
+  margin: 32px 0;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+table thead {
+  background-color: #d6e2ff80;
+}
+
+table th,
+table td {
+  padding: 6px 13px;
+  border: 1px solid #d6e2ff;
+}
+
+table td > :last-child {
+  margin-bottom: 0;
+}
+
+table tr:nth-child(2n) {
+  background-color: #d6e2ff80;
+}