react-markdown-table-ts 0.6.0 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -65
- package/dist/index.cjs.js +36 -52
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +36 -52
- package/dist/index.esm.js.map +1 -1
- package/dist/utils.d.ts +0 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,65 +1,64 @@
|
|
|
1
|
-
# ⚛️ react-markdown-table-ts 🛡️
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/react-markdown-table-ts)
|
|
4
|
-
](https://www.npmjs.com/package/react-markdown-table-ts)
|
|
4
|
+
[](https://codecov.io/gh/keithwalsh/react-markdown-table-ts)
|
|
5
|
+
|
|
6
|
+
[](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts)
|
|
7
|
+
|
|
8
|
+
A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.
|
|
9
|
+
|
|
10
|
+
## ✨ Features
|
|
11
|
+
|
|
12
|
+
- **Type Safety:** Built with TypeScript to provide strong type guarantees.
|
|
13
|
+
- **Easy Integration:** Simple API for converting data arrays into Markdown table strings.
|
|
14
|
+
- **Customizable Alignments:** Specify column alignments (left, center, right, or none) with ease.
|
|
15
|
+
- **Compact Mode:** Option to generate compact tables with minimal padding.
|
|
16
|
+
- **Tab-Separated Columns:** Option to add tabs between columns.
|
|
17
|
+
- **Newline Handling: Option** to replace newlines in cells with HTML line breaks.
|
|
18
|
+
- **Raw Markdown Access:** Retrieve the generated Markdown string for further processing or usage.
|
|
19
|
+
- **Header Options:** Choose whether to include a header row or use default alphabetical headers.
|
|
20
|
+
- **Flexible Styling:** Apply custom CSS classes for styling the rendered Markdown.
|
|
21
|
+
|
|
22
|
+
## 📦 Installation
|
|
23
|
+
|
|
24
|
+
Install the package via npm:
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
npm install react-markdown-table-ts
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## 🔧 API
|
|
33
|
+
|
|
34
|
+
### MarkdownTable Props
|
|
35
|
+
|
|
36
|
+
| Prop | Type | Default | Description |
|
|
37
|
+
| :------------------: | :-------------------------------------------: | :---------: | :-----------------------------------------: |
|
|
38
|
+
| `data` | `string[][]` | `null` | The table data as a 2D array of strings |
|
|
39
|
+
| `columnAlignments` | `('left' \| 'center' \| 'right' \| 'none')[]` | `[]` | Alignment for each column |
|
|
40
|
+
| `isCompact` | `boolean` | `false` | Use minimal column widths |
|
|
41
|
+
| `className` | `string` | `undefined` | CSS class for the `<pre>` tag |
|
|
42
|
+
| `hasTabs` | `boolean` | `false` | Add tabs between table columns |
|
|
43
|
+
| `canReplaceNewlines` | `boolean` | `false` | Replace newlines in cells with `<br>` tags |
|
|
44
|
+
| `onTableCreate` | `(markdownString: string) => void` | `undefined` | Callback to receive the Markdown string |
|
|
45
|
+
| `hasHeader` | `boolean` | `true` | Whether the first row of `data` is a header |
|
|
46
|
+
|
|
47
|
+
## 🚀 Usage
|
|
48
|
+
|
|
49
|
+
```jsx
|
|
50
|
+
import React from 'react';
|
|
51
|
+
import {MarkdownTable} from 'markdown-table-component';
|
|
52
|
+
|
|
53
|
+
const App = () => {
|
|
54
|
+
const data = [
|
|
55
|
+
['Header 1', 'Header 2', 'Header 3'],
|
|
56
|
+
['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
|
|
57
|
+
['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
|
|
58
|
+
];
|
|
59
|
+
|
|
60
|
+
return <MarkdownTable data={data} />;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export default App;
|
|
64
|
+
```
|
package/dist/index.cjs.js
CHANGED
|
@@ -4157,73 +4157,57 @@ function formatMarkdownRow(columnCount, currentRow, columnAlignments, columnWidt
|
|
|
4157
4157
|
});
|
|
4158
4158
|
return "|".concat(formattedCells.join('|'), "|");
|
|
4159
4159
|
}
|
|
4160
|
-
|
|
4161
|
-
|
|
4162
|
-
|
|
4163
|
-
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4168
|
-
|
|
4160
|
+
var alignmentIndicators = {
|
|
4161
|
+
left: function (width) { return ":".concat('-'.repeat(width - 1)); },
|
|
4162
|
+
right: function (width) { return "".concat('-'.repeat(width - 1), ":"); },
|
|
4163
|
+
center: function (width) { return ":".concat('-'.repeat(width - 2), ":"); },
|
|
4164
|
+
none: function (width) { return '-'.repeat(width); },
|
|
4165
|
+
};
|
|
4166
|
+
function getAlignmentIndicator(alignment, width) {
|
|
4167
|
+
return alignmentIndicators[alignment](width);
|
|
4168
|
+
}
|
|
4169
4169
|
function formatAlignmentRow(columnCount, columnAlignments, columnWidths, useTabs, hasPadding) {
|
|
4170
|
-
var _a;
|
|
4171
4170
|
if (useTabs === void 0) { useTabs = false; }
|
|
4172
4171
|
if (hasPadding === void 0) { hasPadding = true; }
|
|
4173
4172
|
var adjustedAlignments = getAdjustedAlignments(columnAlignments, columnCount);
|
|
4174
|
-
var
|
|
4175
|
-
|
|
4173
|
+
var padding = hasPadding ? ' ' : '';
|
|
4174
|
+
var formattedColumns = Array.from({ length: columnCount }, function (_, i) {
|
|
4175
|
+
var _a;
|
|
4176
4176
|
var alignment = (_a = adjustedAlignments[i]) !== null && _a !== void 0 ? _a : 'left';
|
|
4177
4177
|
var targetWidth = columnWidths ? columnWidths[i] : 3;
|
|
4178
|
-
var alignIndicator =
|
|
4179
|
-
|
|
4180
|
-
|
|
4181
|
-
|
|
4182
|
-
alignIndicator = ":".concat('-'.repeat(targetWidth - 1));
|
|
4183
|
-
break;
|
|
4184
|
-
case 'center':
|
|
4185
|
-
alignIndicator = ":".concat('-'.repeat(targetWidth - 2), ":");
|
|
4186
|
-
break;
|
|
4187
|
-
case 'right':
|
|
4188
|
-
alignIndicator = "".concat('-'.repeat(targetWidth - 1), ":");
|
|
4189
|
-
break;
|
|
4190
|
-
default:
|
|
4191
|
-
alignIndicator = "".concat('-'.repeat(targetWidth));
|
|
4192
|
-
break;
|
|
4193
|
-
}
|
|
4194
|
-
alignmentRow += "".concat(useTabs ? '\t' : padding).concat(alignIndicator).concat(useTabs ? '\t' : padding, "|");
|
|
4195
|
-
}
|
|
4196
|
-
return alignmentRow;
|
|
4178
|
+
var alignIndicator = getAlignmentIndicator(alignment, targetWidth);
|
|
4179
|
+
return "".concat(useTabs ? '\t' : padding).concat(alignIndicator).concat(useTabs ? '\t' : padding);
|
|
4180
|
+
});
|
|
4181
|
+
return "|".concat(formattedColumns.join('|'), "|");
|
|
4197
4182
|
}
|
|
4198
|
-
|
|
4199
|
-
* Generates a complete Markdown table string from the provided data.
|
|
4200
|
-
* @param inputData - The table data including headers and rows.
|
|
4201
|
-
* @param columnAlignments - Alignment settings for each column.
|
|
4202
|
-
* @param canAdjustColumnWidths - Flag to adjust column widths based on content.
|
|
4203
|
-
* @param useTabs - Flag to use tabs between columns.
|
|
4204
|
-
* @param replaceNewlines - Flag to replace newlines with <br> tags.
|
|
4205
|
-
* @param hasPadding - Flag to add padding spaces around cell content.
|
|
4206
|
-
* @returns The complete Markdown table string.
|
|
4207
|
-
*/
|
|
4208
|
-
function generateMarkdownTableString(inputData, columnAlignments, canAdjustColumnWidths, useTabs, replaceNewlines, hasPadding) {
|
|
4209
|
-
if (canAdjustColumnWidths === void 0) { canAdjustColumnWidths = true; }
|
|
4210
|
-
if (useTabs === void 0) { useTabs = false; }
|
|
4211
|
-
if (replaceNewlines === void 0) { replaceNewlines = false; }
|
|
4212
|
-
if (hasPadding === void 0) { hasPadding = true; }
|
|
4183
|
+
function calculateMaxColumnCount(inputData) {
|
|
4213
4184
|
var headerColumnCount = inputData.inputDataHeader.length;
|
|
4214
4185
|
var bodyColumnCounts = inputData.inputDataBody.map(function (currentRow) { return currentRow.length; });
|
|
4215
|
-
|
|
4216
|
-
|
|
4186
|
+
return Math.max.apply(Math, __spreadArray([headerColumnCount], bodyColumnCounts, false));
|
|
4187
|
+
}
|
|
4188
|
+
function getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths) {
|
|
4189
|
+
return canAdjustColumnWidths
|
|
4217
4190
|
? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount)
|
|
4218
4191
|
: undefined;
|
|
4219
|
-
|
|
4220
|
-
|
|
4221
|
-
var
|
|
4192
|
+
}
|
|
4193
|
+
function formatTableRows(inputData, maxColumnCount, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding) {
|
|
4194
|
+
var headerRow = formatMarkdownRow(maxColumnCount, inputData.inputDataHeader, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding);
|
|
4195
|
+
var alignmentRow = formatAlignmentRow(maxColumnCount, columnAlignments, columnWidths, useTabs, hasPadding);
|
|
4196
|
+
var bodyRows = inputData.inputDataBody
|
|
4222
4197
|
.map(function (currentRow) {
|
|
4223
4198
|
return formatMarkdownRow(maxColumnCount, currentRow, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding);
|
|
4224
4199
|
})
|
|
4225
4200
|
.join('\n');
|
|
4226
|
-
return "".concat(
|
|
4201
|
+
return "".concat(headerRow, "\n").concat(alignmentRow, "\n").concat(bodyRows);
|
|
4202
|
+
}
|
|
4203
|
+
function generateMarkdownTableString(inputData, columnAlignments, canAdjustColumnWidths, useTabs, replaceNewlines, hasPadding) {
|
|
4204
|
+
if (canAdjustColumnWidths === void 0) { canAdjustColumnWidths = true; }
|
|
4205
|
+
if (useTabs === void 0) { useTabs = false; }
|
|
4206
|
+
if (replaceNewlines === void 0) { replaceNewlines = false; }
|
|
4207
|
+
if (hasPadding === void 0) { hasPadding = true; }
|
|
4208
|
+
var maxColumnCount = calculateMaxColumnCount(inputData);
|
|
4209
|
+
var columnWidths = getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths);
|
|
4210
|
+
return formatTableRows(inputData, maxColumnCount, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding).trimEnd();
|
|
4227
4211
|
}
|
|
4228
4212
|
/**
|
|
4229
4213
|
* Replaces newline characters in a string with <br> tags.
|