Package Exports

react-markdown-table-ts
react-markdown-table-ts/dist/index.cjs.js
react-markdown-table-ts/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-markdown-table-ts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

⚛️ react-markdown-table-ts 🛡️


`'light'` theme	`'dark'` theme

Overview

This library provides a React component for generating and displaying formatted Markdown tables with syntax highlighting. The core component is MarkdownTable which converts 2D array data into properly formatted Markdown table syntax. Columns of variable width maintain consistent spacing across all rows, ensuring vertical alignment of delimiters. For syntax highlighting and line numbering, Prism.js is used within a <pre> HTML element.

API

interface MarkdownTableProps {
    inputData?: string[][] | null;
    columnAlignments?: readonly Alignment[];
    isCompact?: boolean;
    hasPadding?: boolean;
    hasTabs?: boolean;
    hasHeader?: boolean;
    convertLineBreaks?: boolean;
    theme?: 'light' | 'dark';
    className?: string;
    preStyle?: React.CSSProperties;
    onGenerate?: (markdownTableString: string) => void;
}

Prop	Type	Default	Description
`inputData`	`string[][] \| null`	`null`	The outer array represents rows. The inner array represent cells within each row.
`columnAlignments`	`readonly Alignment[]`	`[]`	Acceptable values are 'left', 'center', 'right', or 'none'.
`isCompact`	`boolean`	`false`	Disables column width alignment to provide a more compact markdown table string.
`hasPadding`	`boolean`	`true`	One space added before and after the content in each cell.
`hasTabs`	`boolean`	`false`	Adds a tab character after each \| and before the content.
`hasHeader`	`boolean`	`true`	Indicates whether the first row of `data` is a header.
`convertLineBreaks`	`boolean`	`false`	Replace newlines with tags in table cells.
`theme`	`'light' \| 'dark'`	`light`	Controls the color scheme of the <pre> element display.
`className`	`string`	`undefined`	Class will be applied to the <pre> element display.
`preStyle`	`React.CSSProperties`	`undefined`	Allows direct styling of the display with CSS properties.
`onGenerate`	`(markdownTableString: string) => void`	`undefined`	Callback to receive the generated Markdown table string.

Usage Patterns

Basic Table Generation:

<MarkdownTable
    inputData={[
        ["Header 1", "Header 2"],
        ["Row 1 Col 1", "Row 1 Col 2"]
    ]}
/>

Column Alignment:

<MarkdownTable
    inputData={data}
    columnAlignments={['left', 'center', 'right']}
/>

Auto-Generated Headers:

<MarkdownTable
    inputData={data}
    hasHeader={false} // Will generate A, B, C... headers
/>

Behaviors

Input Validation:

Input must be non-null 2D string array
All rows should contain string values
Empty arrays are not allowed
Column alignments must be valid ('left', 'center', 'right', 'none')

Column Width Handling:

Default: Adjusts columns to fit content
isCompact={true}: Minimizes column widths
Maintains minimum width of 3 characters for alignment indicators

Error Handling:

Returns error message string if validation fails
Wraps errors in MarkdownTableError class
Preserves stack traces for debugging

Styling:

Uses Prism.js for syntax highlighting
Supports light/dark themes
Custom styles via className and preStyle props

Common Transformations

Data Formatting:

Newlines can be converted to <br> tags with canReplaceNewlines
Padding can be controlled with hasPadding
Tab spacing available with hasTabs

Header Generation:

Auto-generates A, B, C... headers when hasHeader={false}
Supports custom headers via first row when hasHeader={true}