react-markdown-table-ts 0.6.4 → 1.1.0
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 +81 -47
- package/dist/index.cjs.js +131 -14495
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +125 -14470
- package/dist/index.esm.js.map +1 -1
- package/dist/types.d.ts +63 -22
- package/dist/utils.d.ts +4 -31
- package/package.json +1 -3
package/README.md
CHANGED
|
@@ -5,60 +5,94 @@
|
|
|
5
5
|
|
|
6
6
|
[](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts)
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
8
|
+
## Overview
|
|
9
|
+
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.
|
|
10
|
+
|
|
11
|
+
## API
|
|
12
|
+
```typescript
|
|
13
|
+
interface MarkdownTableProps {
|
|
14
|
+
inputData?: string[][] | null;
|
|
15
|
+
columnAlignments?: readonly Alignment[];
|
|
16
|
+
isCompact?: boolean;
|
|
17
|
+
hasPadding?: boolean;
|
|
18
|
+
hasTabs?: boolean;
|
|
19
|
+
hasHeader?: boolean;
|
|
20
|
+
convertLineBreaks?: boolean;
|
|
21
|
+
theme?: 'light' | 'dark';
|
|
22
|
+
className?: string;
|
|
23
|
+
preStyle?: React.CSSProperties;
|
|
24
|
+
onGenerate?: (markdownTableString: string) => void;
|
|
25
|
+
}
|
|
26
26
|
```
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
| Prop | Type | Default | Description |
|
|
28
|
+
|----------------------|-----------------------------------------|-------------|------------------------------------------------------------------------------------|
|
|
29
|
+
| `inputData` | `string[][] \| null` | `null` | The outer array represents rows. The inner arrays represent cells within each row. |
|
|
30
|
+
| `columnAlignments` | `readonly Alignment[]` | `[]` | Acceptable values are 'left', 'center', 'right', or 'none'. |
|
|
31
|
+
| `isCompact` | `boolean` | `false` | Disables column width alignment to provide a more compact markdown table string. |
|
|
32
|
+
| `hasPadding` | `boolean` | `true` | One space added before and after the content in each cell. |
|
|
33
|
+
| `hasTabs` | `boolean` | `false` | Adds a tab character after each \| and before the content. |
|
|
34
|
+
| `hasHeader` | `boolean` | `true` | Indicates whether the first row of `data` is a header. |
|
|
35
|
+
| `convertLineBreaks` | `boolean` | `false` | Replace newlines with <br> tags in table cells. |
|
|
36
|
+
| `theme` | `'light' \| 'dark'` | `light` | Controls the color scheme of the <pre> element display. |
|
|
37
|
+
| `className` | `string` | `undefined` | Class will be applied to the <pre> element display. |
|
|
38
|
+
| `preStyle` | `React.CSSProperties` | `undefined` | Allows direct styling of the display with CSS properties. |
|
|
39
|
+
| `onGenerate` | `(markdownTableString: string) => void` | `undefined` | Callback to receive the generated Markdown table string. |
|
|
40
|
+
## Usage Patterns
|
|
41
|
+
|
|
42
|
+
1. **Basic Table Generation**:
|
|
43
|
+
```typescript
|
|
44
|
+
<MarkdownTable
|
|
45
|
+
inputData={[
|
|
46
|
+
["Header 1", "Header 2"],
|
|
47
|
+
["Row 1 Col 1", "Row 1 Col 2"]
|
|
48
|
+
]}
|
|
49
|
+
/>
|
|
50
|
+
```
|
|
51
|
+
2. **Column Alignment**:
|
|
52
|
+
```typescript
|
|
53
|
+
<MarkdownTable
|
|
54
|
+
inputData={data}
|
|
55
|
+
columnAlignments={['left', 'center', 'right']}
|
|
56
|
+
/>
|
|
57
|
+
```
|
|
58
|
+
3. **Auto-Generated Headers**:
|
|
59
|
+
```typescript
|
|
60
|
+
<MarkdownTable
|
|
61
|
+
inputData={data}
|
|
62
|
+
hasHeader={false} // Will generate A, B, C... headers
|
|
63
|
+
/>
|
|
30
64
|
```
|
|
31
65
|
|
|
32
|
-
##
|
|
66
|
+
## Key Behaviors to Remember
|
|
33
67
|
|
|
34
|
-
|
|
68
|
+
1. **Input Validation**:
|
|
69
|
+
- Input must be non-null 2D string array
|
|
70
|
+
- All rows should contain string values
|
|
71
|
+
- Empty arrays are not allowed
|
|
72
|
+
- Column alignments must be valid ('left', 'center', 'right', 'none')
|
|
35
73
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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 |
|
|
74
|
+
2. **Column Width Handling**:
|
|
75
|
+
- Default: Adjusts columns to fit content
|
|
76
|
+
- `isCompact={true}`: Minimizes column widths
|
|
77
|
+
- Maintains minimum width of 3 characters for alignment indicators
|
|
46
78
|
|
|
47
|
-
|
|
79
|
+
3. **Error Handling**:
|
|
80
|
+
- Returns error message string if validation fails
|
|
81
|
+
- Wraps errors in `MarkdownTableError` class
|
|
82
|
+
- Preserves stack traces for debugging
|
|
48
83
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
84
|
+
4. **Styling**:
|
|
85
|
+
- Uses Prism.js for syntax highlighting
|
|
86
|
+
- Supports light/dark themes
|
|
87
|
+
- Custom styles via `className` and `preStyle` props
|
|
52
88
|
|
|
53
|
-
|
|
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
|
-
];
|
|
89
|
+
## Common Transformations
|
|
59
90
|
|
|
60
|
-
|
|
61
|
-
|
|
91
|
+
1. **Data Formatting**:
|
|
92
|
+
- Newlines can be converted to `<br>` tags with `canReplaceNewlines`
|
|
93
|
+
- Padding can be controlled with `hasPadding`
|
|
94
|
+
- Tab spacing available with `hasTabs`
|
|
62
95
|
|
|
63
|
-
|
|
64
|
-
|
|
96
|
+
2. **Header Generation**:
|
|
97
|
+
- Auto-generates A, B, C... headers when `hasHeader={false}`
|
|
98
|
+
- Supports custom headers via first row when `hasHeader={true}`
|