remark-grid-tables

This plugin parses custom Markdown syntax to describe tables. It was inspired by this syntax.

AST nodes

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:

tableHeader

interface TableHeader <: Parent {
  type: "tableHeader";
  data: {
    hName: "thead" or "tbody";
  }
}

Where hName can be either thead or tbody.

tableRow

interface TableRow <: Parent {
  type: "tableRow";
  data: {
    hName: "tr";
  }
}

tableCell

interface TableCell <: Parent {
  type: "tableCell";
  data: {
    hName: "td";
    hProperties: {
      colspan: number >= 1;
      rowspan: number >= 1;
    }
  }
}

Syntax

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 |
+---+

Installation

npm:

npm install remark-grid-tables

Usage

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)

License

MIT © Zeste de Savoir