Add table (#570)

* Add table

* Fix link

* Fine-tune

Author: reakaleek

docs/syntax/index.md

@@ -69,7 +69,7 @@ We support _some_ [GitHub Flavored Markdown (GFM) extensions](https://github.git
 
 ### Supported
 
-* [](tables.md#github-flavored-markdown-gfm-table)
+* [](tables.md#basic-table)
 * Strikethrough: ~~as seen here~~
 
 ### Not supported

docs/syntax/tables.md

@@ -6,24 +6,64 @@ A table is an arrangement of data with rows and columns. Each row consists of ce
 * a delimiter row separating the header from the data
 * zero or more data rows
 
-## Notes
+## Basic Table
 
-* A leading and trailing pipe is recommended for clarity of reading
-* Spaces between pipes and cell content are trimmed
-* Block-level elements cannot be inserted in a table
+::::{tab-set}
 
-## GitHub Flavored Markdown (GFM) Table
-
-You can use the GFM table syntax to create a table:
-
-```
+:::{tab-item} Output
 | Country | Capital         |
 | ------- | --------------- |
 | USA     | Washington D.C. |
 | Canada  | Ottawa          |
-```
+| Mexico  | Mexico City     |
+| Brazil  | Brasília        |
+| UK      | London          |
+:::
 
+:::{tab-item} Markdown
+```markdown
 | Country | Capital         |
 | ------- | --------------- |
 | USA     | Washington D.C. |
 | Canada  | Ottawa          |
+| Mexico  | Mexico City     |
+| Brazil  | Brasília        |
+| UK      | London          |
+:::
+
+::::
+
+:::{note}
+
+* A leading and trailing pipe is recommended for clarity of reading
+* Spaces between pipes and cell content are trimmed
+* Block-level elements cannot be inserted in a table
+
+:::
+
+
+## Responsive Table
+
+Every table is responsive by default. The table will automatically scroll horizontally when the content is wider than the viewport.
+
+::::{tab-set}
+
+:::{tab-item} Output
+| Product Name | Price ($) | Stock  | Category  | Rating  | Color    | Weight (kg) | Warranty (months) |
+|--------------|-----------|--------|-----------|---------|----------|-------------|-------------------|
+| Laptop Pro   | 1299.99   | 45     | Computer  | 4.5     | Silver   | 1.8         | 24                |
+| Smart Watch  | 299.99    | 120    | Wearable  | 4.2     | Black    | 0.045       | 12                |
+| Desk Chair   | 199.50    | 78     | Furniture | 4.8     | Gray     | 12.5        | 36                |
+:::
+
+:::{tab-item} Markdown
+```markdown
+| Product Name | Price ($) | Stock  | Category  | Rating  | Color    | Weight (kg) | Warranty (months) |
+|--------------|-----------|--------|-----------|---------|----------|-------------|-------------------|
+| Laptop Pro   | 1299.99   | 45     | Computer  | 4.5     | Silver   | 1.8         | 24                |
+| Smart Watch  | 299.99    | 120    | Wearable  | 4.2     | Black    | 0.045       | 12                |
+| Desk Chair   | 199.50    | 78     | Furniture | 4.8     | Gray     | 12.5        | 36                |
+:::
+```
+
+::::

src/Elastic.Markdown/Assets/markdown/table.css

@@ -0,0 +1,43 @@
+@layer components {
+	.table-wrapper {
+
+		@apply max-w-full overflow-x-auto my-4;
+
+		table {
+			@apply w-full border-collapse;
+		}
+		
+		th, td {
+			@apply py-2 px-4 min-w-30;
+		}
+
+		th:first-of-type {
+			border-top-left-radius: var(--radius-sm);
+		}
+		th:last-of-type {
+			border-top-right-radius: var(--radius-sm);
+		}
+		tr:last-of-type td:first-of-type {
+			border-bottom-left-radius: var(--radius-sm);
+		}
+		tr:last-of-type td:last-of-type {
+			border-bottom-right-radius: var(--radius-sm);
+		}
+		
+		thead {
+			@apply font-semibold text-sm text-left align-top;
+		}
+		
+		tbody {
+			
+			font-family: "Inter", sans-serif;
+			
+			tr {
+				@apply not-last:border-b-1 border-grey-30 hover:bg-grey-10;
+				/*&:nth-child(odd) {*/
+				/*	@apply bg-grey-10;*/
+				/*}*/
+			}
+		}
+	}
+}

src/Elastic.Markdown/Assets/styles.css

@@ -8,6 +8,7 @@
 @import "./copybutton.css";
 @import "./markdown/admonition.css";
 @import "./markdown/dropdown.css";
+@import "./markdown/table.css";
 @import "./markdown/definition-list.css";
 
 #default-search::-webkit-search-cancel-button {

src/Elastic.Markdown/Myst/Directives/DirectiveMarkdownExtension.cs

@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information
 
 using Markdig;
+using Markdig.Extensions.Tables;
 using Markdig.Parsers;
 using Markdig.Parsers.Inlines;
 using Markdig.Renderers;
@@ -56,5 +57,7 @@ public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
 		}
 
 		_ = renderer.ObjectRenderers.Replace<HeadingRenderer>(new SectionedHeadingRenderer());
+
+		_ = renderer.ObjectRenderers.Replace<HtmlTableRenderer>(new WrappedTableRenderer());
 	}
 }

src/Elastic.Markdown/Myst/WrappedTableRenderer.cs

@@ -0,0 +1,19 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using Markdig.Extensions.Tables;
+using Markdig.Renderers;
+
+namespace Elastic.Markdown.Myst;
+
+public class WrappedTableRenderer : HtmlTableRenderer
+{
+	protected override void Write(HtmlRenderer renderer, Table table)
+	{
+		// Wrap the table in a div to allow for overflow scrolling
+		_ = renderer.Write("<div class=\"table-wrapper\">");
+		base.Write(renderer, table);
+		_ = renderer.Write("</div>");
+	}
+}