TableEngine Object

export var editor: any = null; 
export class EditorInitializer { 
    private callback: (editor: any) => void = null; 
 
    constructor(callback?: (editor: any) => void) { 
        this.callback = callback; 
        this.init(); 
    } 
 
    init = () => { 
        this.setLicense(); 
        this.initFactory(); 
        this.addEditControl(); 
    } 
 
    setLicense = () => { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) { 
            if (setLicenseResult.result) { 
                console.log("LEADTOOLS client license set successfully"); 
            } else { 
                var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license."; 
                alert(msg); 
                var msgParagraph = document.createElement('p'); 
                msgParagraph.innerText = msg; 
                var parent_1 = document.getElementById("div_container"); 
                while (parent_1.firstElementChild) { 
                    parent_1.removeChild(parent_1.firstElementChild); 
                } 
                parent_1.appendChild(msgParagraph); 
                console.log(msg); 
            } 
        }); 
    } 
 
    initFactory = () => { 
        // To communicate with the DocumentsService, it must be running!   
        // Change these parameters to match the path to the service.  
        lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
        lt.Document.DocumentFactory.servicePath = ""; 
        lt.Document.DocumentFactory.serviceApiPath = "api"; 
        // Set local proxy url template (Used in local load mode)  
        lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}"; 
        // Ping the Document service  
        lt.Document.DocumentFactory.verifyService() 
            .done(function (response: ResponseType | any) { 
                var serviceInfo = "Service name: '" + response.serviceName + "'"; 
                serviceInfo += " version: '" + response.serviceVersion + "'"; 
                serviceInfo += " platform: '" + response.servicePlatform + "'"; 
                serviceInfo += " OS: '" + response.serviceOperatingSystem + "'"; 
                lt.LTHelper.log(serviceInfo); 
            }) 
            .fail(function (jqXHR: string, statusText: string, errorThrown: string) { 
                var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application."; 
                window.alert(errMsg); 
                console.log(errMsg); 
            }); 
    } 
 
    addEditControl = () => { 
        //sets up the initial document editor object 
        var content = document.getElementById('content'); 
        editor = new lt.Document.Editor.DocumentEditor({ 
            root: content 
        }); 
        this.registerClickEvents(); 
        if (this.callback) { 
            this.callback(editor); 
        } 
    } 
 
    registerClickEvents = () => { 
        //registers the onclick functions for the buttons 
        const importClick = document.getElementById('importBtn'); 
        importClick.onclick = (e) => { 
            this.selectAndLoadFile(); 
        } 
        const exportClick = document.getElementById('exportBtn'); 
        exportClick.onclick = (e) => { 
            this.exportAsPdf(); 
        } 
    } 
 
    selectAndLoadFile = () => { 
        //creates an input element on the Import Document button to upload files 
        //into the document editor 
        var input = document.createElement('input'); 
        input.type = 'file'; 
        input.style.display = 'none'; 
        input.accept = '.doc, .docx, .pdf, .rtf, .txt'; 
        input.onchange = function (e) { 
            var files = input.files; 
            if (!files || !files.length) 
                return; 
            var file = files[0]; 
            document.body.style.cursor = 'wait'; 
            var promise = lt.Document.Editor.EditableDocument.fromFile(file); 
            promise.then(function (doc: HTMLElement) { 
                editor.setDocument(doc); 
            }); 
            promise.finally(() => { 
                document.body.style.cursor = 'default'; 
            }); 
        }; 
        input.click(); 
    } 
 
    exportAsPdf = () => { 
        //exports the current document for saving 
        var promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf); 
        var err = null; 
        promise.then(function (name: string) { }); 
        promise.catch(function (err: string) { 
            alert("There was an issue exporting the document. " + err); 
        }); 
    } 
 
} 

import {EditorInitializer} from '../utility/EditorInitializer'; 
import {editor} from '../utility/EditorInitializer'; 
 
export class TableEnginesExample { 
  
    run = () => { 
        new EditorInitializer(); 
        this.initTable(); 
    } 
 
    initTable =()=>{ 
        //Creates a new table in the document when the example is run  
        editor.engine.tables.insertTable(3,3); 
    } 
    importTable =()=>{ 
        //Allows the user to insert a table by prompting for the rows and columns in a specific format and then inserts that  
        //table at the cursor location. No more then 10 for either rows or columns. 
        var input = prompt("How many rows and columns (no more than 10 for either)? Enter numbers as row/column") 
        var rowCol = input.split('/'); 
        editor.engine.tables.insertTable(rowCol[0],rowCol[1]); 
    } 
    removeTable =()=>{ 
        //deletes the table that the cursor is currently inside 
        editor.engine.tables.deleteTable(); 
    } 
    addColumn =()=>{ 
        //adds a column to the left of the column that the cursor is in 
        editor.engine.tables.insertColumn(1); 
    } 
    removeColumn =()=>{ 
        //removes the column that the cursor is in 
        editor.engine.tables.deleteColumn(); 
    } 
    addRow =()=>{ 
        //adds a row above the row that the cursor is in 
        editor.engine.tables.insertRow(1) 
    } 
    removeRow =()=>{ 
        //removes the row that the cursor is in  
        editor.engine.tables.deleteRow(); 
    } 
    reformColumns =()=>{ 
        //adjusts the column sizes to stay with in the default margins if they  
        editor.engine.tables.distributeColumns(); 
    } 
    reformRows=()=>{ 
        //adjusts the height of the rows to be uniform across the table 
        editor.engine.tables.distributeRows(); 
    } 
    mergeCells=()=>{ 
        //combines the selected rows into one 
        editor.engine.tables.merge(); 
    } 
    unmergeCells=()=>{ 
        //splits the merged cell into its original members 
        editor.engine.tables.unmerge(); 
    } 
 
} 

export let editor = null; 
export class EditorInitializer { 
 
    constructor(callback) { 
         
        this.callback = callback; 
        this.init(); 
    } 
 
    init = () => { 
        this.setLicense(); 
        this.initFactory(); 
        this.addEditControl(); 
    } 
 
    setLicense = () => { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) { 
            if (setLicenseResult.result) { 
                console.log("LEADTOOLS client license set successfully"); 
            } else { 
                var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license."; 
                alert(msg); 
                var msgParagraph = document.createElement('p'); 
                msgParagraph.innerText = msg; 
                var parent_1 = document.getElementById("div_container"); 
                while (parent_1.firstElementChild) { 
                    parent_1.removeChild(parent_1.firstElementChild); 
                } 
                parent_1.appendChild(msgParagraph); 
                console.log(msg); 
            } 
        }); 
    } 
 
    initFactory = () => { 
        // To communicate with the DocumentsService, it must be running!   
        // Change these parameters to match the path to the service.  
        lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
        lt.Document.DocumentFactory.servicePath = ""; 
        lt.Document.DocumentFactory.serviceApiPath = "api"; 
        // Set local proxy url template (Used in local load mode)  
        lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}"; 
        // Ping the Document service  
        lt.Document.DocumentFactory.verifyService() 
            .done(function (response) { 
                var serviceInfo = "Service name: '" + response.serviceName + "'"; 
                serviceInfo += " version: '" + response.serviceVersion + "'"; 
                serviceInfo += " platform: '" + response.servicePlatform + "'"; 
                serviceInfo += " OS: '" + response.serviceOperatingSystem + "'"; 
                lt.LTHelper.log(serviceInfo); 
            }) 
            .fail(function (jqXHR, statusText, errorThrown) { 
                var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application."; 
                window.alert(errMsg); 
                console.log(errMsg); 
            }); 
    } 
 
    addEditControl = () => {  
        //sets up the initial document editor object 
        var content = document.getElementById('content'); 
        editor = new lt.Document.Editor.DocumentEditor({ 
            root: content 
        }); 
        this.registerClickEvents(); 
        if(this.callback){ 
            this.callback(editor); 
        } 
    } 
 
    registerClickEvents = () => { 
        //registers the onclick functions for the buttons 
        const importClick = document.getElementById('importBtn'); 
        importClick.onclick = (e) =>{ 
            this.selectAndLoadFile(); 
        } 
        const exportClick = document.getElementById('exportBtn'); 
        exportClick.onclick = (e) =>{ 
            this.exportAsPdf(); 
        } 
    } 
 
    selectAndLoadFile = () => { 
        //creates an input element on the Import Document button to upload files 
        //into the document editor 
        var input = document.createElement('input'); 
        input.type = 'file'; 
        input.style.display = 'none'; 
        input.accept = '.doc, .docx, .pdf, .rtf, .txt'; 
        input.onchange = function (e) { 
            var files = input.files; 
            if (!files || !files.length) 
                return; 
            var file = files[0]; 
            document.body.style.cursor = 'wait'; 
            var promise = lt.Document.Editor.EditableDocument.fromFile(file); 
            promise.then(function (doc) { 
                editor.setDocument(doc); 
            }); 
            promise.finally(()=> { 
                document.body.style.cursor = 'default'; 
            }); 
        }; 
        input.click(); 
    } 
 
    exportAsPdf = () => { 
        //exports the current document for saving 
        var promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf); 
        var err = null; 
        promise.then(function (name) { }); 
        promise.catch(function (err) { 
            alert("There was an issue exporting the document. " + err); 
        }); 
    } 
} 

<!DOCTYPE html> 
<html> 
 
<head> 
    <meta charset="utf-8" /> 
    <title> Using the Table Engine in the Document Editor</title> 
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script> 
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> 
 
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> 
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> 
 
 
    <script src="../../lib/Leadtools.js"></script> 
    <script src="../../lib/Leadtools.Annotations.Engine.js"></script> 
    <script src="../../lib/Leadtools.Annotations.Automation.js"></script> 
    <script src="../../lib/Leadtools.Document.js"></script> 
    <script src="../../lib/Leadtools.Document.Editor.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="../css/examples.css"> 
 
    <script src="../../javascript/bundle.js"></script> 
</head> 
 
<body> 
    <div> 
        <div id="title"> 
            Using the Table Engine in the Document Editor 
        </div> 
        <ul id="menu"> 
            <li><a id="importBtn" class="rightLineBorder">Import Document</a></li> 
            <li><a id="exportBtn" class="rightLineBorder">Export Document</a></li> 
            <li><a id="exampleBtn" class="rightLineBorder">Run Example</a></li> 
            <li><a id="insertTable" class="rightLineBorder" style="display: none;">Add Table</a></li> 
            <li><a id="removeTBtn" class="rightLineBorder" style="display: none;">Remove Table</a></li> 
            <li><a id="addColumnBtn" class="rightLineBorder" style="display: none;">Add Column to Table</a></li> 
            <li><a id="removeColumnBtn" class="rightLineBorder" style="display: none;">Remove Column from Table</a></li> 
            <li><a id="addRowBtn" class="rightLineBorder" style="display: none;">Add Row to Table</a></li> 
            <li><a id="removeRowBtn" class="rightLineBorder" style="display: none;">Remove Row from Table</a></li> 
 
            <li><a id="reformCBtn" class="rightLineBorder" style="display: none;">Format Columns</a></li> 
            <li><a id="reformRBtn" class="rightLineBorder" style="display: none;">Format Rows</a></li> 
 
            <li><a id="mergeBtn" class="rightLineBorder" style="display: none;">Merge Cells</a></li> 
            <li><a id="unmergeBtn" class="rightLineBorder" style="display: none;">Unmerge Cells</a></li> 
 
        </ul> 
    </div> 
    <div id="editorWrapper" oncontextmenu="return false;"> 
        <div class="inner-body" id="content"> 
        </div> 
    </div> 
</body> 
<script> 
    //creates the onclick functions for the buttons and hides/shows them when necessary 
    window.onload = () => { 
        const button = document.getElementById('exampleBtn'); 
        const example = new window.examples.TableEnginesExample(); 
 
        const insertTable = document.getElementById('insertTable'); 
        const removeTBtn = document.getElementById('removeTBtn'); 
        const addColumnBtn = document.getElementById('addColumnBtn'); 
        const removeColumnBtn = document.getElementById('removeColumnBtn'); 
        const addRowBtn = document.getElementById('addRowBtn'); 
        const removeRowBtn = document.getElementById('removeRowBtn'); 
        const reformCBtn = document.getElementById('reformCBtn'); 
        const reformRBtn = document.getElementById('reformRBtn'); 
        const mergeBtn = document.getElementById('mergeBtn'); 
        const unmergeBtn = document.getElementById('unmergeBtn'); 
 
        button.onclick = () => { 
 
            example.run(); 
            button.style.display = "none"; 
            insertTable.style.display = "block"; 
            removeTBtn.style.display = "block"; 
            addColumnBtn.style.display = "block"; 
            removeColumnBtn.style.display = "block"; 
            addRowBtn.style.display = "block"; 
            removeRowBtn.style.display = "block"; 
            reformCBtn.style.display = "block"; 
            reformRBtn.style.display = "block"; 
            mergeBtn.style.display = "block"; 
            unmergeBtn.style.display = "block"; 
        } 
        reformCBtn.onclick = () => { 
            example.reformColumns(); 
        } 
        reformRBtn.onclick = () => { 
            example.reformRows(); 
        } 
        insertTable.onclick = () => { 
            example.importTable(); 
        } 
        removeTBtn.onclick = () => { 
            example.removeTable(); 
        } 
        addColumnBtn.onclick = () => { 
            example.addColumn(); 
        } 
        removeColumnBtn.onclick = () => { 
            example.removeColumn(); 
        } 
        addRowBtn.onclick = () => { 
            example.addRow(); 
        } 
        removeRowBtn.onclick = () => { 
            example.removeRow(); 
        } 
        mergeBtn.onclick = () => { 
            example.mergeCells(); 
        } 
        unmergeBtn.onclick = () => { 
            example.unmergeCells(); 
        } 
    }; 
</script> 
 
</html> 

html { 
    height: 100%; 
} 
 
body { 
    height: 100%; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
} 
 
#title { 
    padding: 10px; 
    font-size: 24px; 
} 
 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
 
#editorWrapper { 
    border-top: 1px solid black; 
    height: 95%; 
} 
 
#content { 
    height: 100%; 
} 
 
li { 
    float: left; 
} 
 
    li a { 
        display: block; 
        text-align: center; 
        padding: 14px 16px; 
        text-decoration: none; 
        cursor: pointer; 
        user-select: none; 
        font-weight: bold; 
    } 
 
    li:first-child { 
        margin-left: 5px; 
    } 
 
.rightLineBorder { 
    border-right: 1px black solid; 
} 
 
li a:hover { 
    background-color: lightblue; 
}