react-markdown-table-ts 1.1.8 → 1.2.0

package/README.md

@@ -7,16 +7,27 @@
 [![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 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.
+
+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.
 
 ## 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[][] | null;
+    inputData?: (string | CellData)[][] | null; // Table data as strings or CellData objects
     columnAlignments?: readonly Alignment[];
     isCompact?: boolean;
     hasPadding?: boolean;
@@ -31,24 +42,26 @@ interface MarkdownTableProps {
     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', '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.                           |
+|---------------------|----------------------------------------|-------------|------------------------------------------------------------------------------------|
+| `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                            |
+
 ## Usage Patterns
 
-1. **Basic Table Generation**:
+1. **Basic String Table**:
 ```typescript
 <MarkdownTable
     inputData={[
@@ -57,20 +70,44 @@ interface MarkdownTableProps {
     ]}
 />
 ```
-2. **Column Alignment**:
+
+2. **Rich Text Formatting with CellData**:
 ```typescript
 <MarkdownTable
-    inputData={data}
-    columnAlignments={['left', 'center', 'right', 'justify']}
+    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']}
 />
 ```
-3. **Auto-Generated Headers**:
+
+3. **Links and Mixed Formatting**:
 ```typescript
 <MarkdownTable
-    inputData={data}
-    hasHeader={false} // Will generate A, B, C... headers
+    inputData={[
+        [
+            { content: "Product", bold: true },
+            { content: "Details", bold: true }
+        ],
+        [
+            { content: "Item 1", link: "https://example.com/item1" },
+            { content: "New!", italic: true }
+        ]
+    ]}
 />
 ```
+
 4. **Setting Minimum Width**:
 ```typescript
 <MarkdownTable
@@ -82,34 +119,31 @@ interface MarkdownTableProps {
 ## Behaviors
 
 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', '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}`
+   - 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.

package/dist/cellFormatter.d.ts

@@ -0,0 +1,9 @@
+import { CellData } from './types';
+/**
+ * Formats cell content with markdown syntax based on CellData formatting options
+ */
+export declare function formatCellContent(cell: string | CellData): string;
+/**
+ * Gets the alignment for a cell, prioritizing cell-specific alignment over column alignment
+ */
+export declare function getCellAlignment(cell: string | CellData, columnAlignment?: string): string;

package/dist/index.cjs.js

@@ -4068,14 +4068,53 @@ var Prism$1 = /*@__PURE__*/getDefaultExportFromCjs(prismExports);
 
 }());
 
+/**
+ * Formats cell content with markdown syntax based on CellData formatting options
+ */
+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 ? ' ' : '');
     }
-    CellFormatter.prototype.formatCell = function (content, alignment, width) {
+    CellFormatter.prototype.formatCell = function (cell, alignment, width) {
+        var content = formatCellContent(cell);
+        var cellAlignment = getCellAlignment(cell, alignment);
         var totalWidth = width;
-        switch (alignment) {
+        switch (cellAlignment) {
             case 'right':
                 return "".concat(this.padding).concat(content.padStart(totalWidth)).concat(this.padding);
             case 'center': {
@@ -4128,7 +4167,7 @@ var TableFormatter = /** @class */ (function () {
                 cell = replaceNewlinesInCell(cell);
             }
             var alignment = _this.adjustedAlignments[i];
-            var width = _this.config.columnWidths ? _this.config.columnWidths[i] : cell.length;
+            var width = _this.config.columnWidths ? _this.config.columnWidths[i] : formatCellContent(cell).length;
             return _this.cellFormatter.formatCell(cell, alignment, width);
         });
         return "|".concat(formattedCells.join('|'), "|");
@@ -4152,7 +4191,8 @@ function calculateColumnWidths(tableRows, maxColumnCount) {
         var _a;
         for (var i = 0; i < maxColumnCount; i++) {
             var cell = (_a = row[i]) !== null && _a !== void 0 ? _a : '';
-            widths[i] = Math.max(widths[i], cell.length);
+            var content = formatCellContent(cell);
+            widths[i] = Math.max(widths[i], content.length);
         }
     });
     return widths;
@@ -4191,7 +4231,8 @@ function generateMarkdownTableString(inputData, columnAlignments, canAdjustColum
     return "".concat(headerRow, "\n").concat(alignmentRow, "\n").concat(bodyRows).trimEnd();
 }
 function replaceNewlinesInCell(cell) {
-    return cell.replace(/\n/g, '<br>');
+    var content = typeof cell === 'string' ? cell : cell.content;
+    return content.replace(/\n/g, '<br>');
 }
 function getColumnName(index) {
     var columnName = '';
@@ -4227,10 +4268,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.');
     }
 }
 
@@ -4240,7 +4281,7 @@ 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), 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 {
@@ -4267,7 +4308,7 @@ 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; _a.topPadding; var 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); }, [
@@ -4285,7 +4326,7 @@ 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          }\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: {
+    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'