# Document Editor: Useful JavaScript Functions for Tables

> This article shows how to use JavaScript functions to manipulate tables in the Document Editor. It demonstrates how to set and get text in a table cell, and how to export a table to JSON.

- **Author:** Bjoern Meyer
- **Published:** 2024-06-19
- **Modified:** 2025-11-16
- **Description:** This article shows how to use JavaScript functions to manipulate tables in the Document Editor. It demonstrates how to set and get text in a table cell, and how to export a table to JSON.
- **4 min read** (739 words)
- **Tags:**
  - ASP.NET
  - Tables
  - JavaScript
- **Web URL:** https://www.textcontrol.com/blog/2024/06/19/document-editor-useful-javascript-functions-for-tables/
- **LLMs URL:** https://www.textcontrol.com/blog/2024/06/19/document-editor-useful-javascript-functions-for-tables/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2024/06/19/document-editor-useful-javascript-functions-for-tables/llms-full.txt

---

The JavaScript API of the Document Editor provides a set of methods and events to interact with the document and to manipulate the document content. Some functionality, such as setting the text in a particular table cell, requires different methods and callbacks.

For example, to set the text of a specific cell in a table, you would need to get the specific table and then set the text to a specific cell in the table.

To demonstrate how to set the text of a specific cell in a table, we will first insert a table into the document. The following code snippet shows how to insert a table into the document.

```
TXTextControl.tables.add(rows, columns, tableId);
```

### Set TableCell Text

After inserting the table, you can set the text of a specific cell in the table by using the following code snippet:

```
function setTableCellText(tableId, row, column, text) {
    TXTextControl.tables.getItem(table => {
        table.cells.getItem(cell => {
            cell.setText(text);
        }, null, row, column);
    }, null, tableId);
}
```

The code retrieves the table using the getItem method that accepts an id and returns the table.

The following code calls the above method and sets the text of the first cell in the third row of the table:

```
setTableCellText(10,3,1,'Hi there!')
```

![Tables in TX Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2024/06/19/a/assets/table1.webp "Tables in TX Text Control")

### Get TableCell Text

To get the text of a specific cell in a table, you can use the following code snippet:

```
async function getTableCellText(tableId, row, column) {
    return new Promise((resolve, reject) => {
        TXTextControl.tables.getItem(table => {
            table.cells.getItem(cell => {
                cell.getText(cellText => {
                    resolve(cellText);
                }, error => {
                    reject(error);
                });
            }, null, row, column);
        }, null, tableId);
    });
}
```

This asynchronous method retrieves the table using the getItem method that accepts an id and returns the table and uses the getText method to get the text of the cell.

This is how the above method is called:

```
let text = await getTableCellText(10, 3, 3);
```

### Exporting the Table to JSON

For specific scenarios, it might be necessary to export the table to JSON. The following code snippet shows how to export the table to JSON including text, row, and column information:

```
async function exportTableAsJSON(tableId) {

    function CustomTableCell(text, row, column) {
        this.text = text;
        this.row = row;
        this.column = column;
    }

    return new Promise((resolve, reject) => {
        TXTextControl.tables.getItem(table => {
            table.rows.getCount(rows => {
                let tableCell = [];

                table.columns.getCount(columns => {
                    let totalCells = rows * columns;

                    for (let i = 1; i <= rows; i++) {
                        for (let j = 1; j <= columns; j++) {
                            table.cells.getItem(cell => {
                                cell.getText(cellText => {
                                    tableCell.push(new CustomTableCell(cellText, i, j));
                                    if (tableCell.length === totalCells) {
                                        resolve(JSON.stringify(tableCell));
                                    }
                                });
                            }, null, i, j);
                        }
                    }

                });
            });
        }, null, tableId);
    });
}
```

This asynchronous method loops through the specified table and creates a *CustomTableCell* object of each cell, which is stored in an array that is returned as JSON. It is called as follows:

```
let tableCell = await exportTableAsJSON(10);
console.log(tableCell);
```

This is the (shortened) JSON output:

```
[
   {
      "text":"Cell text 1 1",
      "row":1,
      "column":1
   },
   {
      "text":"Cell text 1 2",
      "row":1,
      "column":2
   },
   {
      "text":"Cell text 1 3",
      "row":1,
      "column":3
   },
   [...]
]
```

### Importing the Table from JSON

After exporting the table to JSON, you can import the table back into the document. The following code snippet shows how to import the table from JSON:

```
async function importTableFromJSON(tableId, json) {
    return new Promise((resolve, reject) => {
        let tableCell = JSON.parse(json);

        TXTextControl.tables.getItem(table => {
            tableCell.forEach(cell => {
                table.cells.getItem(cellItem => {
                    cellItem.setText(cell.text);
                }, null, cell.row, cell.column);
            });
        }, null, tableId);
    });
}
```

This asynchronous method accepts the JSON string and loops through the JSON array to add the content to an existing table. In this case, the table with the specific structure must already exist in the document.

If you want to create a new table from the JSON data, you can use the following code snippet:

```
async function importAndCreateTableFromJSON(tableId, json) {
    return new Promise((resolve, reject) => {
        let tableCell = JSON.parse(json);
        let columns = 0;
        let rows = 0;

        tableCell.forEach(cell => {
            if (cell.column > columns) {
                columns = cell.column;
            }

            if (cell.row > rows) {
                rows = cell.row;
            }
        });

        TXTextControl.tables.add(rows, columns, tableId);

        TXTextControl.tables.getItem(table => {
            tableCell.forEach(cell => {
                table.cells.getItem(cellItem => {
                    cellItem.setText(cell.text);
                }, null, cell.row, cell.column);
            });
        }, null, tableId);
    });
}
```

### Conclusion

This article showed how to set and get the text of a specific cell in a table using the JavaScript API of the Document Editor. Additionally, it showed how to export the table to JSON and import the table from JSON.

These methods can be used to manipulate the content of tables in a document and to export and import tables to and from JSON.

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [Auto-Sizing Tables Proportionally](https://www.textcontrol.com/blog/2021/08/05/auto-sizing-tables-proportionally/llms.txt)
- [Build a Custom Backstage View in ASP.NET Core with TX Text Control](https://www.textcontrol.com/blog/2026/02/17/build-a-custom-backstage-view-in-aspnet-core-with-tx-text-control/llms.txt)
- [Convert CSV to PDF in .NET C#](https://www.textcontrol.com/blog/2026/01/19/convert-csv-to-pdf-in-dotnet-csharp/llms.txt)
- [5 Document Workflows You Can Automate With JavaScript Rich Text Editor](https://www.textcontrol.com/blog/2026/01/14/five-document-workflows-you-can-automate-with-javascript-rich-text-editor/llms.txt)
- [Add JavaScript to PDFs with TX Text Control in C# .NET: Time-Based Alerts Made Easy](https://www.textcontrol.com/blog/2025/06/13/add-javascript-to-pdfs-with-tx-text-control-in-c-dot-net-time-based-alerts-made-easy/llms.txt)
- [Why Table Control in Templates is Important for Professional PDF Creation in C#](https://www.textcontrol.com/blog/2025/04/04/why-table-control-in-templates-is-important-for-professional-pdf-creation/llms.txt)
- [Splitting Tables at Bookmark Positions and Cloning Table Headers](https://www.textcontrol.com/blog/2025/02/13/splitting-tables-at-bookmark-positions-and-cloning-table-headers/llms.txt)
- [Loading and Processing Excel XLSX Spreadsheet Tables into TX Text Control using .NET C#](https://www.textcontrol.com/blog/2024/10/16/loading-and-processing-excel-spreadsheet-tables-into-tx-text-control-using-net-csharp/llms.txt)
- [Creating Advanced Tables in PDF and DOCX Documents with C#](https://www.textcontrol.com/blog/2024/09/30/creating-advanced-tables-in-pdf-and-docx-documents-with-csharp/llms.txt)
- [Using the Document Editor in SPA Applications using the removeFromDom Method](https://www.textcontrol.com/blog/2024/09/02/using-the-document-editor-in-spa-applications-using-the-removefromdom-method/llms.txt)
- [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt)
- [Text to Table and Table to Text in TX Text Control and C#](https://www.textcontrol.com/blog/2024/06/26/text-to-table-and-table-to-text-in-tx-text-control-and-csharp/llms.txt)
- [Removing Empty Pages in TX Text Control with JavaScript](https://www.textcontrol.com/blog/2024/06/19/removing-empty-pages-in-tx-textcontrol-with-javascript/llms.txt)
- [Document Editor: Formatting Table Cells Using JavaScript](https://www.textcontrol.com/blog/2024/06/18/document-editor-formatting-table-cells-using-javascript/llms.txt)
- [Extract Data from PDF Documents with C#](https://www.textcontrol.com/blog/2024/06/10/extract-data-from-pdf-documents-with-csharp/llms.txt)
- [Inject JavaScript to PDF Documents in C#](https://www.textcontrol.com/blog/2024/06/07/inject-javascript-to-pdf-documents-in-csharp/llms.txt)
- [Inserting MergeBlocks with the DataSourceManager and Applying Table Styles in C#](https://www.textcontrol.com/blog/2024/04/09/inserting-mergeblocks-with-the-datasourcemanager-and-applying-table-styles-in-csharp/llms.txt)
- [Loading Documents from Azure Blob Storage into the TX Text Control Document Editor using pure JavaScript](https://www.textcontrol.com/blog/2024/04/08/loading-documents-from-azure-blob-storage-into-tx-text-control-document-editor-using-pure-javascript/llms.txt)
- [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt)
- [Document Editor: How to Customize the Reconnecting Alert Message](https://www.textcontrol.com/blog/2023/12/18/document-editor-how-to-customize-the-reconnecting-alert-message/llms.txt)
- [Reuse Document Editor Instances by Dynamically Moving them in the DOM](https://www.textcontrol.com/blog/2023/10/02/reuse-document-editor-instances-by-dynamically-moving-them-in-the-dom/llms.txt)
- [How to Detect and Extract Table Data as JSON from PDF Documents in C#](https://www.textcontrol.com/blog/2023/08/15/how-to-detect-and-extract-table-data-as-json-from-pdf-documents-in-csharp/llms.txt)
- [Useful Tricks for Working with Tables](https://www.textcontrol.com/blog/2023/08/04/useful-tricks-for-working-with-tables/llms.txt)
- [Generating Hierarchical Tables from JSON Data in .NET C#](https://www.textcontrol.com/blog/2023/08/03/generating-hierarchical-tables-from-json-data-in-csharp/llms.txt)
- [Table Extension: Remove Empty Columns After Mail Merge](https://www.textcontrol.com/blog/2023/06/08/table-extension-remove-empty-columns-after-mail-merge/llms.txt)