react-markdown-table-ts 0.6.1 → 0.6.3
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 +26 -34
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +26 -34
- package/dist/index.esm.js.map +1 -1
- package/dist/utils.d.ts +0 -9
- 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,43 +4157,28 @@ 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
4183
|
function calculateMaxColumnCount(inputData) {
|
|
4199
4184
|
var headerColumnCount = inputData.inputDataHeader.length;
|
|
@@ -4205,15 +4190,22 @@ function getColumnWidths(inputData, maxColumnCount, canAdjustColumnWidths) {
|
|
|
4205
4190
|
? calculateColumnWidths(__spreadArray([inputData.inputDataHeader], inputData.inputDataBody, true), maxColumnCount)
|
|
4206
4191
|
: undefined;
|
|
4207
4192
|
}
|
|
4208
|
-
function
|
|
4193
|
+
function formatHeaderAndAlignment(inputData, maxColumnCount, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding) {
|
|
4209
4194
|
var headerRow = formatMarkdownRow(maxColumnCount, inputData.inputDataHeader, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding);
|
|
4210
4195
|
var alignmentRow = formatAlignmentRow(maxColumnCount, columnAlignments, columnWidths, useTabs, hasPadding);
|
|
4211
|
-
|
|
4196
|
+
return "".concat(headerRow, "\n").concat(alignmentRow);
|
|
4197
|
+
}
|
|
4198
|
+
function formatBodyRows(inputData, maxColumnCount, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding) {
|
|
4199
|
+
return inputData.inputDataBody
|
|
4212
4200
|
.map(function (currentRow) {
|
|
4213
4201
|
return formatMarkdownRow(maxColumnCount, currentRow, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding);
|
|
4214
4202
|
})
|
|
4215
4203
|
.join('\n');
|
|
4216
|
-
|
|
4204
|
+
}
|
|
4205
|
+
function formatTableRows(inputData, maxColumnCount, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding) {
|
|
4206
|
+
var headerAndAlignment = formatHeaderAndAlignment(inputData, maxColumnCount, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding);
|
|
4207
|
+
var bodyRows = formatBodyRows(inputData, maxColumnCount, columnAlignments, columnWidths, useTabs, replaceNewlines, hasPadding);
|
|
4208
|
+
return "".concat(headerAndAlignment, "\n").concat(bodyRows);
|
|
4217
4209
|
}
|
|
4218
4210
|
function generateMarkdownTableString(inputData, columnAlignments, canAdjustColumnWidths, useTabs, replaceNewlines, hasPadding) {
|
|
4219
4211
|
if (canAdjustColumnWidths === void 0) { canAdjustColumnWidths = true; }
|