@yozora/html-table
This component is for rendering the Yozora Markdown AST node ITable,
ITableRow and ITableCell
produced by @yozora/tokenizer-table into HTML string.
This component has been built into [@yozora/html-markdown][], you can use it directly.
Install
-
npm
npm install --save @yozora/html-table
-
yarn
yarn add @yozora/html-table
Usage
-
Basic:
import type { ITable, IYastNode } from '@yozora/ast' import renderTable from '@yozora/html-table' // The implementation of the following function has been omitted. const renderChildren: (nodes: IYastNode[]) => string = function () {} const table = { "type": "table", "columns": [ { "align": "center" }, { "align": "right" }, { "align": null } ], "children": [ { "type": "tableRow", "children": [ { "type": "tableCell", "children": [{ "type": "text", "value": "abc" }] }, { "type": "tableCell", "children": [{ "type": "text", "value": "defghi" }] }, { "type": "tableCell", "children": [{ "type": "text", "value": "xyz" }] } ] }, { "type": "tableRow", "children": [ { "type": "tableCell", "children": [{ "type": "text", "value": "bar" }] }, { "type": "tableCell", "children": [{ "type": "text", "value": "baz" }] }, { "type": "tableCell", "children": [{ "type": "text", "value": "defghi" }] } ] } ] } renderTable(table as ITable, renderChildren) // => <table class="yozora-table-item"><thead class="yozora-table__thead"><tr class="yozora-table-row"><th class="yozora-table-cell" align="center"><span class="yozora-text">abc</span></th><th class="yozora-table-cell" align="right"><span class="yozora-text">defghi</span></th><th class="yozora-table-cell"><span class="yozora-text">xyz</span></th></tr></thead><tbody class="yozora-table__tbody"><tr class="yozora-table-row"><td class="yozora-table-cell" align="center"><span class="yozora-text">bar</span></td><td class="yozora-table-cell" align="right"><span class="yozora-text">baz</span></td><td class="yozora-table-cell"><span class="yozora-text">defghi</span></td></tr></tbody></table>