Add MarkdownTable to MarkdownRenderer

src/App.tsx

@@ -9,6 +9,7 @@ import { MarkdownPage } from './components/shared/MarkdownPage';
 import { Message } from './components/shared/Message/Message';
 import { useGetSummary } from './Hooks/useGetSummary';
 import { Document } from './pages/Document';
+import tableExample from './pages/example.md';
 import buildingFromSource from './pages/GettingStarted/BuildingFromSource.md';
 import gswApacheMavenPath from './pages/GettingStarted/GettingStartedWithApacheMaven.md';
 import gswGradlePath from './pages/GettingStarted/GettingStartedWithGradle.md';
@@ -79,6 +80,10 @@ export const App = (): JSX.Element => {
                                 <MarkdownPage filePath={buildingFromSource} />
                             }
                         />
+                        <Route
+                            path="/example"
+                            element={<MarkdownPage filePath={tableExample} />}
+                        />
                     </Routes>
                 </div>
             </main>

src/components/shared/MarkdownRenderer.tsx

@@ -3,6 +3,14 @@ import remarkGfm from 'remark-gfm';
 
 import { Divide } from './Divide/Divide';
 import { SyntaxHighlighter } from './SyntaxHighlighter';
+import {
+    MdTable,
+    MdTableBody,
+    MdTableCell,
+    MdTableHead,
+    MdTableHeader,
+    MdTableRow,
+} from './Table';
 
 interface IMarkdownRenderer {
     children: string;
@@ -14,7 +22,7 @@ export const MarkdownRenderer = (props: IMarkdownRenderer) => {
     return (
         <ReactMarkdown
             components={{
-                code({ inline, className, children, ...props }) {
+                code: ({ inline, className, children, ...props }) => {
                     const match = /language-(\w+)/.exec(className ?? '');
                     return (inline === undefined || !inline) &&
                         match !== null ? (
@@ -28,9 +36,39 @@ export const MarkdownRenderer = (props: IMarkdownRenderer) => {
                         </code>
                     );
                 },
-                hr() {
+                hr: () => {
                     return <Divide />;
                 },
+                table: (props) => {
+                    const { children } = props;
+
+                    return <MdTable>{children}</MdTable>;
+                },
+                thead: (props) => {
+                    const { children } = props;
+
+                    return <MdTableHead>{children}</MdTableHead>;
+                },
+                th: (props) => {
+                    const { children } = props;
+
+                    return <MdTableHeader>{children}</MdTableHeader>;
+                },
+                tbody: (props) => {
+                    const { children } = props;
+
+                    return <MdTableBody>{children}</MdTableBody>;
+                },
+                td: (props) => {
+                    const { children } = props;
+
+                    return <MdTableCell>{children}</MdTableCell>;
+                },
+                tr: (props) => {
+                    const { children } = props;
+
+                    return <MdTableRow>{children}</MdTableRow>;
+                },
             }}
             remarkPlugins={[remarkGfm]}
         >

src/components/shared/Table/MarkdownTable/MdTable.tsx

@@ -0,0 +1,13 @@
+import './styles.css';
+
+import { PropsWithChildren } from 'react';
+
+export const MdTable = (props: PropsWithChildren<unknown>): JSX.Element => {
+    const { children } = props;
+
+    return (
+        <div className="table-container">
+            <table className="table-container__table">{children}</table>
+        </div>
+    );
+};

src/components/shared/Table/MarkdownTable/MdTableBody.tsx

@@ -0,0 +1,9 @@
+import './styles.css';
+
+import { PropsWithChildren } from 'react';
+
+export const MdTableBody = (props: PropsWithChildren<unknown>): JSX.Element => {
+    const { children } = props;
+
+    return <tbody className="align-baseline">{children}</tbody>;
+};

src/components/shared/Table/MarkdownTable/MdTableCell.tsx

@@ -0,0 +1,9 @@
+import './styles.css';
+
+import { PropsWithChildren } from 'react';
+
+export const MdTableCell = (props: PropsWithChildren<unknown>): JSX.Element => {
+    const { children } = props;
+
+    return <td>{children}</td>;
+};

src/components/shared/Table/MarkdownTable/MdTableHead.tsx

@@ -0,0 +1,9 @@
+import './styles.css';
+
+import { PropsWithChildren } from 'react';
+
+export const MdTableHead = (props: PropsWithChildren<unknown>): JSX.Element => {
+    const { children } = props;
+
+    return <thead>{children}</thead>;
+};

src/components/shared/Table/MarkdownTable/MdTableHeader.tsx

@@ -0,0 +1,11 @@
+import './styles.css';
+
+import { PropsWithChildren } from 'react';
+
+export const MdTableHeader = (
+    props: PropsWithChildren<unknown>
+): JSX.Element => {
+    const { children } = props;
+
+    return <th className="table-container__header">{children}</th>;
+};

src/components/shared/Table/MarkdownTable/MdTableRow.tsx

@@ -0,0 +1,9 @@
+import './styles.css';
+
+import { PropsWithChildren } from 'react';
+
+export const MdTableRow = (props: PropsWithChildren<unknown>): JSX.Element => {
+    const { children } = props;
+
+    return <tr>{children}</tr>;
+};

src/components/shared/Table/MarkdownTable/index.ts

@@ -0,0 +1,6 @@
+export * from './MdTable';
+export * from './MdTableBody';
+export * from './MdTableCell';
+export * from './MdTableHead';
+export * from './MdTableHeader';
+export * from './MdTableRow';

src/components/shared/Table/MarkdownTable/styles.css

@@ -0,0 +1,46 @@
+.table-container__table thead {
+    @apply table-header-group;
+}
+
+.table-container {
+    @apply w-full;
+    @apply mx-auto mt-0 mb-10;
+    @apply max-h-[31.25rem];
+    @apply overflow-auto;
+}
+
+.table-container__table {
+    @apply w-auto;
+    @apply border-collapse;
+}
+
+.table-container__header {
+    @apply sticky;
+    @apply top-0;
+    @apply z-10;
+}
+
+.table-container__table tr {
+    @apply even:bg-[#27272b] odd:bg-[#303036];
+}
+
+.table-container__table thead tr {
+    @apply bg-claret;
+    @apply text-[#D0CEC8];
+    @apply drop-shadow-lg;
+}
+
+.table-container__table thead tr th {
+    @apply bg-claret;
+    @apply text-[#D0CEC8];
+}
+
+.table-container__table th {
+    @apply p-3;
+    @apply text-left;
+}
+
+.table-container__table td {
+    @apply p-3;
+    @apply text-left;
+}

src/components/shared/Table/Table.tsx → src/components/shared/Table/ResponsiveTable/ResponsiveTable.tsx

@@ -10,21 +10,10 @@ interface IRow {
 interface ITable {
     headers: string[];
     rows: IRow[];
-    breakOn?: 'small' | 'medium' | 'large';
 }
 
-export const Table = (props: ITable) => {
-    const { breakOn = 'medium', headers, rows } = props;
-
-    let tableClass = 'table-container__table';
-
-    if (breakOn === 'small') {
-        tableClass += ' table-container__table--break';
-    } else if (breakOn === 'medium') {
-        tableClass += ' table-container__table--break';
-    } else if (breakOn === 'large') {
-        tableClass += ' table-container__table--break';
-    }
+export const ResponsiveTable = (props: ITable): JSX.Element => {
+    const { headers, rows } = props;
 
     const data = rows.map((row) => {
         return (
@@ -39,14 +28,14 @@ export const Table = (props: ITable) => {
     });
 
     return (
-        <div className="table-container">
-            <table className={tableClass}>
+        <div className="responsive-table-container">
+            <table className="responsive-table-container__table">
                 <thead>
                     <tr>
                         {headers.map((col) => (
                             <th
                                 key={nanoid()}
-                                className="table-container__header"
+                                className="responsive-table-container__header"
                             >
                                 {col}
                             </th>

src/components/shared/Table/styles.css → src/components/shared/Table/ResponsiveTable/styles.css

@@ -1,49 +1,49 @@
-.table-container__table thead {
+.responsive-table-container__table thead {
     @apply hidden md:table-header-group;
 }
 
-.table-container {
+.responsive-table-container {
     @apply w-full;
     @apply mx-auto mt-0 mb-10;
     @apply max-h-[28.125rem] md:max-h-[31.25rem];
     @apply overflow-auto;
 }
 
-.table-container__table {
+.responsive-table-container__table {
     @apply w-auto;
     @apply border-collapse;
 }
 
-.table-container__header {
+.responsive-table-container__header {
     @apply md:sticky;
     @apply md:top-0;
     @apply md:z-10;
 }
 
-.table-container__table tr {
+.responsive-table-container__table tr {
     @apply md:even:bg-[#27272b] md:odd:bg-[#303036];
 
     @apply max-md:block;
     @apply max-md:mb-1 max-md:last:mb-0;
 }
 
-.table-container__table thead tr {
+.responsive-table-container__table thead tr {
     @apply md:bg-claret;
     @apply md:text-[#D0CEC8];
     @apply md:drop-shadow-lg;
 }
 
-.table-container__table thead tr th {
+.responsive-table-container__table thead tr th {
     @apply md:bg-claret;
     @apply md:text-[#D0CEC8];
 }
 
-.table-container__table th {
+.responsive-table-container__table th {
     @apply md:p-3;
     @apply md:text-left;
 }
 
-.table-container__table td {
+.responsive-table-container__table td {
     @apply block md:table-cell;
     @apply max-md:relative;
     @apply p-4 pl-32 md:p-3;

src/components/shared/Table/index.ts

@@ -0,0 +1,2 @@
+export * from './ResponsiveTable/ResponsiveTable';
+export * from './MarkdownTable';

src/pages/example.md

@@ -0,0 +1,7 @@
+| obj        | value | something                                                           |
+| ---------- | ----- | ------------------------------------------------------------------- |
+| foo        | 200   | ahjFDHSAJKÖGLSHNBGFJKLÖHSDG KLJÖSDHNJGKLSDHGKLSJGH FNLKÖSGFHSDLÖKG  |
+| bar        | 500   | KJKLASFDJKLASDFASDFDFJAKSLDFJSLKDGFSDJGLKSDGFSGDKLJM                |
+| Woap Woap  | 600   | SÖL:FGKÖLAÄGJR$EQJOKIRHGBTJKMQWRMTG WER- QWKJRQEHRJIUHQWRKL;M ASVF; |
+| Youp       | 7000  | LTREWKOLPÄEQRG                                                      |
+| Schnabelös | 30    | ÖLKLQWÖERB FSADEKJRGKLR AEEJQWHJQWTH                                |