⚛️ react-markdown-table-ts 🛡️

| | | |------------------------------------------|-----------------------------------------| | 'light' theme | 'dark' theme |

Overview

A React component for generating and displaying formatted Markdown tables. 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. The output is displayed in a styled <pre> element with optional line numbering and supports both light and dark themes.

Installation

npm install react-markdown-table-ts

The component includes all necessary 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;
}

| 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'. Defaults to 'none' when unspecified. | | 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 colour 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. | | showLineNumbers | boolean | true | Show or hide line numbers in the code block. | | onGenerate | (markdownTableString: string) => void | undefined | Callback to receive the generated Markdown table string. |

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:

• Includes built-in light and dark themes
• Custom styles via className and preStyle props
• Optional line numbers for better readability

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

If you experience styling issues when importing this component into your project (e.g., missing line numbers, incorrect colors), this may be due to CSS conflicts with other libraries or global styles in your application.

Common Solutions:

1. Check for CSS conflicts: Ensure no other libraries or global styles are overriding the component's built-in CSS.

2. Verify theme prop: Make sure you're using the correct theme prop value ('light' or 'dark') for your application.

3. Custom styling: Use the className and preStyle props to add custom styles or override defaults as needed.

4. Line numbers: If line numbers aren't displaying, verify that showLineNumbers is set to true (default).