@peaceroad/markdown-it-table-ex 0.1.0 → 0.2.0

package/README.md

@@ -4,6 +4,7 @@ A markdown-it plugin. For table processing, this plugin plus some extended synta
 
 - matrix (enabled by default.)
 - wrapper (option.)
+- colgroup (option.)
 
 Notice. This is intended to be used in conjunction with [markdown-it-multimd-table](https://github.com/redbug312/markdown-it-multimd-table) enabled the option: headerless, multiline, rowspan.
 
@@ -21,19 +22,6 @@ const md = mdit({ html: true }).use(mditMultimdTable, {
   }).use(mditTableEx)
 ```
 
-wrapper will be enabled as follows:
-
-```js
-const md = mdit({ html: true }).use(mditMultimdTable, {
-    headerless: true,
-    multiline: true,
-    rowspan: true,
-  }).use(mditTableEx, {
-    wrapper: true,
-  })
-```
-
-
 ## Extended notation
 
 ### matrix
@@ -100,6 +88,18 @@ If the leftmost cell of the table is surrounded by `**`, it will be converted to
 
 ### wrapper
 
+colgroup will be enabled as follows:
+
+```js
+const md = mdit({ html: true }).use(mditMultimdTable, {
+    headerless: true,
+    multiline: true,
+    rowspan: true,
+  }).use(mditTableEx, {
+    wrapper: true,
+  })
+```
+
 The table is wrapped in a div.table-wrapper element.
 I think this is useful for moving the table left and right when the screen width is narrow.
 
@@ -134,3 +134,130 @@ I think this is useful for moving the table left and right when the screen width
 </table>
 </div>
 ```
+
+## colgroup
+
+colgroup will be enabled as follows:
+
+```js
+const md = mdit({ html: true }).use(mditMultimdTable, {
+    headerless: true,
+    multiline: true,
+    rowspan: true,
+  }).use(mditTableEx, {
+    colgroup: true,
+  })
+```
+
+If you use grouped header notation in the table header (e.g., `**group:** hh1`), `<colgroup>` and `<thead>` with two tr lines will be generated. If there is no grouped header notation or only one, a normal single-row header is output and no colgroup is generated.
+
+In other words, to determine the group, if there is `**` at the beginning of a cell followed by `:**` (`：**`), it becomes a candidate, and is determined by matching it with the adjacent cells.
+
+**Examples**:
+
+```
+[Markdown]
+| hh0 | **group:** hh1  | **group:** hh2  | **group2:** hh1  | **group2:** hh2  |
+| --- | ---- | ---- | ---- | ---- |
+| vh1 |  11  |  12  | 13  |  14  |
+| vh2 |  21  |  22  | 23  |  24  |
+[HTML]
+<table>
+<colgroup>
+<col>
+<col span="2">
+<col span="2">
+</colgroup>
+<thead>
+<tr>
+<th rowspan="2" scope="col">hh0</th>
+<th colspan="2" scope="col">group</th>
+<th colspan="2" scope="col">group2</th>
+</tr>
+<tr>
+<th scope="col">hh1</th>
+<th scope="col">hh2</th>
+<th scope="col">hh1</th>
+<th scope="col">hh2</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>vh1</td>
+<td>11</td>
+<td>12</td>
+<td>13</td>
+<td>14</td>
+</tr>
+<tr>
+<td>vh2</td>
+<td>21</td>
+<td>22</td>
+<td>23</td>
+<td>24</td>
+</tr>
+</tbody>
+</table>
+```
+
+### colgroup with no asterisk
+
+Do you find it troublesome to write `**`? You can omit it by adding more options.
+
+```js
+const md = mdit({ html: true }).use(mditMultimdTable, {
+    headerless: true,
+    multiline: true,
+    rowspan: true,
+  }).use(mditTableEx, {
+    colgroup: true,
+    colgroupWithNoAsterisk: true,
+  })
+```
+
+In this case, if you use a half-width `:`, you need to follow it with one or more half-width spaces. If you use a full-width `:`, you don't need to follow it with a space.
+
+```
+[Markdown]
+| hh0 | foods: hh1  | foods: hh2  | drinks: hh1  | drinks: hh2  |
+| --- | ---- | ---- | ---- | ---- |
+| vh1 |  11  |  12  | 13  |  14  |
+| vh2 |  21  |  22  | 23  |  24  |
+[HTML]
+<table>
+<colgroup>
+<col>
+<col span="2">
+<col span="2">
+</colgroup>
+<thead>
+<tr>
+<th rowspan="2" scope="col">hh0</th>
+<th colspan="2" scope="col">foods</th>
+<th colspan="2" scope="col">drinks</th>
+</tr>
+<tr>
+<th scope="col">hh1</th>
+<th scope="col">hh2</th>
+<th scope="col">hh1</th>
+<th scope="col">hh2</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>vh1</td>
+<td>11</td>
+<td>12</td>
+<td>13</td>
+<td>14</td>
+</tr>
+<tr>
+<td>vh2</td>
+<td>21</td>
+<td>22</td>
+<td>23</td>
+<td>24</td>
+</tr>
+</tbody>
+</table>
+```