A library of extended tables for Marked.js.

@fsegurai/marked-extended-tables is an extension for Marked.js, allowing for more complex table structures and styling. It adds support for tables with merged cells, row and column spans, and other advanced features.

Table of contents

• Installation
• Usage
  • Basic Usage
  • Configuration Options
  • Advanced Table Features
    • Column Spanning
    • Row Spanning
    • Adding Captions
    • Column Alignment
• More Resources
  • Available Extensions
  • Demo Application
• License

Installation

To add @fsegurai/marked-extended-tables along with Marked.js to your package.json use the following commands.

bun install @fsegurai/marked-extended-tables marked@^15.0.0 --save

Usage

Basic Usage

Import @fsegurai/marked-extended-tables and apply it to your Marked instance as shown below.

import { marked } from "marked";
import markedExtendedTables from "@fsegurai/marked-extended-tables";

// or UMD script
// <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-tables/lib/index.umd.js"></script>

marked.use(markedExtendedTables());

const exampleMarkdown = `
| H1      | H2      | H3      |
|---------|---------|---------|
| This cell spans 3 columns |||
`;

marked.parse(exampleMarkdown);

Configuration Options

The extension can be customized with the following options:

• useTheadTbody: Use <thead> and <tbody> tags for tables. Default: false
• useTfoot: Use <tfoot> tag for tables. Default: false
• className: Add a custom class to the table. Default: ""
• captionTop: Place the caption above the table. Default: false
• detectFooter: Detect footers in the table. Default: false
• strictCaptions: Strictly check for captions. Default: false
• maxColspan: Maximum colspan for a cell. Default: Infinity
• handleComplexSpans: Enable enhanced handling of complex row+column spanning. Default: true

marked.use(
    markedExtendedTables({
        useTheadTbody: true,
        useTfoot: true,
        className: "my-custom-table",
        captionTop: false,
    }),
);

Advanced Table Features

Column Spanning

Use multiple pipe characters (|) to make a cell span multiple columns:

| Header 1                  | Header 2 | Header 3 |
| ------------------------- | -------- | -------- |
| This cell spans 2 columns |          |
| Normal                    | Normal   | Normal   |

Row Spanning

Add the caret character (^) at the end of a cell to make it span into the next row:

| Header 1        | Header 2 |
| --------------- | -------- |
| This cell spans | Cell A   |
| two rows ^      | Cell B   |

Adding Captions

Add a caption by including a bracketed text before the table:

[Table Caption]
| Header 1 | Header 2 |
|----------|----------|
| Cell 1 | Cell 2 |

Column Alignment

Align columns using colons in the separator row:

| Left | Center | Right |
| :--- | :----: | ----: |
| A    |   B    |     C |

Complex Row and Column Spanning

[Complex Table with Row and Column Spanning] | Header 1 | Header 2 | Header 3 | Header 4 | |----------|----------|----------|----------| | This spans two rows and two columns || | ^ | ^ | Cell C ^| Cell D ^| | Cell E | Cell F | Cell G | Cell H |

Multi-Row Headers

[Multi-row Header Example] | Product Category | Details || | | Name | Price | |------------------|------------|-------| | Electronics | Laptop | $1200 | | ^ | Phone | $800 |

Available Extensions

| Extension | Package | Version | Description | |-------------|--------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|--------------------------------------------------------| | Accordion | @fsegurai/marked-extended-accordion | | Add collapsible accordion sections to your markdown | | Alert | @fsegurai/marked-extended-alert | | Create styled alert boxes for important information | | Footnote | @fsegurai/marked-extended-footnote | | Add footnotes with automatic numbering | | Lists | @fsegurai/marked-extended-lists | | Enhanced list formatting options | | Spoiler | @fsegurai/marked-extended-spoiler | | Hide content behind spoiler tags | | Tables | @fsegurai/marked-extended-tables | | Advanced table formatting with cell spanning | | Tabs | @fsegurai/marked-extended-tabs | | Create tabbed content sections | | Timeline | @fsegurai/marked-extended-timeline | | Display content in an interactive timeline format | | Typographic | @fsegurai/marked-extended-typographic | | Improve typography with smart quotes, dashes, and more |

Demo Application

To see all extensions in action, check out the [DEMO].

To set up the demo locally, follow the next steps:

git clone https://github.com/fsegurai/marked-extensions.git
bun install
bun start

This will serve the application locally at http://[::1]:8000.

License

Licensed under MIT.