rehype-extended-table

Rehype plugin to support table syntax allowing colspan / rowspan.

Feature

• support extended table syntax of markdown-preview-enhanced which allows colspan / rowspan cells
• same base syntax support with remark-extended-table

| Head 1 | Head 2 | Head 3 | Head 4 | Head 5 |
| ------ | ------ | ------ | ------ | ------ |
| >      | (2x1)  | Cell   | Cell   | Cell   |
| (1x3)  | >      | (2x2)  | >      | (2x2)  |
| ^      | >      | ^      | Cell   | Cell   |
| ^      | >      | >      | (3x1)  | Cell   |

↓↓

<table>
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
      <th>Head 4</th>
      <th>Head 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">(2x1)</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td rowspan="3">(1x3)</td>
      <td colspan="2" rowspan="2">(2x2)</td>
      <td colspan="2">(2x2)</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td colspan="3">(3x1)</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Installation

npm install rehype-extended-table --save-dev

Usage

import { rehypeExtendedTable } from 'rehype-extended-table';
import rehypeStringify from 'rehype-stringify';
import remarkGFM from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { unified } from 'unified';

unified()
  .use(remarkParse)
  .use(remarkGFM)
  .use(remarkRehype)
  .use(rehypeExtendedTable)
  .use(rehypeStringify)
  .process(markdown);

Options

options.mergeTo

• enum: ['right', 'left']
• default: 'right'
• description: Direction of table merge columns, using right is same as remark-extended-table, using left is same as Excel.

When using left, Write:

| Head 1 | Head 2 | Head 3 | Head 4 | Head 4 |
| :----: | :----: | :----: | :----: | :----: |
| (2x1)  |   <    |  Cell  |  Cell  |  Cell  |
| (1x3)  | (2x2)  |   <    | (2x2)  |   <    |
|   ^    |   ^    |   <    |  Cell  |  Cell  |
|   ^    | (3x1)  |   <    |   <    |  Cell  |

Tips

Why do I need this plugin?

remark-extended-table is good, but it wiil overrides remark-gfm behaviors, and have to inject handlers to remark-rehype:

import rehypeStringify from 'rehype-stringify';
import {
  extendedTableHandlers,
  remarkExtendedTable
} from 'remark-extended-table';
import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { unified } from 'unified';

unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkExtendedTable)
  .use(remarkRehype, null, {
    handlers: {
      ...extendedTableHandlers
    }
  })
  .use(rehypeStringify)
  .process(markdown);

Some times we can't do that, you can use this plugin instead.

For example, in Docusaurus projects:

// docusaurus.config.mjs
import { rehypeExtendedTable } from 'rehype-extended-table';

export default {
  presets: [
    [
      'classic',
      {
        docs: {
          rehypePlugins: [
            [
              rehypeExtendedTable,
              {
                // ...options here
              }
            ]
          ]
        }
      }
    ]
  ]
};

Different with rehype-table-merge

• rehype-extended-table support MDX props name by default.
• rehype-extended-table can handle complex merge case without bug
• support options.mergeTo

Related

• markdown-code-block-meta
• remark-code-example
• remark-kroki
• remark-docusaurus