This plugin parses custom Markdown syntax to describe tables. It was inspired by this syntax.
It adds a new node type to the mdast produced by remark: gridTable
.
If you are using rehype, the stringified HTML result will be a table
.
It is up to you to have CSS rules producing the desired result for these table
.
interface GridTable <: Parent {
type: "gridTable";
data: {
hName: "table";
}
}
A gridTable
mdast node can contain the following mdast node types:
interface TableHeader <: Parent {
type: "tableHeader";
data: {
hName: "thead" or "tbody";
}
}
Where hName
can be either thead
or tbody
.
interface TableRow <: Parent {
type: "tableRow";
data: {
hName: "tr";
}
}
interface TableCell <: Parent {
type: "tableCell";
data: {
hName: "td";
hProperties: {
colspan: number >= 1;
rowspan: number >= 1;
}
}
}
For example:
# Grid table
## Basic example
+-------+----------+------+
| Table Headings | Here |
+-------+----------+------+
| Sub | Headings | Too |
+=======+==========+======+
| cell | column spanning |
+ spans +----------+------+
| rows | normal | cell |
+-------+----------+------+
| multi | cells can be |
| line | *formatted* |
| | **paragraphs** |
| cells | |
| too | |
+-------+-----------------+
produces:
<h1>Grid table</h1>
<h2>Basic example</h2>
<table>
<thead>
<tr>
<th colspan="2" rowspan="1"><p>Table Headings</p></th>
<th colspan="1" rowspan="1"><p>Here</p></th>
</tr>
<tr>
<th colspan="1" rowspan="1"><p>Sub</p></th>
<th colspan="1" rowspan="1"><p>Headings</p></th>
<th colspan="1" rowspan="1"><p>Too</p></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1" rowspan="2"><p>cell
spans
rows</p></td>
<td colspan="2" rowspan="1"><p>column spanning</p></td>
</tr>
<tr>
<td colspan="1" rowspan="1"><p>normal</p></td>
<td colspan="1" rowspan="1"><p>cell</p></td>
</tr>
<tr>
<td colspan="1" rowspan="1"><p>multi
line</p><p>cells
too</p></td>
<td colspan="2" rowspan="1"><p>cells can be
<em>formatted</em>
<strong>paragraphs</strong></p></td>
</tr>
</tbody>
</table>
Note: the top of a cell must be indicated by +-
followed by some -
or +
and finished by -+
.
So, this is not a correct cell:
+--+
|a |
+--+
But, this is a correct cell:
+---+
| a |
+---+
npm:
npm install remark-grid-tables
Dependencies:
const unified = require('unified')
const remarkParse = require('remark-parse')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')
const remarkGridTables = require('remark-grid-tables')
Usage:
unified()
.use(remarkParse)
.use(remarkGridTables)
.use(remark2rehype)
.use(stringify)