markdown-it-adv-table 0.1.0 → 0.1.1

package/README.md

@@ -1,2 +1,193 @@
+
 # markdown-it-adv-table
 
+A [markdown-it](https://www.npmjs.com/package/markdown-it) plugin to enable advanced table rendering in Markdown. The custom syntax allows to create complex tables supporting:
+
+- Rowspan and colspan for merged cells
+- Custom column widths
+- Horizontal cell alignment
+- Table styling with css classes
+- Header rows and columns (using `<th>`)
+- Multiple blocks and nested markdown within cells
+
+## Install
+
+```bash
+npm install markdown-it-adv-table
+```
+
+```js 
+import markdownit from "markdown-it";
+import advTable from "markdown-it-adv-table";
+
+const md = markdownit();
+md.use(advTable);
+const html = md.render("text...");
+```
+
+## Documentation
+
+To Be Documented
+
+## Examples
+
+``````
+```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
+``````
+
+<table>
+  <thead>
+    <tr>
+      <th rowspan="2">Category</th>
+      <th colspan="3">Q1 Sales</th>
+    </tr>
+    <tr>
+      <th>January</th>
+      <th>February</th>
+      <th>March</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>Electronics</th>
+      <td>$10,000</td>
+      <td>$12,000</td>
+      <td>$11,500</td>
+    </tr>
+    <tr>
+      <th>Clothing</th>
+      <td>$8,000</td>
+      <td>$9,500</td>
+      <td>$9,000</td>
+    </tr>
+    <tr>
+      <th>Books</th>
+      <td>$3,500</td>
+      <td>$4,000</td>
+      <td>$4,200</td>
+    </tr>
+  </tbody>
+</table>
+
+
+
+
+``````
+```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    |
+```
+``````
+
+<table class="products-list">
+  <colgroup>
+    <col style="width: 12%">
+    <col style="width: 12%">
+    <col style="width: 12%">
+    <col style="width: 64%">
+  </colgroup>
+  <thead>
+    <tr>
+      <th style="text-align: center">Category</th>
+      <th style="text-align: center">Item Name</th>
+      <th style="text-align: center">Price</th>
+      <th style="text-align: center">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td rowspan="3">Fruits</td>
+      <td>Apple</td>
+      <td style="text-align: right">$1.00</td>
+      <td>A smooth, round fruit with shiny red skin.</td>
+    </tr>
+    <tr>
+      <td>Banana</td>
+      <td style="text-align: right">$0.50</td>
+      <td>A long, curved fruit with yellow peel</td>
+    </tr>
+    <tr>
+      <td>Orange</td>
+      <td style="text-align: right">$0.80</td>
+      <td>
+        <p>A round fruit with dimpled bright orange rind</p>
+        <p><strong>Country of origin</strong></p>
+        <ol>
+          <li>Brazil</li>
+          <li>India</li>
+          <li>China</li>
+        </ol>
+        <table>
+          <thead>
+            <tr>
+              <th>Nutrient</th>
+              <th>Per 100 g</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Calories</td>
+              <td>47 kcal</td>
+            </tr>
+            <tr>
+              <td>Vitamin C</td>
+              <td>53.2 mg</td>
+            </tr>
+            <tr>
+              <td>Sugar</td>
+              <td>9.0 g</td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>

package/dist/table-builder.js

@@ -23,8 +23,8 @@ export class TableBuilder {
     }
     startTable() {
         const token = this.state.push("table_open", "table", 1);
-        this.tableSpec.styles.forEach(style => {
-            token.attrJoin("class", style);
+        this.tableSpec.classes.forEach(name => {
+            token.attrJoin("class", name);
         });
         if (this.tableSpec.attr["caption"] !== undefined) {
             this.setCaption(this.tableSpec.attr["caption"]);
@@ -52,7 +52,7 @@ export class TableBuilder {
             || row < this.tableSpec.headerRows
             || col < this.tableSpec.headerCols ? "th" : "td";
         if (isRowFirst) {
-            if (this.useTHead && row < this.tableSpec.headerRows) {
+            if (this.useTHead && row === 0) {
                 this.startTHead();
             }
             else if (this.useTBody && row === this.tableSpec.headerRows) {

package/dist/table.d.ts

@@ -1,5 +1,5 @@
 type HAlign = "left" | "center" | "right";
-type TableAttrKeys = "cols" | "style" | "header-rows" | "header-columns" | "format";
+type TableAttrKeys = "cols" | "class" | "header-rows" | "header-cols" | "format";
 export type TableAttr = {
     [key in TableAttrKeys]?: string;
 } & {
@@ -20,13 +20,13 @@ export type CellAttr = {
  */
 export declare class TableSpec {
     readonly attr: TableAttr;
-    readonly styles: string[];
+    readonly classes: string[];
     readonly headerRows: number;
     readonly headerCols: number;
     readonly colspecs: ColSpecs;
     constructor(attr: TableAttr);
     get numCols(): number;
-    static parseStyle(style: string): string[];
+    static parseClass(classnames: string): string[];
     static parseInfoString(info: string): TableAttr;
     static awareKeys(): TableAttrKeys[];
 }
@@ -52,6 +52,8 @@ export declare class TableCell {
     constructor(row: number, col: number, attr: CellAttr);
     get colspan(): number;
     get rowspan(): number;
+    get endcol(): number;
+    get endrow(): number;
     is(row: number, col: number): boolean;
     isIn(row: number, col: number, rspan: number, cspan: number): boolean;
     contains(row: number, col: number): boolean;

package/dist/table.js

@@ -4,22 +4,26 @@ import { Lexer, unwrapLiteral } from "./lexer.js";
  */
 export class TableSpec {
     attr;
-    styles;
+    classes;
     headerRows;
     headerCols;
     colspecs;
     constructor(attr) {
         this.attr = attr;
         this.headerRows = parseInt(attr["header-rows"] ?? "0");
-        this.headerCols = parseInt(attr["header-columns"] ?? "0");
+        this.headerCols = parseInt(attr["header-cols"] ?? "0");
         this.colspecs = new ColSpecs(attr.cols ?? "");
-        this.styles = TableSpec.parseStyle(attr.style ?? "");
+        this.classes = TableSpec.parseClass(attr.class ?? "");
     }
     get numCols() {
         return this.colspecs.numCols;
     }
-    static parseStyle(style) {
-        return style.split(",").map((s) => s.trim());
+    static parseClass(classnames) {
+        return classnames
+            .split(",")
+            .map((s) => s.trim())
+            .filter(s => s.length > 0)
+            .filter((s, i, arr) => arr.indexOf(s) === i); // uniq
     }
     static parseInfoString(info) {
         const lexer = new Lexer(info);
@@ -78,9 +82,9 @@ export class TableSpec {
         const k = {
             cols: "",
             align: "",
-            "header-columns": "",
+            "header-cols": "",
             "header-rows": "",
-            style: "",
+            class: "",
             format: ""
         };
         return Object.keys(k);
@@ -185,6 +189,12 @@ export class TableCell {
     get rowspan() {
         return this.attr.rowspan || 1;
     }
+    get endcol() {
+        return this.col + this.colspan - 1;
+    }
+    get endrow() {
+        return this.row + this.rowspan - 1;
+    }
     is(row, col) {
         return this.row === row && this.col === col;
     }
@@ -370,8 +380,8 @@ export class CellState {
             const span = this.spannedBy(row, col + 1);
             // recursively check right cell
             if (span !== undefined) {
-                if (span.col + span.rowspan > col) {
-                    col = span.col + span.rowspan;
+                if (span.endcol > col) {
+                    col = span.endcol;
                 }
                 else {
                     throw new Error("never happen. check implementation");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-it-adv-table",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Markdown syntax extension for better table support",
   "keywords": [
     "markdown",