-
+ |
Kine
|
@@ -71,7 +167,9 @@ exports[` when receives a table block renders a tag 1`] = `
-
+ |
Pigs
|
@@ -82,7 +180,9 @@ exports[` when receives a table block renders a tag 1`] = `
-
+ |
Chickens
|
@@ -95,15 +195,17 @@ exports[` when receives a table block renders a tag 1`] = `
-
+ |
Total
|
-
+ |
16 pcs
-
- |
+
+ |
$450
-
+ |
@@ -116,20 +218,28 @@ exports[` when receives a table block without footer renders a
-
+ |
Name
|
-
+ |
Qtd
|
-
+ |
Price
|
-
+ |
Kine
|
@@ -140,7 +250,9 @@ exports[` when receives a table block without footer renders a
-
+ |
Pigs
|
@@ -151,7 +263,9 @@ exports[` when receives a table block without footer renders a
-
+ |
Chickens
|
diff --git a/src/renderers/table/index.test.tsx b/src/renderers/table/index.test.tsx
index 201ca59..ed1ee95 100644
--- a/src/renderers/table/index.test.tsx
+++ b/src/renderers/table/index.test.tsx
@@ -49,4 +49,24 @@ describe('', () => {
expect(create().toJSON()).toMatchSnapshot();
});
});
+
+ describe('when receives a table 2.20 format', () => {
+ describe.each([
+ [true, 'renders a tag without or '],
+ [false, 'renders a tag without , or '],
+ ])('withHeadings = %p', (withHeadings, display) => {
+ const data: TableBlockData = {
+ withHeadings,
+ content: [
+ ['Kine', 'Pigs', 'Chicken'],
+ ['1 pcs', '3 pcs', '12 pcs'],
+ ['100$', '200$', '150$'],
+ ],
+ };
+
+ it(display, () => {
+ expect(create().toJSON()).toMatchSnapshot();
+ });
+ });
+ });
});
diff --git a/src/renderers/table/index.tsx b/src/renderers/table/index.tsx
index 5482ab3..ebce129 100644
--- a/src/renderers/table/index.tsx
+++ b/src/renderers/table/index.tsx
@@ -1,14 +1,49 @@
-import React from 'react';
+import React, { FC } from 'react';
import HTMLReactParser from 'html-react-parser';
import { RenderFn } from '../..';
+type Row = string[];
+type Content = Row[];
+
export interface TableBlockData {
- content: string[][];
+ content: Content;
+ withHeadings?: boolean;
header?: string[];
footer?: string[];
caption?: string;
}
+const THead: FC<{
+ row: Row;
+}> = ({ row }) => (
+
+
+ {row?.map((cell, i) => (
+
+ {HTMLReactParser(cell)}
+ |
+ ))}
+
+
+);
+
+const Tr: FC<{
+ row: Row;
+ withHeadings: boolean;
+}> = ({ row, withHeadings }) => (
+
+ {row.map((cell, i) =>
+ i === 0 && withHeadings ? (
+
+ {HTMLReactParser(cell)}
+ |
+ ) : (
+ {HTMLReactParser(cell)} |
+ ),
+ )}
+
+);
+
const Table: RenderFn = ({ data, className = '' }) => {
const tableprops: {
[s: string]: string;
@@ -18,35 +53,24 @@ const Table: RenderFn = ({ data, className = '' }) => {
tableprops.className = className;
}
+ const content = data?.withHeadings ? data?.content.slice(1) : data?.content;
+ const header = data?.withHeadings ? data?.content[0] : data?.header;
+ const withRowHeadings = !!data?.header;
+
return (
- {data?.caption && {HTMLReactParser(data.caption)}}
- {data?.header && (
-
-
- {data.header.map((cell, i) => (
- {HTMLReactParser(cell)} |
- ))}
-
-
- )}
+ <>
+ {data?.caption && {HTMLReactParser(data.caption)}}
+ {header && }
+ >
- {data?.content.map((row, i) => (
-
- {row.map((cell, j) => {
- const Tag = `t${j === 0 ? 'h' : 'd'}` as keyof JSX.IntrinsicElements;
- return {HTMLReactParser(cell)};
- })}
-
+ {content?.map((row, i) => (
+
))}
{data?.footer && (
-
- {data?.footer.map((cell, i) => (
- {HTMLReactParser(cell)} |
- ))}
-
+
)}
| | | | | |