react-markdown-table-ts 1.2.2 → 1.3.1
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 +19 -10
- package/package.json +58 -66
- package/dist/cellFormatter.d.ts +0 -9
- package/dist/index.cjs.js +0 -4331
- package/dist/index.cjs.js.map +0 -1
- package/dist/index.d.ts +0 -6
- package/dist/index.esm.js +0 -4323
- package/dist/index.esm.js.map +0 -1
- package/dist/types.d.ts +0 -144
- package/dist/utils.d.ts +0 -10
- package/dist/validation.d.ts +0 -19
package/README.md
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
# ⚛️ react-markdown-table-ts 🛡️
|
|
2
2
|
|
|
3
|
+
|
|
3
4
|
[](https://www.npmjs.com/package/react-markdown-table-ts)
|
|
4
5
|
[](https://codecov.io/gh/keithwalsh/react-markdown-table-ts)
|
|
5
|
-
|
|
6
6
|
[](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts)
|
|
7
|
-
[](https://www.codefactor.io/repository/github/keithwalsh/react-markdown-table-ts)
|
|
8
|
+
|
|
8
9
|
|
|
9
10
|
|  |  |
|
|
10
11
|
|------------------------------------------|-----------------------------------------|
|
|
11
12
|
| `'light'` theme | `'dark'` theme |
|
|
12
13
|
|
|
13
14
|
## Overview
|
|
14
|
-
|
|
15
|
+
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.
|
|
15
16
|
|
|
16
17
|
## API
|
|
17
18
|
```typescript
|
|
@@ -28,23 +29,25 @@ interface MarkdownTableProps {
|
|
|
28
29
|
className?: string;
|
|
29
30
|
preStyle?: React.CSSProperties;
|
|
30
31
|
minWidth?: number;
|
|
32
|
+
showLineNumbers?: boolean;
|
|
31
33
|
onGenerate?: (markdownTableString: string) => void;
|
|
32
34
|
}
|
|
33
35
|
```
|
|
34
36
|
| Prop | Type | Default | Description |
|
|
35
37
|
|----------------------|-----------------------------------------|-------------|------------------------------------------------------------------------------------|
|
|
36
38
|
| `inputData` | `string[][] \| null` | `null` | The outer array represents rows. The inner array represent cells within each row. |
|
|
37
|
-
| `columnAlignments` | `readonly Alignment[]` | `[]` | Acceptable values are 'left', 'center', 'right',
|
|
39
|
+
| `columnAlignments` | `readonly Alignment[]` | `[]` | Acceptable values are 'left', 'center', 'right', or 'none'. Defaults to 'none' when unspecified. |
|
|
38
40
|
| `isCompact` | `boolean` | `false` | Disables column width alignment to provide a more compact markdown table string. |
|
|
39
41
|
| `hasPadding` | `boolean` | `true` | One space added before and after the content in each cell. |
|
|
40
42
|
| `hasTabs` | `boolean` | `false` | Adds a tab character after each \| and before the content. |
|
|
41
43
|
| `hasHeader` | `boolean` | `true` | Indicates whether the first row of `data` is a header. |
|
|
42
44
|
| `convertLineBreaks` | `boolean` | `false` | Replace newlines with <br> tags in table cells. |
|
|
43
45
|
| `topPadding` | `number` | `16` | Controls the padding-top (in pixels) of the \<pre\> element display. |
|
|
44
|
-
| `theme` | `'light' \| 'dark'` | `light` | Controls the
|
|
46
|
+
| `theme` | `'light' \| 'dark'` | `light` | Controls the colour scheme of the \<pre\> element display. |
|
|
45
47
|
| `className` | `string` | `undefined` | Class will be applied to the \<pre\> element display. |
|
|
46
48
|
| `preStyle` | `React.CSSProperties` | `undefined` | Allows direct styling of the display with CSS properties. |
|
|
47
49
|
| `minWidth` | `number` | `undefined` | Optional minimum width in pixels for the table container. |
|
|
50
|
+
| `showLineNumbers` | `boolean` | `true` | Show or hide line numbers in the Prism syntax highlighting. |
|
|
48
51
|
| `onGenerate` | `(markdownTableString: string) => void` | `undefined` | Callback to receive the generated Markdown table string. |
|
|
49
52
|
## Usage Patterns
|
|
50
53
|
|
|
@@ -61,7 +64,7 @@ interface MarkdownTableProps {
|
|
|
61
64
|
```typescript
|
|
62
65
|
<MarkdownTable
|
|
63
66
|
inputData={data}
|
|
64
|
-
columnAlignments={['left', 'center', 'right'
|
|
67
|
+
columnAlignments={['left', 'center', 'right']}
|
|
65
68
|
/>
|
|
66
69
|
```
|
|
67
70
|
3. **Auto-Generated Headers**:
|
|
@@ -78,20 +81,26 @@ interface MarkdownTableProps {
|
|
|
78
81
|
minWidth={500} // Sets the minimum width of the table container to 500 pixels
|
|
79
82
|
/>
|
|
80
83
|
```
|
|
84
|
+
5. **Hiding Line Numbers**:
|
|
85
|
+
```typescript
|
|
86
|
+
<MarkdownTable
|
|
87
|
+
inputData={data}
|
|
88
|
+
showLineNumbers={false} // Hides line numbers in the code block
|
|
89
|
+
/>
|
|
90
|
+
```
|
|
81
91
|
|
|
82
|
-
##
|
|
92
|
+
## Behaviours
|
|
83
93
|
|
|
84
94
|
1. **Input Validation**:
|
|
85
95
|
- Input must be non-null 2D string array
|
|
86
96
|
- All rows should contain string values
|
|
87
97
|
- Empty arrays are not allowed
|
|
88
|
-
- Column alignments must be valid ('left', 'center', 'right', '
|
|
98
|
+
- Column alignments must be valid ('left', 'center', 'right', 'none')
|
|
89
99
|
|
|
90
100
|
2. **Column Width Handling**:
|
|
91
101
|
- Default: Adjusts columns to fit content with 'none' alignment
|
|
92
102
|
- `isCompact={true}`: Minimizes column widths
|
|
93
103
|
- Maintains minimum width of 3 characters for alignment indicators
|
|
94
|
-
- 'justify' alignment behaves same as 'none' for markdown compatibility
|
|
95
104
|
|
|
96
105
|
3. **Error Handling**:
|
|
97
106
|
- Returns error message string if validation fails
|
|
@@ -106,7 +115,7 @@ interface MarkdownTableProps {
|
|
|
106
115
|
## Common Transformations
|
|
107
116
|
|
|
108
117
|
1. **Data Formatting**:
|
|
109
|
-
- Newlines can be converted to `<br>` tags with `
|
|
118
|
+
- Newlines can be converted to `<br>` tags with `convertLineBreaks`
|
|
110
119
|
- Padding can be controlled with `hasPadding`
|
|
111
120
|
- Tab spacing available with `hasTabs`
|
|
112
121
|
|
package/package.json
CHANGED
|
@@ -1,88 +1,80 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-markdown-table-ts",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"description": "A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.",
|
|
5
|
-
"main": "dist/index.cjs.js",
|
|
6
|
-
"module": "dist/index.esm.js",
|
|
7
|
-
"types": "dist/index.d.ts",
|
|
8
|
-
"files": [
|
|
9
|
-
"dist"
|
|
10
|
-
],
|
|
11
|
-
"scripts": {
|
|
12
|
-
"build": "rollup -c",
|
|
13
|
-
"type-check": "tsc --noEmit",
|
|
14
|
-
"prepublishOnly": "npm run build",
|
|
15
|
-
"prepare": "npm run build",
|
|
16
|
-
"lint": "gts lint",
|
|
17
|
-
"clean": "gts clean",
|
|
18
|
-
"compile": "tsc",
|
|
19
|
-
"fix": "gts fix",
|
|
20
|
-
"pretest": "npm run compile",
|
|
21
|
-
"posttest": "npm run lint",
|
|
22
|
-
"test": "jest --config jest.config.js --coverage",
|
|
23
|
-
"test:watch": "jest --config jest.config.js --watch",
|
|
24
|
-
"test:ci": "jest --config jest.config.js --coverage --ci",
|
|
25
|
-
"release": "standard-version",
|
|
26
|
-
"storybook": "storybook dev -p 6006",
|
|
27
|
-
"build-storybook": "storybook build",
|
|
28
|
-
"chromatic": "npx chromatic --project-token=chpt_f61460f108c0eb8"
|
|
29
|
-
},
|
|
30
5
|
"keywords": [
|
|
31
6
|
"markdown",
|
|
32
7
|
"md",
|
|
33
8
|
"table",
|
|
34
9
|
"tables",
|
|
35
10
|
"react",
|
|
36
|
-
"ts",
|
|
37
|
-
"typescript",
|
|
38
|
-
"types",
|
|
39
|
-
"typed",
|
|
40
11
|
"generate",
|
|
41
12
|
"generator",
|
|
42
13
|
"convert",
|
|
43
14
|
"converter"
|
|
44
15
|
],
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
16
|
+
"type": "module",
|
|
17
|
+
"main": "./dist/index.cjs",
|
|
18
|
+
"module": "./dist/index.mjs",
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"import": {
|
|
23
|
+
"types": "./dist/index.d.ts",
|
|
24
|
+
"default": "./dist/index.mjs"
|
|
25
|
+
},
|
|
26
|
+
"require": {
|
|
27
|
+
"types": "./dist/index.d.ts",
|
|
28
|
+
"default": "./dist/index.cjs"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"files": [
|
|
33
|
+
"dist"
|
|
34
|
+
],
|
|
35
|
+
"sideEffects": false,
|
|
36
|
+
"repository": {
|
|
37
|
+
"type": "git",
|
|
38
|
+
"url": "git+https://github.com/keithwalsh/react-markdown-table-ts.git"
|
|
39
|
+
},
|
|
40
|
+
"homepage": "https://github.com/keithwalsh/react-markdown-table-ts#readme",
|
|
41
|
+
"bugs": {
|
|
42
|
+
"url": "https://github.com/keithwalsh/react-markdown-table-ts/issues"
|
|
43
|
+
},
|
|
44
|
+
"scripts": {
|
|
45
|
+
"dev": "vite",
|
|
46
|
+
"build": "tsc -p tsconfig.build.json && vite build",
|
|
47
|
+
"preview": "vite preview",
|
|
48
|
+
"test": "jest",
|
|
49
|
+
"test:watch": "jest --watch",
|
|
50
|
+
"test:coverage": "jest --coverage",
|
|
51
|
+
"storybook": "storybook dev -p 6006",
|
|
52
|
+
"build-storybook": "storybook build"
|
|
53
|
+
},
|
|
48
54
|
"peerDependencies": {
|
|
49
|
-
"react": "
|
|
50
|
-
"react-dom": "
|
|
55
|
+
"react": ">=18.0.0",
|
|
56
|
+
"react-dom": ">=18.0.0"
|
|
57
|
+
},
|
|
58
|
+
"dependencies": {
|
|
59
|
+
"prismjs": "^1.30.0",
|
|
60
|
+
"react": "^19.1.1",
|
|
61
|
+
"react-dom": "^19.1.1"
|
|
51
62
|
},
|
|
52
63
|
"devDependencies": {
|
|
53
|
-
"@
|
|
54
|
-
"@
|
|
55
|
-
"@
|
|
56
|
-
"@
|
|
57
|
-
"@
|
|
58
|
-
"@
|
|
59
|
-
"@
|
|
60
|
-
"@
|
|
61
|
-
"@
|
|
62
|
-
"@storybook/test": "^8.4.5",
|
|
63
|
-
"@testing-library/jest-dom": "^6.5.0",
|
|
64
|
-
"@testing-library/react": "^16.0.1",
|
|
65
|
-
"@types/jest": "^29.5.13",
|
|
66
|
-
"@types/node": "20.12.7",
|
|
67
|
-
"@types/prismjs": "^1.26.4",
|
|
68
|
-
"@types/react": "^18.3.8",
|
|
69
|
-
"@types/react-dom": "^18.3.0",
|
|
70
|
-
"chromatic": "^11.20.0",
|
|
71
|
-
"eslint-plugin-storybook": "^0.11.1",
|
|
72
|
-
"gts": "^5.3.1",
|
|
73
|
-
"identity-obj-proxy": "^3.0.0",
|
|
64
|
+
"@storybook/react-vite": "^9.1.10",
|
|
65
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
66
|
+
"@testing-library/react": "^16.3.0",
|
|
67
|
+
"@types/jest": "^29.5.14",
|
|
68
|
+
"@types/node": "^24.6.0",
|
|
69
|
+
"@types/prismjs": "^1.26.5",
|
|
70
|
+
"@types/react": "^19.1.16",
|
|
71
|
+
"@types/react-dom": "^19.1.9",
|
|
72
|
+
"@vitejs/plugin-react-swc": "^4.1.0",
|
|
74
73
|
"jest": "^29.7.0",
|
|
75
74
|
"jest-environment-jsdom": "^29.7.0",
|
|
76
|
-
"
|
|
77
|
-
"react-dom": "^18.2.0",
|
|
78
|
-
"rollup": "^2.79.1",
|
|
79
|
-
"rollup-plugin-typescript2": "^0.36.0",
|
|
80
|
-
"standard-version": "^9.5.0",
|
|
81
|
-
"storybook": "^8.4.5",
|
|
75
|
+
"storybook": "^9.1.10",
|
|
82
76
|
"ts-jest": "^29.2.5",
|
|
83
|
-
"typescript": "
|
|
84
|
-
|
|
85
|
-
"dependencies": {
|
|
86
|
-
"prismjs": "^1.29.0"
|
|
77
|
+
"typescript": "~5.9.3",
|
|
78
|
+
"vite": "^7.1.7"
|
|
87
79
|
}
|
|
88
80
|
}
|
package/dist/cellFormatter.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { CellData } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Formats cell content with markdown syntax based on CellData formatting options
|
|
4
|
-
*/
|
|
5
|
-
export declare function formatCellContent(cell: string | CellData): string;
|
|
6
|
-
/**
|
|
7
|
-
* Gets the alignment for a cell, prioritizing cell-specific alignment over column alignment
|
|
8
|
-
*/
|
|
9
|
-
export declare function getCellAlignment(cell: string | CellData, columnAlignment?: string): string;
|