Ng-markdown-table NPM

ng-markdown-table

ng-markdown-table is an Angular wrapper component for the markdown-table library. It simplifies the generation of Markdown tables in Angular projects by providing an easy-to-use component interface.

NOTE: It requires Angular 17 or newer due to its use of modern features like inputs.

Features

Quickly render Markdown tables directly in Angular templates.
Fully customizable through inputs to support various table configurations.
Leverages the well-known markdown-table library.

Installation

To install the library and its peer dependency:

npm install ng-markdown-table markdown-table

Usage

Step 1: Import the Component

Import the NgMarkdownTableComponent into your Angular module or standalone component:

import { NgMarkdownTableComponent } from 'ng-markdown-table';

If you are using a standalone component, you can directly include it in your imports array.

Step 2: Use in a Template

You can use the ng-markdown-table component in your Angular templates:

<ng-markdown-table
  [table]="tableData"
  [options]="tableOptions">
</ng-markdown-table>

Example

import { Component } from '@angular/core';
import {NgMarkdownTableComponent} from 'ng-markdown-table';

@Component({
  selector: 'app-root',
  imports: [
    NgMarkdownTableComponent // For standalone usage
    // Or, import in your module's (imports:[])
  ],
  template: `
    <ng-markdown-table [table]="tableData" [options]="tableOptions"></ng-markdown-table>`
})
export class AppComponent {
  tableData = [
    ['Header 1', 'Header 2', 'Header 3'],
    ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
    ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3']
  ];

  tableOptions = { align: ['left', 'center', 'right'] };
}

Inputs

Input	Type	Description
`table`	`ReadonlyArray<ReadonlyArray<string \\| null \\| undefined>>`	The table data as a 2D array. Each inner array represents a row.
`options`	`MarkdownTableOptions`	Options for customizing the table (e.g., alignment). Optional.