react-markdown-table-ts 0.5.7 → 0.5.9
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 +65 -65
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
# ⚛️ react-markdown-table-ts 🛡️
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/react-markdown-table-ts)
|
|
4
|
-
|
|
5
|
-
[](https://codecov.io/gh/keithwalsh/react-markdown-table-ts)
|
|
6
|
-
[](https://packagequality.com/#?package=react-markdown-table-ts)
|
|
7
|
-
[](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts)
|
|
8
|
-
|
|
9
|
-
A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.
|
|
10
|
-
|
|
11
|
-
## ✨ Features
|
|
12
|
-
|
|
13
|
-
- **Type Safety:** Built with TypeScript to provide strong type guarantees.
|
|
14
|
-
- **Easy Integration:** Simple API for converting data arrays into Markdown table strings.
|
|
15
|
-
- **Customizable Alignments:** Specify column alignments (left, center, right, or none) with ease.
|
|
16
|
-
- **Compact Mode:** Option to generate compact tables with minimal padding.
|
|
17
|
-
- **Tab-Separated Columns:** Option to add tabs between columns.
|
|
18
|
-
- **Newline Handling: Option** to replace newlines in cells with HTML line breaks.
|
|
19
|
-
- **Raw Markdown Access:** Retrieve the generated Markdown string for further processing or usage.
|
|
20
|
-
- **Header Options:** Choose whether to include a header row or use default alphabetical headers.
|
|
21
|
-
- **Flexible Styling:** Apply custom CSS classes for styling the rendered Markdown.
|
|
22
|
-
|
|
23
|
-
## 📦 Installation
|
|
24
|
-
|
|
25
|
-
Install the package via npm:
|
|
26
|
-
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
npm install react-markdown-table-ts
|
|
30
|
-
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## 🔧 API
|
|
34
|
-
|
|
35
|
-
### MarkdownTable Props
|
|
36
|
-
|
|
37
|
-
| Prop | Type | Default | Description |
|
|
38
|
-
| :------------------: | :-------------------------------------------: | :---------: | :-----------------------------------------: |
|
|
39
|
-
| `data` | `string[][]` | `null` | The table data as a 2D array of strings |
|
|
40
|
-
| `columnAlignments` | `('left' \| 'center' \| 'right' \| 'none')[]` | `[]` | Alignment for each column |
|
|
41
|
-
| `isCompact` | `boolean` | `false` | Use minimal column widths |
|
|
42
|
-
| `className` | `string` | `undefined` | CSS class for the `<pre>` tag |
|
|
43
|
-
| `hasTabs` | `boolean` | `false` | Add tabs between table columns |
|
|
44
|
-
| `canReplaceNewlines` | `boolean` | `false` | Replace newlines in cells with `<br>` tags |
|
|
45
|
-
| `onTableCreate` | `(markdownString: string) => void` | `undefined` | Callback to receive the Markdown string |
|
|
46
|
-
| `hasHeader` | `boolean` | `true` | Whether the first row of `data` is a header |
|
|
47
|
-
|
|
48
|
-
## 🚀 Usage
|
|
49
|
-
|
|
50
|
-
```jsx
|
|
51
|
-
import React from 'react';
|
|
52
|
-
import {MarkdownTable} from 'markdown-table-component';
|
|
53
|
-
|
|
54
|
-
const App = () => {
|
|
55
|
-
const data = [
|
|
56
|
-
['Header 1', 'Header 2', 'Header 3'],
|
|
57
|
-
['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
|
|
58
|
-
['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
|
|
59
|
-
];
|
|
60
|
-
|
|
61
|
-
return <MarkdownTable data={data} />;
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
export default App;
|
|
65
|
-
```
|
|
1
|
+
# ⚛️ react-markdown-table-ts 🛡️
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/react-markdown-table-ts)
|
|
4
|
+
|
|
5
|
+
[](https://codecov.io/gh/keithwalsh/react-markdown-table-ts)
|
|
6
|
+
[](https://packagequality.com/#?package=react-markdown-table-ts)
|
|
7
|
+
[](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts)
|
|
8
|
+
|
|
9
|
+
A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.
|
|
10
|
+
|
|
11
|
+
## ✨ Features
|
|
12
|
+
|
|
13
|
+
- **Type Safety:** Built with TypeScript to provide strong type guarantees.
|
|
14
|
+
- **Easy Integration:** Simple API for converting data arrays into Markdown table strings.
|
|
15
|
+
- **Customizable Alignments:** Specify column alignments (left, center, right, or none) with ease.
|
|
16
|
+
- **Compact Mode:** Option to generate compact tables with minimal padding.
|
|
17
|
+
- **Tab-Separated Columns:** Option to add tabs between columns.
|
|
18
|
+
- **Newline Handling: Option** to replace newlines in cells with HTML line breaks.
|
|
19
|
+
- **Raw Markdown Access:** Retrieve the generated Markdown string for further processing or usage.
|
|
20
|
+
- **Header Options:** Choose whether to include a header row or use default alphabetical headers.
|
|
21
|
+
- **Flexible Styling:** Apply custom CSS classes for styling the rendered Markdown.
|
|
22
|
+
|
|
23
|
+
## 📦 Installation
|
|
24
|
+
|
|
25
|
+
Install the package via npm:
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
npm install react-markdown-table-ts
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## 🔧 API
|
|
34
|
+
|
|
35
|
+
### MarkdownTable Props
|
|
36
|
+
|
|
37
|
+
| Prop | Type | Default | Description |
|
|
38
|
+
| :------------------: | :-------------------------------------------: | :---------: | :-----------------------------------------: |
|
|
39
|
+
| `data` | `string[][]` | `null` | The table data as a 2D array of strings |
|
|
40
|
+
| `columnAlignments` | `('left' \| 'center' \| 'right' \| 'none')[]` | `[]` | Alignment for each column |
|
|
41
|
+
| `isCompact` | `boolean` | `false` | Use minimal column widths |
|
|
42
|
+
| `className` | `string` | `undefined` | CSS class for the `<pre>` tag |
|
|
43
|
+
| `hasTabs` | `boolean` | `false` | Add tabs between table columns |
|
|
44
|
+
| `canReplaceNewlines` | `boolean` | `false` | Replace newlines in cells with `<br>` tags |
|
|
45
|
+
| `onTableCreate` | `(markdownString: string) => void` | `undefined` | Callback to receive the Markdown string |
|
|
46
|
+
| `hasHeader` | `boolean` | `true` | Whether the first row of `data` is a header |
|
|
47
|
+
|
|
48
|
+
## 🚀 Usage
|
|
49
|
+
|
|
50
|
+
```jsx
|
|
51
|
+
import React from 'react';
|
|
52
|
+
import {MarkdownTable} from 'markdown-table-component';
|
|
53
|
+
|
|
54
|
+
const App = () => {
|
|
55
|
+
const data = [
|
|
56
|
+
['Header 1', 'Header 2', 'Header 3'],
|
|
57
|
+
['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
|
|
58
|
+
['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
|
|
59
|
+
];
|
|
60
|
+
|
|
61
|
+
return <MarkdownTable data={data} />;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
export default App;
|
|
65
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-markdown-table-ts",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.9",
|
|
4
4
|
"description": "A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|