**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](#installation)
- [Usage](#usage)
- [Basic Usage](#basic-usage)
- [Configuration Options](#configuration-options)
- [Advanced Table Features](#advanced-table-features)
- [Column Spanning](#column-spanning)
- [Row Spanning](#row-spanning)
- [Adding Captions](#adding-captions)
- [Column Alignment](#column-alignment)
- [More Resources](#more-resources)
- [Available Extensions](#available-extensions)
- [Demo Application](#demo-application)
- [License](#license)
## Installation
To add `@fsegurai/marked-extended-tables` along with Marked.js to your `package.json` use the following commands.
```bash
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.
```javascript
import { marked } from "marked";
import markedExtendedTables from "@fsegurai/marked-extended-tables";
// or UMD 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 `` and `` tags for tables. Default: `false`
- `useTfoot`: Use `` 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`
```javascript
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:
```markdown
| 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:
```markdown
| 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:
```markdown
[Table Caption]
| Header 1 | Header 2 |
|----------|----------|
| Cell 1 | Cell 2 |
```
#### Column Alignment
Align columns using colons in the separator row:
```markdown
| 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](https://www.npmjs.com/package/@fsegurai/marked-extended-accordion) |  | Add collapsible accordion sections to your markdown |
| Alert | [@fsegurai/marked-extended-alert](https://www.npmjs.com/package/@fsegurai/marked-extended-alert) |  | Create styled alert boxes for important information |
| Footnote | [@fsegurai/marked-extended-footnote](https://www.npmjs.com/package/@fsegurai/marked-extended-footnote) |  | Add footnotes with automatic numbering |
| Lists | [@fsegurai/marked-extended-lists](https://www.npmjs.com/package/@fsegurai/marked-extended-lists) |  | Enhanced list formatting options |
| Spoiler | [@fsegurai/marked-extended-spoiler](https://www.npmjs.com/package/@fsegurai/marked-extended-spoiler) |  | Hide content behind spoiler tags |
| Tables | [@fsegurai/marked-extended-tables](https://www.npmjs.com/package/@fsegurai/marked-extended-tables) |  | Advanced table formatting with cell spanning |
| Tabs | [@fsegurai/marked-extended-tabs](https://www.npmjs.com/package/@fsegurai/marked-extended-tabs) |  | Create tabbed content sections |
| Timeline | [@fsegurai/marked-extended-timeline](https://www.npmjs.com/package/@fsegurai/marked-extended-timeline) |  | Display content in an interactive timeline format |
| Typographic | [@fsegurai/marked-extended-typographic](https://www.npmjs.com/package/@fsegurai/marked-extended-typographic) |  | Improve typography with smart quotes, dashes, and more |
### Demo Application
To see all extensions in action, check out the [[DEMO]](https://fsegurai.github.io/marked-extensions).
To set up the demo locally, follow the next steps:
```bash
git clone https://github.com/fsegurai/marked-extensions.git
bun install
bun start
```
This will serve the application locally at [http://[::1]:8000](http://[::1]:8000).
## License
Licensed under [MIT](https://opensource.org/licenses/MIT).