react-markdown-table-ts 1.2.0 → 1.2.1

package/README.md

@@ -7,27 +7,16 @@
 [![GitHub branch status](https://img.shields.io/github/checks-status/keithwalsh/react-markdown-table-ts/HEAD)](https://github.com/keithwalsh/react-markdown-table-ts/commits/HEAD/)
 
 | ![Light Theme Example](public/light.png) | ![Dark Theme Example](public/dark.png)  |
-|------------------------------------------|----------------------------------------|
-| `'light'` theme                          | `'dark'` theme                         |
+|------------------------------------------|-----------------------------------------|
+| `'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.
+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
-
 ```typescript
-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
+    inputData?: string[][] | null;
     columnAlignments?: readonly Alignment[];
     isCompact?: boolean;
     hasPadding?: boolean;
@@ -42,26 +31,24 @@ interface MarkdownTableProps {
     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 <br> 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                            |
-
+|----------------------|-----------------------------------------|-------------|------------------------------------------------------------------------------------|
+| `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', 'justify', 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 <br> 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
 
-1. **Basic String Table**:
+1. **Basic Table Generation**:
 ```typescript
 <MarkdownTable
     inputData={[
@@ -70,44 +57,20 @@ interface MarkdownTableProps {
     ]}
 />
 ```
-
-2. **Rich Text Formatting with CellData**:
+2. **Column Alignment**:
 ```typescript
 <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']}
+    inputData={data}
+    columnAlignments={['left', 'center', 'right', 'justify']}
 />
 ```
-
-3. **Links and Mixed Formatting**:
+3. **Auto-Generated Headers**:
 ```typescript
 <MarkdownTable
-    inputData={[
-        [
-            { content: "Product", bold: true },
-            { content: "Details", bold: true }
-        ],
-        [
-            { content: "Item 1", link: "https://example.com/item1" },
-            { content: "New!", italic: true }
-        ]
-    ]}
+    inputData={data}
+    hasHeader={false} // Will generate A, B, C... headers
 />
 ```
-
 4. **Setting Minimum Width**:
 ```typescript
 <MarkdownTable
@@ -119,31 +82,34 @@ interface MarkdownTableProps {
 ## Behaviors
 
 1. **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
-
-2. **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
-
-3. **Theme Support**:
-   - Light theme (default) for standard markdown appearance
-   - Dark theme for better visibility on dark backgrounds
-   - Custom styling through `className` and `preStyle` props
-
-4. **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.
+- 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', 'justify', '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
+- 'justify' alignment behaves same as 'none' for markdown compatibility
+
+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 `canReplaceNewlines`
+- 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}`

package/dist/index.cjs.js

@@ -4069,62 +4069,55 @@ var Prism$1 = /*@__PURE__*/getDefaultExportFromCjs(prismExports);
 }());
 
 /**
- * Formats cell content with markdown syntax based on CellData formatting options
+ * @fileoverview Utilities for formatting and generating markdown tables with support
+ * for cell formatting, alignment, and width calculations.
  */
-function formatCellContent(cell) {
-    if (typeof cell === 'string') {
-        return cell;
-    }
-    var content = cell.content;
-    // Apply code formatting first (if present) as it should override other formatting
-    if (cell.code) {
-        content = "`".concat(content, "`");
-        return content; // Code formatting should not be combined with other formatting
-    }
-    // Apply bold formatting
-    if (cell.bold) {
-        content = "**".concat(content, "**");
-    }
-    // Apply italic formatting
-    if (cell.italic) {
-        content = "*".concat(content, "*");
-    }
-    // Apply link formatting last
-    if (cell.link) {
-        content = "[".concat(content, "](").concat(cell.link, ")");
-    }
-    return content;
-}
-/**
- * Gets the alignment for a cell, prioritizing cell-specific alignment over column alignment
- */
-function getCellAlignment(cell, columnAlignment) {
-    if (typeof cell === 'string') {
-        return columnAlignment || 'none';
-    }
-    return cell.alignment || columnAlignment || 'none';
-}
-
 var CellFormatter = /** @class */ (function () {
     function CellFormatter(config) {
         this.config = config;
-        this.padding = this.config.useTabs ? '\t' : (this.config.hasPadding ? ' ' : '');
+        this.padding = this.config.useTabs
+            ? "\t"
+            : this.config.hasPadding
+                ? " "
+                : "";
     }
-    CellFormatter.prototype.formatCell = function (cell, alignment, width) {
-        var content = formatCellContent(cell);
-        var cellAlignment = getCellAlignment(cell, alignment);
-        var totalWidth = width;
-        switch (cellAlignment) {
-            case 'right':
-                return "".concat(this.padding).concat(content.padStart(totalWidth)).concat(this.padding);
-            case 'center': {
-                var totalPadding = totalWidth - content.length;
-                var paddingLeft = Math.floor(totalPadding / 2);
-                var paddingRight = totalPadding - paddingLeft;
-                return "".concat(this.padding).concat(' '.repeat(paddingLeft)).concat(content).concat(' '.repeat(paddingRight)).concat(this.padding);
+    CellFormatter.prototype.formatCellContent = function (cell) {
+        var content = cell.content;
+        if (cell.code) {
+            content = "`".concat(content, "`");
+        }
+        if (cell.bold) {
+            content = "**".concat(content, "**");
+        }
+        if (cell.italic) {
+            content = "*".concat(content, "*");
+        }
+        if (cell.link) {
+            content = "[".concat(content, "](").concat(cell.link, ")");
+        }
+        return content;
+    };
+    CellFormatter.prototype.formatCell = function (cell, width) {
+        var content = this.formatCellContent(cell);
+        var alignment = cell.alignment || "inherit";
+        var effectiveAlignment = alignment === "inherit" ? "none" : alignment;
+        var paddedContent = "".concat(this.padding).concat(content).concat(this.padding);
+        var spacesToAdd = width - content.length;
+        if (spacesToAdd <= 0)
+            return paddedContent;
+        switch (effectiveAlignment) {
+            case "right":
+                return " ".repeat(spacesToAdd) + paddedContent;
+            case "center": {
+                var leftPad = Math.floor(spacesToAdd / 2);
+                var rightPad = spacesToAdd - leftPad;
+                return " ".repeat(leftPad) + paddedContent + " ".repeat(rightPad);
             }
-            default: // left or none
-                return "".concat(this.padding).concat(content.padEnd(totalWidth)).concat(this.padding);
+            case "justify":
+            case "left":
+            case "none":
+            default:
+                return paddedContent + " ".repeat(spacesToAdd);
         }
     };
     return CellFormatter;
@@ -4136,11 +4129,11 @@ var AlignmentFormatter = /** @class */ (function () {
         return this.indicators[alignment](width);
     };
     AlignmentFormatter.indicators = {
-        left: function (width) { return ":".concat('-'.repeat(width - 1)); },
-        right: function (width) { return "".concat('-'.repeat(width - 1), ":"); },
-        center: function (width) { return ":".concat('-'.repeat(width - 2), ":"); },
-        none: function (width) { return '-'.repeat(width); },
-        justify: function (width) { return '-'.repeat(width); }
+        left: function (width) { return ":".concat("-".repeat(width - 1)); },
+        right: function (width) { return "".concat("-".repeat(width - 1), ":"); },
+        center: function (width) { return ":".concat("-".repeat(width - 2), ":"); },
+        none: function (width) { return "-".repeat(width); },
+        justify: function (width) { return "-".repeat(width); },
     };
     return AlignmentFormatter;
 }());
@@ -4151,9 +4144,9 @@ var TableFormatter = /** @class */ (function () {
         this.adjustedAlignments = this.getAdjustedAlignments();
     }
     TableFormatter.prototype.getAdjustedAlignments = function () {
-        var defaultAlignment = 'none';
+        var defaultAlignment = "none";
         var sanitizeAlignment = function (alignment) {
-            return alignment === 'justify' ? 'none' : alignment;
+            return alignment === "justify" ? "none" : alignment;
         };
         return this.config.columnAlignments.length < this.config.columnCount
             ? __spreadArray(__spreadArray([], Array.from(this.config.columnAlignments).map(sanitizeAlignment), true), Array(this.config.columnCount - this.config.columnAlignments.length).fill(defaultAlignment), true) : Array.from(this.config.columnAlignments).map(sanitizeAlignment);
@@ -4161,81 +4154,77 @@ var TableFormatter = /** @class */ (function () {
     TableFormatter.prototype.formatRow = function (row) {
         var _this = this;
         var formattedCells = Array.from({ length: this.config.columnCount }, function (_, i) {
-            var _a;
-            var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : '';
-            if (_this.config.replaceNewlines) {
-                cell = replaceNewlinesInCell(cell);
-            }
-            var alignment = _this.adjustedAlignments[i];
-            var width = _this.config.columnWidths ? _this.config.columnWidths[i] : formatCellContent(cell).length;
-            return _this.cellFormatter.formatCell(cell, alignment, width);
+            var _a, _b, _c;
+            var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : { content: "" };
+            var width = (_c = (_b = _this.config.columnWidths) === null || _b === void 0 ? void 0 : _b[i]) !== null && _c !== void 0 ? _c : cell.content.length;
+            return _this.cellFormatter.formatCell(cell, width);
         });
-        return "|".concat(formattedCells.join('|'), "|");
+        return "|".concat(formattedCells.join("|"), "|");
     };
     TableFormatter.prototype.formatAlignmentRow = function () {
         var _this = this;
-        var padding = this.config.useTabs ? '\t' : (this.config.hasPadding ? ' ' : '');
+        var padding = this.config.useTabs
+            ? "\t"
+            : this.config.hasPadding
+                ? " "
+                : "";
         var formattedColumns = Array.from({ length: this.config.columnCount }, function (_, i) {
+            var _a, _b;
             var alignment = _this.adjustedAlignments[i];
-            var width = _this.config.columnWidths ? _this.config.columnWidths[i] : 3;
+            var width = (_b = (_a = _this.config.columnWidths) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 3;
             var indicator = AlignmentFormatter.formatIndicator(alignment, width);
             return "".concat(padding).concat(indicator).concat(padding);
         });
-        return "|".concat(formattedColumns.join('|'), "|");
+        return "|".concat(formattedColumns.join("|"), "|");
     };
     return TableFormatter;
 }());
-function calculateColumnWidths(tableRows, maxColumnCount) {
+function calculateColumnWidths(tableRows, maxColumnCount, config) {
     var widths = new Array(maxColumnCount).fill(3);
+    var cellFormatter = new CellFormatter(config);
     tableRows.forEach(function (row) {
-        var _a;
         for (var i = 0; i < maxColumnCount; i++) {
-            var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : '';
-            var content = formatCellContent(cell);
-            widths[i] = Math.max(widths[i], content.length);
+            var cell = row[i];
+            if (cell) {
+                var formattedContent = cellFormatter["formatCellContent"](cell);
+                widths[i] = Math.max(widths[i], formattedContent.length);
+            }
         }
     });
     return widths;
 }
-function calculateMaxColumnCount(inputData) {
-    var headerColumnCount = inputData.inputDataHeader.length;
-    var bodyColumnCounts = inputData.inputDataBody.map(function (row) { return row.length; });
-    return Math.max.apply(Math, __spreadArray([headerColumnCount], bodyColumnCounts, false));
-}
-function getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths) {
-    return canAdjustColumnWidths
-        ? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount)
-        : undefined;
-}
 function generateMarkdownTableString(inputData, columnAlignments, canAdjustColumnWidths, useTabs, replaceNewlines, hasPadding) {
     if (canAdjustColumnWidths === void 0) { canAdjustColumnWidths = true; }
     if (useTabs === void 0) { useTabs = false; }
     if (replaceNewlines === void 0) { replaceNewlines = false; }
     if (hasPadding === void 0) { hasPadding = true; }
-    var maxColumnCount = calculateMaxColumnCount(inputData);
-    var columnWidths = getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths);
+    var maxColumnCount = Math.max.apply(Math, __spreadArray([inputData.inputDataHeader.length], inputData.inputDataBody.map(function (row) { return row.length; }), false));
     var config = {
         columnCount: maxColumnCount,
         columnAlignments: columnAlignments,
-        columnWidths: columnWidths,
+        columnWidths: canAdjustColumnWidths
+            ? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount, {
+                columnCount: maxColumnCount,
+                columnAlignments: columnAlignments,
+                useTabs: useTabs,
+                replaceNewlines: replaceNewlines,
+                hasPadding: hasPadding,
+            })
+            : undefined,
         useTabs: useTabs,
         replaceNewlines: replaceNewlines,
-        hasPadding: hasPadding
+        hasPadding: hasPadding,
     };
     var tableFormatter = new TableFormatter(config);
     var headerRow = tableFormatter.formatRow(inputData.inputDataHeader);
     var alignmentRow = tableFormatter.formatAlignmentRow();
     var bodyRows = inputData.inputDataBody
         .map(function (row) { return tableFormatter.formatRow(row); })
-        .join('\n');
+        .join("\n");
     return "".concat(headerRow, "\n").concat(alignmentRow, "\n").concat(bodyRows).trimEnd();
 }
-function replaceNewlinesInCell(cell) {
-    var content = typeof cell === 'string' ? cell : cell.content;
-    return content.replace(/\n/g, '<br>');
-}
 function getColumnName(index) {
-    var columnName = '';
+    var columnName = "";
     var currentIndex = index;
     while (currentIndex >= 0) {
         columnName = String.fromCharCode((currentIndex % 26) + 65) + columnName;
@@ -4255,7 +4244,7 @@ var MarkdownTableError = /** @class */ (function (_super) {
     __extends(MarkdownTableError, _super);
     function MarkdownTableError(message) {
         var _this = _super.call(this, message) || this;
-        _this.name = 'MarkdownTableError';
+        _this.name = "MarkdownTableError";
         Object.setPrototypeOf(_this, MarkdownTableError.prototype);
         return _this;
     }
@@ -4268,10 +4257,10 @@ var MarkdownTableError = /** @class */ (function (_super) {
  */
 function validateInputData(inputData) {
     if (inputData === null || !Array.isArray(inputData)) {
-        throw new MarkdownTableError('The \'data\' prop must be a two-dimensional array.');
+        throw new MarkdownTableError("The 'data' prop must be a two-dimensional array.");
     }
     if (inputData.length === 0) {
-        throw new MarkdownTableError('The \'data\' array must contain at least one row.');
+        throw new MarkdownTableError("The 'data' array must contain at least one row.");
     }
 }
 
@@ -4281,7 +4270,10 @@ var DARK_THEME_CSS = "\ncode[class*=language-],pre[class*=language-]{color:#f8f8
 var getTableData = function (inputData, hasHeader) {
     return hasHeader
         ? { inputDataHeader: inputData[0], inputDataBody: inputData.slice(1) }
-        : { inputDataHeader: generateAlphabetHeaders(inputData[0].length).map(function (header) { return ({ content: header }); }), inputDataBody: inputData };
+        : {
+            inputDataHeader: generateAlphabetHeaders(inputData[0].length).map(function (header) { return ({ content: header }); }),
+            inputDataBody: inputData,
+        };
 };
 var generateTableSyntax = function (inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, canReplaceNewlines, hasPadding) {
     try {
@@ -4299,7 +4291,7 @@ var generateTableSyntax = function (inputData, hasHeader, columnAlignments, adju
 var applySyntaxHighlighting = function (preElementRef, markdownTableSyntax) {
     require$$0.useEffect(function () {
         var _a;
-        var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('code');
+        var codeElement = (_a = preElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("code");
         if (codeElement && markdownTableSyntax) {
             requestAnimationFrame(function () {
                 Prism$1.highlightElement(codeElement);
@@ -4308,10 +4300,12 @@ var applySyntaxHighlighting = function (preElementRef, markdownTableSyntax) {
     }, [markdownTableSyntax]);
 };
 var MarkdownTable = function (_a) {
-    var _b = _a.inputData, inputData = _b === void 0 ? null : _b, _c = _a.hasHeader, hasHeader = _c === void 0 ? true : _c, _d = _a.columnAlignments, columnAlignments = _d === void 0 ? [] : _d, _e = _a.isCompact, isCompact = _e === void 0 ? false : _e, _f = _a.hasTabs, hasTabs = _f === void 0 ? false : _f, _g = _a.hasPadding, hasPadding = _g === void 0 ? true : _g, _h = _a.convertLineBreaks, convertLineBreaks = _h === void 0 ? false : _h, className = _a.className, onGenerate = _a.onGenerate, _j = _a.theme, theme = _j === void 0 ? 'light' : _j, preStyle = _a.preStyle, _k = _a.topPadding, topPadding = _k === void 0 ? 16 : _k, minWidth = _a.minWidth;
+    var _b = _a.inputData, inputData = _b === void 0 ? null : _b, _c = _a.hasHeader, hasHeader = _c === void 0 ? true : _c, _d = _a.columnAlignments, columnAlignments = _d === void 0 ? [] : _d, _e = _a.isCompact, isCompact = _e === void 0 ? false : _e, _f = _a.hasTabs, hasTabs = _f === void 0 ? false : _f, _g = _a.hasPadding, hasPadding = _g === void 0 ? true : _g, _h = _a.convertLineBreaks, convertLineBreaks = _h === void 0 ? false : _h, className = _a.className, onGenerate = _a.onGenerate, _j = _a.theme, theme = _j === void 0 ? "light" : _j, preStyle = _a.preStyle, _k = _a.topPadding, topPadding = _k === void 0 ? 16 : _k, minWidth = _a.minWidth;
     var adjustColumnWidths = !isCompact;
     var preElementRef = require$$0.useRef(null);
-    var markdownTableSyntax = require$$0.useMemo(function () { return generateTableSyntax(inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, convertLineBreaks, hasPadding); }, [
+    var markdownTableSyntax = require$$0.useMemo(function () {
+        return generateTableSyntax(inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, convertLineBreaks, hasPadding);
+    }, [
         inputData,
         hasHeader,
         columnAlignments,
@@ -4326,11 +4320,11 @@ var MarkdownTable = function (_a) {
         }
     }, [markdownTableSyntax, onGenerate]);
     applySyntaxHighlighting(preElementRef, markdownTableSyntax);
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("style", { children: [theme === 'light' ? LIGHT_THEME_CSS : DARK_THEME_CSS, "\n          pre {\n            position: relative;\n            padding-top: ".concat(topPadding, "px !important;\n          }\n          pre::before {\n            position: absolute;\n            top: 8px;\n            left: 12px;\n            color: ").concat(theme === 'light' ? '#666' : '#999', ";\n            letter-spacing: 2px;\n            font-size: 12px;\n          }\n        ")] }), jsxRuntimeExports.jsx("div", { id: "MarkdownTable", style: {
-                    position: 'relative',
-                    isolation: 'isolate',
-                    display: 'inline-block'
-                }, children: jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme === 'dark' ? 'dark-theme' : ''), style: __assign({ width: 'fit-content', minWidth: minWidth ? "".concat(minWidth, "px") : 'min-content', margin: 0 }, preStyle), children: jsxRuntimeExports.jsx("code", { className: "language-markdown", role: "code", children: markdownTableSyntax }) }) })] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("style", { children: [theme === "light" ? LIGHT_THEME_CSS : DARK_THEME_CSS, "\n          pre {\n            position: relative;\n            padding-top: ".concat(topPadding, "px !important;\n          }\n          pre::before {\n            position: absolute;\n            top: 8px;\n            left: 12px;\n            color: ").concat(theme === "light" ? "#666" : "#999", ";\n            letter-spacing: 2px;\n            font-size: 12px;\n          }\n        ")] }), jsxRuntimeExports.jsx("div", { id: "MarkdownTable", style: {
+                    position: "relative",
+                    isolation: "isolate",
+                    display: "inline-block",
+                }, children: jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme === "dark" ? "dark-theme" : ""), style: __assign({ width: "fit-content", minWidth: minWidth ? "".concat(minWidth, "px") : "min-content", margin: 0 }, preStyle), children: jsxRuntimeExports.jsx("code", { className: "language-markdown", role: "code", children: markdownTableSyntax }) }) })] }));
 };
 
 exports.MarkdownTable = MarkdownTable;