Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-remark-grid-tables Build Status Coverage Status

This plugin parses custom Markdown syntax to describe tables. It just includes this package in the gatsby-remark chain

It’s useful for extending markdown tables to include things like rowspan, colspan etc.

It adds a new node type to the mdast produced by remark: gridTable.

A gridTable mdast node can contain the following mdast node types:

  • tableHeader
  • tableRow
  • tableCell

The stringified HTML result will be a table.

It is up to you to have CSS rules producing the desired result for these table.


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


<h1>Grid table</h1>
<h2>Basic example</h2>

      <th colspan="2" rowspan="1"><p>Table Headings</p></th>
      <th colspan="1" rowspan="1"><p>Here</p></th>
      <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>
      <td colspan="1" rowspan="2"><p>cell
      <td colspan="2" rowspan="1"><p>column spanning</p></td>
      <td colspan="1" rowspan="1"><p>normal</p></td>
      <td colspan="1" rowspan="1"><p>cell</p></td>
      <td colspan="1" rowspan="1"><p>multi
      <td colspan="2" rowspan="1"><p>cells can be

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 install remark-grid-tables


MIT © Zeste de Savoir

© 2023 Gatsby, Inc.