react-markdown-table-ts 1.1.2 → 1.1.4

package/README.md

@@ -26,13 +26,14 @@ interface MarkdownTableProps {
     theme?: 'light' | 'dark';
     className?: string;
     preStyle?: React.CSSProperties;
+    topPadding?: number;
     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'.                        |
+| `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.                         |
@@ -41,6 +42,7 @@ interface MarkdownTableProps {
 | `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.                          |
+| `topPadding`         | `number`                                | `16`        | Controls the padding-top (in pixels) of the \<pre\> element display.               |
 | `onGenerate`         | `(markdownTableString: string) => void` | `undefined` | Callback to receive the generated Markdown table string.                           |
 ## Usage Patterns
 
@@ -57,7 +59,7 @@ interface MarkdownTableProps {
 ```typescript
 <MarkdownTable
     inputData={data}
-    columnAlignments={['left', 'center', 'right']}
+    columnAlignments={['left', 'center', 'right', 'justify']}
 />
 ```
 3. **Auto-Generated Headers**:
@@ -74,12 +76,13 @@ interface MarkdownTableProps {
 - 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')
+- Column alignments must be valid ('left', 'center', 'right', 'justify', 'none')
 
 2. **Column Width Handling**:
-- Default: Adjusts columns to fit content
+- 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

package/dist/MarkdownTable.stories.d.ts

@@ -20,6 +20,7 @@ declare const meta: {
         hasTabs: false;
         hasHeader: true;
         convertLineBreaks: false;
+        topPadding: number;
         theme: "light";
     };
     argTypes: {
@@ -98,6 +99,18 @@ declare const meta: {
                 };
             };
         };
+        topPadding: {
+            control: {
+                type: "number";
+            };
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
         theme: {
             options: string[];
             control: {

package/dist/index.cjs.js

@@ -39,6 +39,17 @@ function __extends(d, b) {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 }
 
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 function __spreadArray(to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -4090,6 +4101,7 @@ var AlignmentFormatter = /** @class */ (function () {
         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;
 }());
@@ -4100,9 +4112,12 @@ var TableFormatter = /** @class */ (function () {
         this.adjustedAlignments = this.getAdjustedAlignments();
     }
     TableFormatter.prototype.getAdjustedAlignments = function () {
-        var defaultAlignment = 'left';
+        var defaultAlignment = 'none';
+        var sanitizeAlignment = function (alignment) {
+            return alignment === 'justify' ? 'none' : alignment;
+        };
         return this.config.columnAlignments.length < this.config.columnCount
-            ? __spreadArray(__spreadArray([], Array.from(this.config.columnAlignments), true), Array(this.config.columnCount - this.config.columnAlignments.length).fill(defaultAlignment), true) : Array.from(this.config.columnAlignments);
+            ? __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);
     };
     TableFormatter.prototype.formatRow = function (row) {
         var _this = this;
@@ -4252,10 +4267,10 @@ 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;
+    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;
     var adjustColumnWidths = !isCompact;
     var preElementRef = require$$0.useRef(null);
-    var markdownTableSyntax = require$$0.useMemo(function () { return generateTableSyntax(inputData, hasHeader, __spreadArray([], columnAlignments, true), adjustColumnWidths, hasTabs, convertLineBreaks, hasPadding); }, [
+    var markdownTableSyntax = require$$0.useMemo(function () { return generateTableSyntax(inputData, hasHeader, columnAlignments, adjustColumnWidths, hasTabs, convertLineBreaks, hasPadding); }, [
         inputData,
         hasHeader,
         columnAlignments,
@@ -4270,10 +4285,12 @@ var MarkdownTable = function (_a) {
         }
     }, [markdownTableSyntax, onGenerate]);
     applySyntaxHighlighting(preElementRef, markdownTableSyntax);
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: theme === 'light' ? LIGHT_THEME_CSS : DARK_THEME_CSS }), jsxRuntimeExports.jsx("div", { style: {
+    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", { style: {
                     position: 'relative',
-                    isolation: 'isolate'
-                }, children: 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 }) }) })] }));
+                    isolation: 'isolate',
+                    display: 'flex',
+                    justifyContent: 'center'
+                }, children: jsxRuntimeExports.jsx("pre", { ref: preElementRef, className: "".concat(className, " language-markdown line-numbers ").concat(theme === 'dark' ? 'dark-theme' : ''), style: __assign({ width: 'fit-content', minWidth: 'min-content', margin: 0 }, preStyle), children: jsxRuntimeExports.jsx("code", { className: "language-markdown", role: "code", children: markdownTableSyntax }) }) })] }));
 };
 
 exports.MarkdownTable = MarkdownTable;