@fsegurai/marked-extended-tables v15.3.1

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.