♻️(front) improve table pdf rendering

The previous way of rendering table was causing issues when tables could not fit on one page. I then came accross this discussion diegomura/react-pdf#2343. The author created a lib to improve the rendering of table, it's better, but still not perfect maybe.
suitenumerique · Feb 14, 2025 · b38b5d7 · b38b5d7
1 parent 5cc4b07
commit b38b5d7
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 6 deletions.
diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json
@@ -15,6 +15,7 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@ag-media/react-pdf-table": "2.0.1",
     "@blocknote/core": "0.23.2",
     "@blocknote/mantine": "0.23.2",
     "@blocknote/react": "0.23.2",

diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
@@ -27,6 +27,8 @@ import { Doc } from '@/features/docs/doc-management';
 import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
 import { downloadFile, exportResolveFileUrl } from '../utils';
 
+import { Table } from './blocks/Table';
+
 enum DocDownloadFormat {
   PDF = 'pdf',
   DOCX = 'docx',
@@ -151,6 +153,9 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
                 </Text>
               );
             },
+            table: (block, t) => {
+              return <Table data={block.content} transformer={t} />;
+            },
           },
         },
         {

diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/blocks/Table.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/blocks/Table.tsx
@@ -0,0 +1,95 @@
+import {
+  Exporter,
+  InlineContentSchema,
+  StyleSchema,
+  TableContent,
+} from '@blocknote/core';
+import { StyleSheet, View } from '@react-pdf/renderer';
+const PIXELS_PER_POINT = 0.75;
+import { TD, TH, TR, Table as TablePDF } from '@ag-media/react-pdf-table';
+
+// ( impossible?) to make tables with flex that don't have a fixed / 100% width?
+// we'd need to measure the width of every column manually
+const styles = StyleSheet.create({
+  tableContainer: {
+    // width: "100%",
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    // width: "100%",
+    // justifyContent: "space-between",
+    display: 'flex',
+    height: 200,
+  },
+  cell: {
+    paddingHorizontal: 5 * PIXELS_PER_POINT,
+    paddingTop: 3 * PIXELS_PER_POINT,
+    // paddingBottom: 1 * PIXELS_PER_POINT, should be 3px but looks odd, better with no padding Bottom
+    borderLeft: '1px solid #ddd',
+    borderTop: '1px solid #ddd',
+    wordWrap: 'break-word',
+    whiteSpace: 'pre-wrap',
+    height: 200,
+  },
+  bottomCell: {
+    borderBottom: '1px solid #ddd',
+  },
+  rightCell: {
+    borderRight: '1px solid #ddd',
+  },
+});
+
+export const Table = (props: {
+  data: TableContent<InlineContentSchema>;
+  transformer: Exporter<
+    unknown,
+    InlineContentSchema,
+    StyleSchema,
+    unknown,
+    unknown,
+    unknown,
+    unknown
+  >;
+}) => {
+  console.log('TABLE LA', props);
+  return (
+    <TablePDF>
+      {props.data.rows.map((row, index) => {
+        if (index === 0) {
+          return (
+            <TH key={index}>
+              {row.cells.map((cell, index) => {
+                console.log(
+                  'HEADER',
+                  props.transformer.transformInlineContent(cell),
+                );
+                return (
+                  <TD key={index}>
+                    {props.transformer.transformInlineContent(cell)}
+                  </TD>
+                );
+              })}
+            </TH>
+          );
+        }
+        return (
+          <TR key={index}>
+            {row.cells.map((cell, index) => {
+              console.log(
+                'CELL',
+                cell,
+                props.transformer.transformInlineContent(cell),
+              );
+              return (
+                <TD key={index}>
+                  <View>{props.transformer.transformInlineContent(cell)}</View>
+                </TD>
+              );
+            })}
+          </TR>
+        );
+      })}
+    </TablePDF>
+  );
+};
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.4.1.tgz#2447a230bfe072c1659e6815129c03cf170710e3"
   integrity sha512-12WGKBQzjUAI4ayyF4IAtfw2QR/IDoqk6jTddXDhtYTJF9ASmoE1zst7cVtP0aL/F1jUJL5r+JxKXKEgHNbEUQ==
 
+"@ag-media/react-pdf-table@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@ag-media/react-pdf-table/-/react-pdf-table-2.0.1.tgz#609e51992faed54bcf379a376442997c6bac53cc"
+  integrity sha512-UMNdGYAfuI6L1wLRziYmwcp/8I2JgbwX+PY7bHXGb2+P6MwgFJH8W71qZO1bxfxrmVUTP8YblQwl1PkXG2m6Rg==
+
 "@ampproject/remapping@^2.2.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
@@ -5081,7 +5086,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*", "@types/node@22.13.1", "@types/node@^22.7.5":
+"@types/node@*", "@types/node@^22.7.5":
   version "22.13.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-22.13.1.tgz#a2a3fefbdeb7ba6b89f40371842162fac0934f33"
   integrity sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==
@@ -5143,7 +5148,7 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react-dom@*", "@types/[email protected]":
+"@types/react-dom@*":
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.1.tgz#1e4654c08a9cdcfb6594c780ac59b55aad42fe07"
   integrity sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==
@@ -5288,7 +5293,7 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@*", "@typescript-eslint/eslint-plugin@8.23.0", "@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+"@typescript-eslint/eslint-plugin@*", "@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
   version "8.23.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.23.0.tgz#7745f4e3e4a7ae5f6f73fefcd856fd6a074189b7"
   integrity sha512-vBz65tJgRrA1Q5gWlRfvoH+w943dq9K1p1yDBY2pc+a1nbBLZp7fB9+Hk8DaALUbzjqlMfgaqlVPT1REJdkt/w==
@@ -5303,7 +5308,7 @@
     natural-compare "^1.4.0"
     ts-api-utils "^2.0.1"
 
-"@typescript-eslint/parser@*", "@typescript-eslint/parser@8.23.0", "@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+"@typescript-eslint/parser@*", "@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
   version "8.23.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.23.0.tgz#57acb3b65fce48d12b70d119436e145842a30081"
   integrity sha512-h2lUByouOXFAlMec2mILeELUbME5SZRN/7R9Cw2RD2lRQQY08MWMM+PmVVKKJNK1aIwqTo9t/0CvOxwPbRIE2Q==
@@ -7524,7 +7529,7 @@ eslint-visitor-keys@^4.2.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz#687bacb2af884fcdda8a6e7d65c606f46a14cd45"
   integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==
 
-eslint@*, [email protected]:
+eslint@*:
   version "8.57.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
   integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
@@ -13628,7 +13633,7 @@ typed-array-length@^1.0.7:
     possible-typed-array-names "^1.0.0"
     reflect.getprototypeof "^1.0.6"
 
-typescript@*, typescript@5.7.3, typescript@^5.0.4:
+typescript@*, typescript@^5.0.4:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.3.tgz#919b44a7dbb8583a9b856d162be24a54bf80073e"
   integrity sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==