Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hennessyevan/gatsby-remark-grid-tables
Adds Remark Grid Tables support to Gatsby
https://github.com/hennessyevan/gatsby-remark-grid-tables
colspan gatsby gatsby-plugin gatsby-remark gatsbyjs grid-table remark
Last synced: 10 days ago
JSON representation
Adds Remark Grid Tables support to Gatsby
- Host: GitHub
- URL: https://github.com/hennessyevan/gatsby-remark-grid-tables
- Owner: hennessyevan
- Archived: true
- Created: 2018-12-03T21:55:21.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T21:16:08.000Z (about 2 years ago)
- Last Synced: 2025-01-16T22:44:04.012Z (14 days ago)
- Topics: colspan, gatsby, gatsby-plugin, gatsby-remark, gatsbyjs, grid-table, remark
- Language: JavaScript
- Size: 162 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gatsby-remark-grid-tables [![Build Status][build-badge]][build-status] [![Coverage Status][coverage-badge]][coverage-status]
This plugin parses custom Markdown syntax to describe tables. It just includes [this package](https://github.com/zestedesavoir/zmarkdown/tree/master/packages/remark-grid-tables) 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][mdast] produced by [remark][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`.
## Syntax
For example:
```markdown
# 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:
```html
Grid table
Basic example
Table Headings
Here
Sub
Headings
Too
cell
spans
rows
column spanning
normal
cell
multi
line
cells
too
cells can be
formatted
paragraphs
```
Note: the top of a cell must be indicated by `+-` followed by some `-` or `+` and finished by `-+`.
So, this is not a correct cell:
```md
+--+
|a |
+--+
```
But, this is a correct cell:
```md
+---+
| a |
+---+
```
## Installation
[npm][npm]:
```bash
npm install remark-grid-tables
```
## License
[MIT][license] © [Zeste de Savoir][zds]
[build-badge]: https://img.shields.io/travis/zestedesavoir/zmarkdown.svg
[build-status]: https://travis-ci.org/zestedesavoir/zmarkdown
[coverage-badge]: https://img.shields.io/coveralls/zestedesavoir/zmarkdown.svg
[coverage-status]: https://coveralls.io/github/zestedesavoir/zmarkdown
[license]: https://github.com/zestedesavoir/zmarkdown/blob/master/packages/remark-grid-tables/LICENSE-MIT
[zds]: https://zestedesavoir.com
[npm]: https://www.npmjs.com/package/remark-grid-tables
[remark]: https://github.com/remarkjs/remark
[mdast]: https://github.com/wooorm/mdast
[rehype]: https://github.com/rehypejs/rehype