p7d-markdown-it-table-ex

A markdown-it plugin. For table processing, this plugin plus some extended syntax.

- matrix (enabled by default.)
- wrapper (option.)
- colgroup (option.)

Notice. This is intended to be used in conjunction with markdown-it-multimd-table enabled the option: headerless, multiline, rowspan.

Use

``js
import mdit from 'markdown-it'
import mditMultimdTable from 'markdown-it-multimd-table'
import mditTableEx from '@peaceroad/markdown-it-table-ex'

const md = mdit({ html: true }).use(mditMultimdTable, {
headerless: true,
multiline: true,
rowspan: true,
}).use(mditTableEx)
`

StrongJa detection

When @peaceroad/markdown-it-strong-ja is registered, this plugin detects markers by checking the inline rule named strong_ja and relies on inline tokens. If that rule is not present, it falls back to simple string checks so matrix/colgroup still work without strongJa.

Extended notation

$3

If the leftmost cell of the table is surrounded by **, it will be converted to a th element. Note that the first cell of thead can be empty.

`
[Markdown]
| | hh1 | hh2 |
| ------- | ---- | ---- |
| vh1 | 11 | 12 |
| vh2 | 21 | 22 |
[HTML]
























	hh1	hh2
vh1	11	12
vh2	21	22

[Markdown]
| hh0 | hh1 | hh2 |
| ------- | ---- | ---- |
| vh1 | 11 | 12 |
| vh2 | 21 | 22 |
[HTML]
























hh0	hh1	hh2
vh1	11	12
vh2	21	22


`

$3

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.

`
[Markdown]
| hh0 | hh1 | hh2 |
| --- | ---- | ---- |
| vh1 | 11 | 12 |
| vh2 | 21 | 22 |
[HTML]



`

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), and 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]







































hh0	group		group2
	hh1	hh2	hh1	hh2
vh1	11	12	13	14
vh2	21	22	23	24


`

$3

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]







































hh0	foods		drinks
	hh1	hh2	hh1	hh2
vh1	11	12	13	14
vh2	21	22	23	24


``