# remark-grid-tables

> This plugin parses custom Markdown syntax to describe tables. It was inspired by [this syntax](https://github.com/smartboyathome/Markdown-GridTables/blob/b4d16d5d254bed4336713d27eb8a37dc0e5f4273/mdx_grid_tables.py).

Latest version **2.2.2** (published 2024-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install remark-grid-tables
pnpm add remark-grid-tables
yarn add remark-grid-tables
bun add remark-grid-tables
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2024-04-27 |
| First published | 2017-06-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 49.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 237 |
| Author | Sébastien |
| Maintainers | situphen, talone |
| Keywords | remark |

## Links

- npm: https://www.npmjs.com/package/remark-grid-tables
- Repository: https://github.com/zestedesavoir/zmarkdown.git#master
- Homepage: https://github.com/zestedesavoir/zmarkdown/tree/master#readme
- Issues: https://github.com/zestedesavoir/zmarkdown/issues
- npm.io page: https://npm.io/package/remark-grid-tables

## Dependencies (4)

- [string-width](https://npm.io/package/string-width.md) ^4.2.0
- [lodash.trimend](https://npm.io/package/lodash.trimend.md) ^4.5.1
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.3
- [grapheme-splitter](https://npm.io/package/grapheme-splitter.md) ^1.0.4

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 2.2.2 (latest) — 2024-04-27
- 2.2.1 — 2024-03-01
- 2.2.0 — 2023-07-05
- 2.1.2 — 2021-02-14
- 2.1.1 — 2020-03-06
- 2.1.0 — 2020-02-03
- 2.0.2 — 2020-01-21
- 1.7.1 — 2019-08-29
- 1.7.0 — 2019-07-27
- 1.6.1 — 2019-04-14
- 1.6.0 — 2019-03-11
- 1.5.0 — 2019-03-01
- 1.4.0 — 2019-02-04
- 1.3.0 — 2018-12-23
- 1.2.0 — 2018-11-23
- … 29 more at https://npm.io/package/remark-grid-tables/versions

## README

# 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 was inspired by [this syntax](https://github.com/smartboyathome/Markdown-GridTables/blob/b4d16d5d254bed4336713d27eb8a37dc0e5f4273/mdx_grid_tables.py).

## AST nodes

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

If you are using [rehype][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`.

```javascript
interface GridTable <: Parent {
  type: "gridTable";
  data: {
    hName: "table";
  }
}
```

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

### `tableHeader`

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

Where `hName` can be either `thead` or `tbody`.

### `tableRow`

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

### `tableCell`

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

## 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
<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:
```md
+--+
|a |
+--+
```

But, this is a correct cell:
```md
+---+
| a |
+---+
```

## Installation

[npm][npm]:

```bash
npm install remark-grid-tables
```

## Usage

Dependencies:

```javascript
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:

```javascript
unified()
  .use(remarkParse)
  .use(remarkGridTables)
  .use(remark2rehype)
  .use(stringify)
```


## License

[MIT][license] © [Zeste de Savoir][zds]

<!-- Definitions -->

[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

---
_Source: https://npm.io/package/remark-grid-tables · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._