feat(print/table): render using internal mechanism

This commit is contained in:
Elian Doran 2025-11-21 22:05:22 +02:00
parent 6f83b932b0
commit f864746b54
No known key found for this signature in database
2 changed files with 14 additions and 3 deletions

View File

@ -0,0 +1,7 @@
.tabulator-print-table table,
.tabulator-print-table th,
.tabulator-print-table tr,
.tabulator-print-table td {
border: 1px solid black !important;
border-collapse: collapse;
}

View File

@ -4,6 +4,7 @@ import useData, { TableConfig } from "./data";
import { ExportModule, PrintModule, Tabulator as VanillaTabulator} from 'tabulator-tables'; import { ExportModule, PrintModule, Tabulator as VanillaTabulator} from 'tabulator-tables';
import Tabulator from "./tabulator"; import Tabulator from "./tabulator";
import { RawHtmlBlock } from "../../react/RawHtml"; import { RawHtmlBlock } from "../../react/RawHtml";
import "./TablePrintView.css";
export default function TablePrintView({ note, noteIds, viewConfig }: ViewModeProps<TableConfig>) { export default function TablePrintView({ note, noteIds, viewConfig }: ViewModeProps<TableConfig>) {
const tabulatorRef = useRef<VanillaTabulator>(null); const tabulatorRef = useRef<VanillaTabulator>(null);
@ -21,16 +22,19 @@ export default function TablePrintView({ note, noteIds, viewConfig }: ViewModePr
data={rowData} data={rowData}
index="branchId" index="branchId"
dataTree={hasChildren} dataTree={hasChildren}
printAsHtml={true}
printStyled={true} printStyled={true}
onReady={() => { onReady={() => {
const tabulator = tabulatorRef.current; const tabulator = tabulatorRef.current;
if (!tabulator) return; if (!tabulator) return;
setHtml(tabulator.getHtml()); const generatedTable = tabulator.modules.export.generateTable(tabulator.options.printConfig, tabulator.options.printStyled, tabulator.options.printRowRange, "print");
if(tabulator.options.printFormatter){
tabulator.options.printFormatter(tabulator.element, generatedTable);
}
setHtml(generatedTable.outerHTML);
}} }}
/> />
) : ( ) : (
<RawHtmlBlock html={html} /> <RawHtmlBlock html={html} className="tabulator-print-fullscreen" />
)} )}
</div> </div>