markdown-it-adv-table

A markdown-it plugin for advanced table rendering.

This plugin adds custom table syntaxes to render complex tables easier.

• "flat-table" syntax
• "csv-table" syntax
• "tsv-table" syntax

The "flat-table" syntax allows to:

• Set Rowspan and colspan for spanning cells
• Set column width
• Set horizontal text alignment
• Set css classes for table styling
• Define Header rows and columns
• Allow writing markdown inside the cells (nested document)

Installation

npm install markdown-it-adv-table

import markdownit from "markdown-it";
import advTable from "markdown-it-adv-table";

const md = markdownit();
md.use(advTable);
const html = md.render("text...");

Example

```table cols=4 header-rows=2 header-cols=1
r2| Category
c3| Q1 Sales

| January
| February
| March

| Electronics
| $10,000
| $12,000
| $11,500

| Clothing
| $8,000
| $9,500
| $9,000

| Books
| $3,500
| $4,000
| $4,200
```

Documentation

The table is expressed in a fenced code block. The info-string is parsed as TableSpec, which defines the properties of the table.

Then, the cells are defined from left-top to right-bottom.

• A line that starts with | starts a new cell.
• The cell content is parsed as Markdown.
• The cell content spans until the next cell marker.

A cell marker can include directives that control the cell’s properties.

ColSpec is a comma-separated directives to set column's properties.

Cell Directives (Cell Definition)

More Examples

```table cols="12,12,12,64" header-rows=1 class=products-list
^| Category
^| Item Name
^| Price
^| Description

r3| Fruits
| Apple
^| $1.00 
| A smooth, round fruit with shiny red skin.

| Banana
>| $0.50
| A long, curved fruit with yellow peel

| Orange
>| $0.80
| A round fruit with dimpled bright orange rind

  **Country of origin**

  1. Brazil
  2. India
  3. China

  | Nutrient  | Per 100 g  |
  |-----------|------------|
  | Calories  |  47 kcal   |
  | Vitamin C |  53.2 mg   |
  | Sugar     |   9.0 g    |
```