⚛️ react-markdown-table-ts 🛡️

'light' theme	'dark' theme

Overview

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.

Installation

npm install react-markdown-table-ts

The component includes all necessary Prism.js dependencies and CSS is embedded inline, so no additional setup is required.

API

interface MarkdownTableProps {
    inputData?: string[][] | null;
    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;
    showLineNumbers?: boolean;
    onGenerate?: (markdownTableString: string) => void;
}

Usage Patterns

1. Basic Table Generation:

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

2. Column Alignment:

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

3. Auto-Generated Headers:

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

4. Setting Minimum Width:

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

5. Hiding Line Numbers:

<MarkdownTable
    inputData={data}
    showLineNumbers={false} // Hides line numbers in the code block
/>

Behaviours

1. 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')

2. Column Width Handling:

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

3. Error Handling:

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

4. Styling:

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

Common Transformations

1. Data Formatting:

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

2. Header Generation:

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

Troubleshooting

Styling Issues (Missing Line Numbers or Wrong Colors)

If you experience styling issues when importing this component into your project (e.g., missing line numbers, incorrect header colors), this may be due to your bundler's tree-shaking configuration.

Solution 1 - Module Side Effects (Recommended)

Ensure your bundler preserves module side effects from this package. If using Webpack, add to your config:

module.exports = {
  // ... other config
  optimization: {
    sideEffects: true,
  },
};

Solution 2 - Force Import

If issues persist, you can manually import the Prism.js plugins in your app entry file:

import 'prismjs/components/prism-markdown';
import 'prismjs/plugins/line-numbers/prism-line-numbers';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';

Note: You may need to install @types/prismjs as a dev dependency for TypeScript projects.