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 structured 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 CellData {
  content: string;       // The text content of the cell
  alignment?: Alignment; // Text alignment ('left', 'center', 'right')
  bold?: boolean;       // Bold formatting
  italic?: boolean;     // Italic formatting
  code?: boolean;       // Code (monospace) formatting
  link?: string;        // Optional URL for cell content
}

interface MarkdownTableProps {
    inputData?: (string | CellData)[][] | null; // Table data as strings or CellData objects
    columnAlignments?: readonly Alignment[];
    isCompact?: boolean;
    hasPadding?: boolean;
    hasTabs?: boolean;
    hasHeader?: boolean;
    convertLineBreaks?: boolean;
    topPadding?: number;
    theme?: 'light' | 'dark';
    className?: string;
    preStyle?: React.CSSProperties;
    minWidth?: number;
    onGenerate?: (markdownTableString: string) => void;
}

Prop	Type	Default	Description
`inputData`	`(string \| CellData)[][] \| null`	`null`	Table data as strings or CellData objects for rich text formatting
`columnAlignments`	`readonly Alignment[]`	`[]`	Acceptable values are 'left', 'center', 'right', 'justify', 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
`topPadding`	`number`	`16`	Controls the padding-top (in pixels) of the <pre> element display
`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
`minWidth`	`number`	`undefined`	Optional minimum width in pixels for the table container
`onGenerate`	`(markdownTableString: string) => void`	`undefined`	Callback to receive the generated Markdown table string

Usage Patterns

Basic String Table:

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

Rich Text Formatting with CellData:

<MarkdownTable
    inputData={[
        [
            { content: "Package ID", alignment: "left", bold: true },
            { content: "Status", alignment: "center", bold: true }
        ],
        [
            { content: "PKG-001", code: true },
            { content: "In Transit", italic: true }
        ],
        [
            { content: "PKG-002", code: true },
            { content: "Delivered", bold: true }
        ]
    ]}
    columnAlignments={['left', 'center']}
/>

Links and Mixed Formatting:

<MarkdownTable
    inputData={[
        [
            { content: "Product", bold: true },
            { content: "Details", bold: true }
        ],
        [
            { content: "Item 1", link: "https://example.com/item1" },
            { content: "New!", italic: true }
        ]
    ]}
/>

Setting Minimum Width:

<MarkdownTable
    inputData={data}
    minWidth={500} // Sets the minimum width of the table container to 500 pixels
/>

Behaviors

Input Validation:
- Input must be non-null 2D array of strings or CellData objects
- All cells must contain valid content
- Empty arrays are not allowed
Markdown Formatting:
- Bold text is wrapped in **
- Italic text is wrapped in *
- Code is wrapped in backticks (`)
- Links are formatted as [text](url)
- Alignments are reflected in the table separator row
Theme Support:
- Light theme (default) for standard markdown appearance
- Dark theme for better visibility on dark backgrounds
- Custom styling through className and preStyle props
Responsive Design:
- Tables adjust to content width by default
- Minimum width can be enforced through minWidth prop
- Compact mode available for dense data presentation

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License - see the LICENSE file for details.