hast-util-pipe-table

Convert pipe-table mdast nodes into hast (HTML) elements.

This package is responsible for HTML structure only (<table>, <thead>, <tbody>, <tr>, <th>, <td>).

Vertical Cell Syntax

Pipe Table allows table cells to be written vertically, one per line, instead of being confined to a single row.

| a
    | b
    | c

This represents one table row with three cells.

Vertical layout makes tables easier to edit, reorder, and review in diffs, and enables multi-line and block-level content inside cells.

For the complete syntax specification, see: docs/syntax.md

Install

npm install hast-util-pipe-table

Usage

import { toHast } from 'mdast-util-to-hast'
import { pipeTableHandlers } from 'hast-util-pipe-table'
import { toHtml } from 'hast-util-to-html';

// const tree = <your mdast tree>
const hast = toHast(tree, {
  handlers: pipeTableHandlers()
})
console.log(toHtml(hast))

Options

pipeTableHandlers({
  /**
   * Alignment class prefix.
   * default: "cell-"
   */
  classPrefix?: string

  /**
   * Use logical alignment classes (start / center / end)
   * default: false
   */
  useLogicalAlignment?: boolean
})

• Alignment classes are applied to <td> only:
  • cell-left
  • cell-center
  • cell-right

Interoperability

hast-util-pipe-table respects data.hName, data.hProperties, and data.hChildren via state.applyData().

This allows other remark / unified plugins to customize the generated HTML structure and attributes.

Notes

• <thead> / <tbody> grouping is derived from mdast metadata.
• If a cell contains a single <p>, it is automatically unwrapped.

Related Packages

• micromark-extension-pipe-table Micromark syntax extension that tokenizes the pipe-table syntax.
• mdast-util-pipe-table Converts pipe-table tokens into mdast nodes and defines the canonical AST shape.
• remark-pipe-table Remark plugin that wires all pipe-table extensions together.

License

MIT