react-markdown-table-ts 0.5.5 → 0.5.7

package/README.md

@@ -1,63 +1,65 @@
-# ⚛️ react-markdown-table-ts 🛡️
-
-[![NPM Version](https://img.shields.io/npm/v/react-markdown-table-ts.svg)](https://www.npmjs.com/package/react-markdown-table-ts)
-![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white)
-[![codecov](https://codecov.io/gh/keithwalsh/react-markdown-table-ts/branch/main/graph/badge.svg)](https://codecov.io/gh/keithwalsh/react-markdown-table-ts)
-
-A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.
-
-## ✨ Features
-
-- **Type Safety:** Built with TypeScript to provide strong type guarantees.
-- **Easy Integration:** Simple API for converting data arrays into Markdown table strings.
-- **Customizable Alignments:** Specify column alignments (left, center, right, or none) with ease.
-- **Compact Mode:** Option to generate compact tables with minimal padding.
-- **Tab-Separated Columns:** Option to add tabs between columns.
-- **Newline Handling: Option** to replace newlines in cells with HTML line breaks.
-- **Raw Markdown Access:** Retrieve the generated Markdown string for further processing or usage.
-- **Header Options:** Choose whether to include a header row or use default alphabetical headers.
-- **Flexible Styling:** Apply custom CSS classes for styling the rendered Markdown.
-
-## 📦 Installation
-
-Install the package via npm:
-
-```
-
-npm install react-markdown-table-ts
-
-```
-
-## 🔧 API
-
-### MarkdownTable Props
-
-|         Prop         |                     Type                      |   Default   |                 Description                 |
-| :------------------: | :-------------------------------------------: | :---------: | :-----------------------------------------: |
-|        `data`        |                 `string[][]`                  |   `null`    |   The table data as a 2D array of strings   |
-|  `columnAlignments`  | `('left' \| 'center' \| 'right' \| 'none')[]` |    `[]`     |          Alignment for each column          |
-|     `isCompact`      |                   `boolean`                   |   `false`   |          Use minimal column widths          |
-|     `className`      |                   `string`                    | `undefined` |        CSS class for the `<pre>` tag        |
-|      `hasTabs`       |                   `boolean`                   |   `false`   |       Add tabs between table columns        |
-| `canReplaceNewlines` |                   `boolean`                   |   `false`   | Replace newlines in cells with `<br>` tags  |
-|   `onTableCreate`    |      `(markdownString: string) => void`       | `undefined` |   Callback to receive the Markdown string   |
-|     `hasHeader`      |                   `boolean`                   |   `true`    | Whether the first row of `data` is a header |
-
-## 🚀 Usage
-
-```jsx
-import React from 'react';
-import {MarkdownTable} from 'markdown-table-component';
-
-const App = () => {
-  const data = [
-    ['Header 1', 'Header 2', 'Header 3'],
-    ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
-    ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
-  ];
-
-  return <MarkdownTable data={data} />;
-};
-
-export default App;
-```
+# ⚛️ react-markdown-table-ts 🛡️
+
+[![NPM Version](https://img.shields.io/npm/v/react-markdown-table-ts.svg)](https://www.npmjs.com/package/react-markdown-table-ts)
+![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white)
+[![codecov](https://codecov.io/gh/keithwalsh/react-markdown-table-ts/branch/main/graph/badge.svg)](https://codecov.io/gh/keithwalsh/react-markdown-table-ts)
+[![Package Quality](https://packagequality.com/shield/react-markdown-table-ts.svg)](https://packagequality.com/#?package=react-markdown-table-ts)
+[![Code Climate](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts/badges/gpa.svg)](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts)
+
+A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.
+
+## ✨ Features
+
+- **Type Safety:** Built with TypeScript to provide strong type guarantees.
+- **Easy Integration:** Simple API for converting data arrays into Markdown table strings.
+- **Customizable Alignments:** Specify column alignments (left, center, right, or none) with ease.
+- **Compact Mode:** Option to generate compact tables with minimal padding.
+- **Tab-Separated Columns:** Option to add tabs between columns.
+- **Newline Handling: Option** to replace newlines in cells with HTML line breaks.
+- **Raw Markdown Access:** Retrieve the generated Markdown string for further processing or usage.
+- **Header Options:** Choose whether to include a header row or use default alphabetical headers.
+- **Flexible Styling:** Apply custom CSS classes for styling the rendered Markdown.
+
+## 📦 Installation
+
+Install the package via npm:
+
+```
+
+npm install react-markdown-table-ts
+
+```
+
+## 🔧 API
+
+### MarkdownTable Props
+
+|         Prop         |                     Type                      |   Default   |                 Description                 |
+| :------------------: | :-------------------------------------------: | :---------: | :-----------------------------------------: |
+|        `data`        |                 `string[][]`                  |   `null`    |   The table data as a 2D array of strings   |
+|  `columnAlignments`  | `('left' \| 'center' \| 'right' \| 'none')[]` |    `[]`     |          Alignment for each column          |
+|     `isCompact`      |                   `boolean`                   |   `false`   |          Use minimal column widths          |
+|     `className`      |                   `string`                    | `undefined` |        CSS class for the `<pre>` tag        |
+|      `hasTabs`       |                   `boolean`                   |   `false`   |       Add tabs between table columns        |
+| `canReplaceNewlines` |                   `boolean`                   |   `false`   | Replace newlines in cells with `<br>` tags  |
+|   `onTableCreate`    |      `(markdownString: string) => void`       | `undefined` |   Callback to receive the Markdown string   |
+|     `hasHeader`      |                   `boolean`                   |   `true`    | Whether the first row of `data` is a header |
+
+## 🚀 Usage
+
+```jsx
+import React from 'react';
+import {MarkdownTable} from 'markdown-table-component';
+
+const App = () => {
+  const data = [
+    ['Header 1', 'Header 2', 'Header 3'],
+    ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
+    ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
+  ];
+
+  return <MarkdownTable data={data} />;
+};
+
+export default App;
+```

package/dist/index.cjs.js

@@ -4095,6 +4095,17 @@ var MarkdownTableError = /** @class */ (function (_super) {
 }(Error));
 
 // src/utils.ts
+/**
+ * Adjusts column alignments array to match the required column count
+ * @param columnAlignments - Original alignment settings
+ * @param columnCount - Required number of columns
+ * @returns Adjusted array of column alignments
+ */
+function getAdjustedAlignments(columnAlignments, columnCount) {
+    var defaultAlignment = 'left';
+    return columnAlignments.length < columnCount
+        ? __spreadArray(__spreadArray([], Array.from(columnAlignments), true), Array(columnCount - columnAlignments.length).fill(defaultAlignment), true) : Array.from(columnAlignments);
+}
 /**
  * Calculates the maximum width for each column based on the content.
  * @param tableRows - All rows (header and body) of the table.
@@ -4128,16 +4139,14 @@ function formatMarkdownRow(columnCount, currentRow, columnAlignments, columnWidt
     if (useTabs === void 0) { useTabs = false; }
     if (canReplaceNewlines === void 0) { canReplaceNewlines = false; }
     if (hasPadding === void 0) { hasPadding = true; }
-    var defaultAlignment = 'left';
-    var adjustedAlignments = columnAlignments.length < columnCount
-        ? __spreadArray(__spreadArray([], columnAlignments, true), Array(columnCount - columnAlignments.length).fill(defaultAlignment), true) : columnAlignments;
+    var adjustedAlignments = getAdjustedAlignments(columnAlignments, columnCount);
     var markdownRow = '|';
     for (var i = 0; i < columnCount; i++) {
         var cell = (_a = currentRow[i]) !== null && _a !== void 0 ? _a : '';
         if (canReplaceNewlines) {
             cell = replaceNewlinesInCell(cell);
         }
-        var alignment = (_b = adjustedAlignments[i]) !== null && _b !== void 0 ? _b : defaultAlignment;
+        var alignment = (_b = adjustedAlignments[i]) !== null && _b !== void 0 ? _b : 'left';
         var targetWidth = columnWidths ? columnWidths[i] : cell.length;
         var padding = hasPadding ? ' ' : '';
         if (alignment === 'right') {
@@ -4169,12 +4178,10 @@ function formatAlignmentRow(columnCount, columnAlignments, columnWidths, useTabs
     var _a;
     if (useTabs === void 0) { useTabs = false; }
     if (hasPadding === void 0) { hasPadding = true; }
-    var defaultAlignment = 'left';
-    var adjustedAlignments = columnAlignments.length < columnCount
-        ? __spreadArray(__spreadArray([], columnAlignments, true), Array(columnCount - columnAlignments.length).fill(defaultAlignment), true) : columnAlignments;
+    var adjustedAlignments = getAdjustedAlignments(columnAlignments, columnCount);
     var alignmentRow = '|';
     for (var i = 0; i < columnCount; i++) {
-        var alignment = (_a = adjustedAlignments[i]) !== null && _a !== void 0 ? _a : defaultAlignment;
+        var alignment = (_a = adjustedAlignments[i]) !== null && _a !== void 0 ? _a : 'left';
         var targetWidth = columnWidths ? columnWidths[i] : 3;
         var alignIndicator = '';
         var padding = hasPadding ? ' ' : '';
@@ -18566,10 +18573,10 @@ var Tooltip$1 = Tooltip;
 var LIGHT_THEME_CSS = "\ncode[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}pre[class*=language-].line-numbers{position:relative;padding-left:2.4em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.5em;text-align:right}\n";
 var DARK_THEME_CSS = "\ncode[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#282a36}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}pre[class*=language-].line-numbers{position:relative;padding-left:2.4em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.5em;text-align:right}\n";
 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.canReplaceNewlines, canReplaceNewlines = _h === void 0 ? false : _h, className = _a.className, onTableCreate = _a.onTableCreate, _j = _a.theme, theme = _j === void 0 ? 'light' : _j, preStyle = _a.preStyle;
+    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.canReplaceNewlines, canReplaceNewlines = _h === void 0 ? false : _h, className = _a.className, onTableCreate = _a.onTableCreate, _j = _a.theme, theme = _j === void 0 ? 'light' : _j, preStyle = _a.preStyle, _k = _a.showCopyButton, showCopyButton = _k === void 0 ? false : _k;
     var adjustColumnWidths = !isCompact;
     var preElementRef = React.useRef(null);
-    var _k = React.useState(false), isCopied = _k[0], setIsCopied = _k[1];
+    var _l = React.useState(false), isCopied = _l[0], setIsCopied = _l[1];
     var markdownTableSyntax = React.useMemo(function () {
         if (inputData === null) {
             return 'Error: No data provided for the table.';
@@ -18578,24 +18585,13 @@ var MarkdownTable = function (_a) {
             if (!Array.isArray(inputData) || inputData.length === 0) {
                 throw new MarkdownTableError("The 'data' prop must be a non-empty two-dimensional array.");
             }
-            var tableData = hasHeader
-                ? {
-                    inputDataHeader: inputData[0],
-                    inputDataBody: inputData.slice(1),
-                }
-                : {
-                    inputDataHeader: generateAlphabetHeaders(inputData[0].length),
-                    inputDataBody: inputData,
-                };
-            return generateMarkdownTableString(tableData, columnAlignments, adjustColumnWidths, hasTabs, canReplaceNewlines, hasPadding);
+            var _a = hasHeader
+                ? { inputDataHeader: inputData[0], inputDataBody: inputData.slice(1) }
+                : { inputDataHeader: generateAlphabetHeaders(inputData[0].length), inputDataBody: inputData }, inputDataHeader = _a.inputDataHeader, inputDataBody = _a.inputDataBody;
+            return generateMarkdownTableString({ inputDataHeader: inputDataHeader, inputDataBody: inputDataBody }, columnAlignments, adjustColumnWidths, hasTabs, canReplaceNewlines, hasPadding);
         }
         catch (error) {
-            if (error instanceof MarkdownTableError) {
-                return "Error: ".concat(error.message);
-            }
-            else {
-                throw error;
-            }
+            return error instanceof MarkdownTableError ? "Error: ".concat(error.message) : (function () { throw error; })();
         }
     }, [
         inputData,
@@ -18628,12 +18624,12 @@ var MarkdownTable = function (_a) {
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: theme === 'light' ? LIGHT_THEME_CSS : DARK_THEME_CSS }), jsxRuntimeExports.jsxs("div", { style: {
                     position: 'relative',
                     isolation: 'isolate'
-                }, children: [jsxRuntimeExports.jsx(Tooltip$1, { title: isCopied ? 'Copied!' : 'Copy markdown table syntax', placement: "left-end", arrow: true, children: jsxRuntimeExports.jsx(IconButton$1, { onClick: handleCopy, sx: {
+                }, children: [showCopyButton && (jsxRuntimeExports.jsx(Tooltip$1, { title: isCopied ? 'Copied!' : 'Copy markdown table syntax', placement: "left-end", arrow: true, children: jsxRuntimeExports.jsx(IconButton$1, { onClick: handleCopy, sx: {
                                 position: 'absolute',
                                 top: '12px',
                                 right: '8px',
                                 zIndex: 1
-                            }, "aria-label": "Copy to clipboard", size: "small", children: jsxRuntimeExports.jsx(ContentCopyIcon, { fontSize: "small" }) }) }), jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme === 'dark' ? 'dark-theme' : ''), style: preStyle, children: jsxRuntimeExports.jsx("code", { className: "language-markdown", role: "code", children: markdownTableSyntax }) })] })] }));
+                            }, "aria-label": "Copy to clipboard", size: "small", children: jsxRuntimeExports.jsx(ContentCopyIcon, { fontSize: "small" }) }) })), jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme === 'dark' ? 'dark-theme' : ''), style: preStyle, children: jsxRuntimeExports.jsx("code", { className: "language-markdown", role: "code", children: markdownTableSyntax }) })] })] }));
 };
 
 exports.MarkdownTable = MarkdownTable;