Spreadsheet Dialog

The spreadsheet dialog allows users to import, preview, and embed spreadsheet data within Uhuu templates.

Parameters

The editDialog method is configured with the following options for spreadsheet editing:

• type (enum, required: "spreadsheet"): Sets the type to "spreadsheet" to trigger the Spreadsheet Dialog for loading and displaying table data.
• path (string, required): Specifies the path within the payload where the spreadsheet data will be stored. In this example, "sheet_data" is used as the payload path.

Example Usage

Below is a sample React component setup that uses the Spreadsheet Dialog to load and display data as a table.

export default ({ payload }) => {
    const { sheet_data } = payload;
    
    return (
        <div onClick={() => $uhuu.editDialog({ path: "sheet_data", type: "spreadsheet" })}>
          <div className="table-container" dangerouslySetInnerHTML={{ __html: sheet_data?.html }} />
        </div>
      );
}

This dialog is particularly useful for displaying data in a tabular format, allowing users to incorporate external data from spreadsheet files directly into their document.

Example Response

After the spreadsheet data is imported, response may look like this in the payload:

{
    "sheet_data": {
        "html": "<table style=\"border-collapse: collapse;\"><colgroup><col style=\"width: 88px;\"><col style=\"width: 88px;\"></colgroup><tr><td>Name</td><td>Surname</td></tr><tr><td>Patrick</td><td>Mueller</td></tr><tr><td>Timon</td><td>Oberholzer</td></tr></table>",
        "workbook": {"styles":[],"sheetOrder":["sheet1"],"sheets":{"sheet1":{"id":"sheet1","cellData":[[{"v":"Name","t":1},{"v":"Surname","t":1},{"v":""}],[{"v":"Patrick","t":1},{"v":"Mueller","t":1},{"v":""}],[{"v":"Timon","t":1},{"v":"Oberholzer","t":1},{"v":""}]],"columnData":[],"columnCount":2,"rowCount":3,"defaultColumnWidth":88,"defaultRowHeight":24,"mergeData":[]}}}
    }
}

Once imported, the spreadsheet data can be displayed as an HTML table within the template.