Complex HTML Tablify

Complex HTML Tablify provide a human friendly way to write complex HTML table by YAML syntax and simple tags.

Install

npm install complex-html-tablify

Usage Examples

Simple

Table with two tier headers

import { tablifyFromYamlString } from "complex-html-tablify"

const data = `
# The first document is treated as a table header
-
  - !td
  - Mars
  - !cs
  - Venus
  - !cs
-
  - !rs
  - &h1 Produced
  - &h2 Sold
  - *h1
  - *h2
---
-
  - !th Teddy Bears
  - 50,000
  - 30,000
  - 100,000
  - 80,000
-
  - !th Board Games
  - 10,000
  - 5,000
  - 12,000
  - 9,000
`

const caption = "Table with two tier headers"
const options = {
  caption,
}

const htmlTable = tablifyFromYamlString(data, options) //-> HTMLTableElement
const htmlString = htmlTable.outerHTML //-> <table>...</table>

output:

Table with two tier headers

	Produced	Sold	Produced	Sold
	Mars		Venus
Teddy Bears	50,000	30,000	100,000	80,000
Board Games	10,000	5,000	12,000	9,000

HTML

<table>
  <caption>
    Table with two tier headers
  </caption>
  <col />
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <td rowspan="2"></td>
      <th colspan="2">Mars</th>
      <th colspan="2">Venus</th>
    </tr>
    <tr>
      <th>Produced</th>
      <th>Sold</th>
      <th>Produced</th>
      <th>Sold</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Teddy Bears</th>
      <td>50,000</td>
      <td>30,000</td>
      <td>100,000</td>
      <td>80,000</td>
    </tr>
    <tr>
      <th>Board Games</th>
      <td>10,000</td>
      <td>5,000</td>
      <td>12,000</td>
      <td>9,000</td>
    </tr>
  </tbody>
</table>

Data with Headers

Table with headers spanning multiple rows or columns

import { tablifyWithHeader } from "complex-html-tablify"

const firstLevelHeader = `
-
  - Poster name
  - Color
  - Sizes available
  - !cs
  - !cs
`
const secondLevelHeader = `
-
  - !th Zodiac
  - !th Full color
-
  - !rs
  - !th Black and white
- 
  - !rs
  - !th Sepia
- 
  - !th Angels
  - !th Black and white
- 
  - !rs
  - !th Sepia
`
const header = [firstLevelHeader, secondLevelHeader]

const data = [
  ["A2", "A3", "A4"],
  ["A1", "A2", "A3"],
  ["A3", "A4", "A5"],
  ["A1", "A3", "A4"],
  ["A2", "A3", "A5"],
]

const caption = "Poster availability"
const options = { caption }

const htmlTable = tablifyWithHeader(data, header, options)
const htmlString = htmlTable.outerHTML

output:

Poster availability

Poster name	Color	Sizes available
Zodiac	Full color	A2	A3	A4
	Black and white	A1	A2	A3
	Sepia	A3	A4	A5
Angels	Black and white	A1	A3	A4
Angels	Sepia	A2	A3	A5

HTML

<table>
  <caption>
    Poster availability
  </caption>
  <col />
  <col />
  <colgroup span="3"></colgroup>
  <thead>
    <tr>
      <th>Poster name</th>
      <th>Color</th>
      <th colspan="3">Sizes available</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3">Zodiac</th>
      <th>Full color</th>
      <td>A2</td>
      <td>A3</td>
      <td>A4</td>
    </tr>
    <tr>
      <th>Black and white</th>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <th>Sepia</th>
      <td>A3</td>
      <td>A4</td>
      <td>A5</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th rowspan="2">Angels</th>
      <th>Black and white</th>
      <td>A1</td>
      <td>A3</td>
      <td>A4</td>
    </tr>
    <tr>
      <th>Sepia</th>
      <td>A2</td>
      <td>A3</td>
      <td>A5</td>
    </tr>
  </tbody>
</table>

Note: This library consists functional components, so you can use those in compbination.

Custom YAML Tags

HTML Tag

!th: Table Header. The cell with !th tag regarded as a header.
!td: Table Data. The cell with !th tag regarded as a data.

Span

You can bind cells to an above or a left cell.

!rs: Row Span. The cell with !rs tag is bound to the above cell together.
!cs: Column Span. The cell with !cs tag is bound to the left cell together.

Options

callback: (val: any) => string (default: (val) => `${val}`) - Evaluate each value of cells.
sanitized: boolean (default: true) - Unenable HTML tags in each cell.
alignments: Array<{horizontal?: string; vertical?: string}> (default: []) - Align each cells of columns.
- horiznotal: - Using the keyword values: start, end, left, right, center, justify, justify-all, or match-parent.
- vertical: - Using the keyword values: baseline, sub, super, text-top, text-bottom, middle, top, or bottom.
caption: string | null (default: null) - Define a table caption.
defaultCellTag: {[key in HTMLTableSectionElementTagName]?: HTMLTableCellElementTagName} (default: { thead: "th", tbody: "td", tfoot: "td" }) - Define each default cell tag of sections.
- HTMLTableSectionElementTagName: thead, tbody or tfoot
- HTMLTableCellElementTagName: th or td

nosuke23 / complex-html-tablify Goto Github PK

complex-html-tablify's Introduction

Complex HTML Tablify

Install

Usage Examples

Simple

Table with two tier headers

Data with Headers

Table with headers spanning multiple rows or columns

Custom YAML Tags

HTML Tag

Span

Options

complex-html-tablify's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent