Skip to content

feat: support new table properties in PDF export #1475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 4, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@ export default function App() {
// Creates a new editor instance with some initial content.
const editor = useCreateBlockNote({
schema: withPageBreak(BlockNoteSchema.create()),
tables: {
splitCells: true,
cellBackgroundColor: true,
cellTextColor: true,
headers: true,
},
initialContent: [
{
type: "paragraph",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@ export default function App() {
// Creates a new editor instance with some initial content.
const editor = useCreateBlockNote({
schema: withPageBreak(BlockNoteSchema.create()),
tables: {
splitCells: true,
cellBackgroundColor: true,
cellTextColor: true,
headers: true,
},
initialContent: [
{
type: "paragraph",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@
<w:tc>
<w:tcPr>
<w:tcW w:type="dxa" w:w="150pt"/>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
Expand All @@ -300,13 +301,19 @@
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
Expand All @@ -318,6 +325,7 @@
<w:tc>
<w:tcPr>
<w:tcW w:type="dxa" w:w="150pt"/>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
Expand All @@ -326,13 +334,19 @@
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
Expand All @@ -344,6 +358,7 @@
<w:tc>
<w:tcPr>
<w:tcW w:type="dxa" w:w="150pt"/>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
Expand All @@ -352,13 +367,19 @@
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
Expand Down Expand Up @@ -599,20 +620,29 @@
</w:tblGrid>
<w:tr>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 1</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 2</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 3</w:t>
Expand All @@ -622,13 +652,19 @@
</w:tr>
<w:tr>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 4</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:rPr>
Expand All @@ -640,6 +676,9 @@
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 6</w:t>
Expand All @@ -649,20 +688,29 @@
</w:tr>
<w:tr>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 7</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 8</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 9</w:t>
Expand Down
104 changes: 81 additions & 23 deletions packages/xl-docx-exporter/src/docx/util/Table.tsx
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

table headers are not supported atm because they require modifying the run of the paragraph to make the cell's content bold.

Table paragraph color seems to not be working at the moment either, maybe to do with the inheritance of paragraph within a paragraph's color?

Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
import { Exporter, InlineContentSchema, TableContent } from "@blocknote/core";
import {
Exporter,
InlineContentSchema,
mapTableCell,
TableContent,
UnreachableCaseError,
} from "@blocknote/core";
import {
Table as DocxTable,
Paragraph,
ParagraphChild,
ShadingType,
TableCell,
TableRow,
} from "docx";
Expand All @@ -12,33 +19,84 @@ export const Table = (
t: Exporter<any, any, any, any, ParagraphChild, any, any>
) => {
const DEFAULT_COLUMN_WIDTH = 120;

// If headerRows is 1, then the first row is a header row
const headerRows = new Array(data.headerRows ?? 0).fill(true);
// If headerCols is 1, then the first column is a header column
const headerCols = new Array(data.headerCols ?? 0).fill(true);

return new DocxTable({
layout: "autofit",
columnWidths: data.columnWidths.map(
(w) =>
(w ?? DEFAULT_COLUMN_WIDTH) * /* to points */ 0.75 * /* to twips */ 20
),
rows: data.rows.map(
(row) =>
new TableRow({
children: row.cells.map((cell, i) => {
const width = data.columnWidths?.[i];
return new TableCell({
width: width
? {
size: `${width * 0.75}pt`,
type: "dxa",
}
: undefined,
children: [
new Paragraph({
// TODO: fix this
children: t.transformInlineContent(cell as any),
}),
],
});
}),
})
),
rows: data.rows.map((row, rowIndex) => {
const isHeaderRow = headerRows[rowIndex];
return new TableRow({
tableHeader: isHeaderRow,
children: row.cells.map((c, colIndex) => {
const width = data.columnWidths?.[colIndex];
const cell = mapTableCell(c);
const isHeaderColumn = headerCols[colIndex];

return new TableCell({
width: width
? {
size: `${width * 0.75}pt`,
type: "dxa",
}
: undefined,
columnSpan: cell.props.colspan,
rowSpan: cell.props.rowspan,
shading:
cell.props.backgroundColor === "default" ||
!cell.props.backgroundColor
? undefined
: {
type: ShadingType.SOLID,
color:
t.options.colors[
cell.props
.backgroundColor as keyof typeof t.options.colors
].background.slice(1),
},
children: [
new Paragraph({
children: t.transformInlineContent(cell.content),

alignment:
!cell.props.textAlignment ||
cell.props.textAlignment === "left"
? undefined
: cell.props.textAlignment === "center"
? "center"
: cell.props.textAlignment === "right"
? "right"
: cell.props.textAlignment === "justify"
? "distribute"
: (() => {
throw new UnreachableCaseError(
cell.props.textAlignment
);
})(),
run: {
// TODO add support for table headers exporting, bolding seems to not be working at the moment
bold: isHeaderRow || isHeaderColumn,
// TODO table paragraph color seems to not be working at the moment
// Probably because the runs are setting their own color
color:
cell.props.textColor === "default" || !cell.props.textColor
? undefined
: t.options.colors[
cell.props.textColor as keyof typeof t.options.colors
].text.slice(1),
},
}),
],
});
}),
});
}),
});
};
Loading
Loading