Google Sheet Data to Dynamic HTML Table API - n8n Workflow

Developers needing a simple API endpoint to visualize spreadsheet data.
Content managers who need to publish temporary data reports instantly without setting up a backend.
Users looking for advanced examples of how to use the n8n Function node for custom data transformation and rendering.
Anyone interested in building powerful, bespoke n8n templates for data presentation.

This advanced n8n workflow provides an exceptionally quick solution for publishing data stored in Google Sheets as a visually appealing, dynamic HTML table. Instead of setting up a database or complex hosting environment, this n8n automation creates a public endpoint that pulls fresh data on demand. By leveraging the custom scripting power of the Function n8n node, the workflow reads the data, applies standard Bootstrap styling for responsiveness, and serves the rendered HTML instantly upon request. This specific n8n workflow demonstrates how to transform structured data into presentation-ready web content efficiently using a robust n8n trigger.

This n8n workflow is initiated externally via a public endpoint.

1. Initiation (Webhook n8n trigger): The process begins when the Webhook n8n trigger receives an incoming HTTP request (GET or POST) at its designated path.


2. Data Retrieval (Read from Google Sheets): The workflow immediately proceeds to the Google Sheets n8n node. This node authenticates and reads all the data rows and headers from the specified spreadsheet ID.


3. HTML Generation (Build HTML Function n8n node): The data is passed to the 'Build HTML' Function n8n node. This crucial step uses embedded JavaScript to iterate over the input items. It dynamically generates the full HTML document, including the necessary Bootstrap 5 dependencies, correctly mapping column headers to tags and data values to tags, thus constructing a complete, styled HTML table. This customized n8n node produces an output item containing the final HTML string.


4. Response (Respond to Webhook): Finally, the 'Respond to Webhook' n8n node takes the generated HTML string ({{$json["html"]}}) and sends it back as the response to the client that fired the initial n8n trigger. It is configured to explicitly set the Content-Type header to text/html; charset=UTF-8, ensuring the browser renders the table instead of displaying raw text.

1. Import: Import this n8n workflow JSON into your n8n instance.


2. Webhook Setup: Activate the 'Webhook' n8n trigger node to generate its unique test and production URLs. This will be the public API endpoint.


3. Google Sheets Credentials: Update the 'Read from Google Sheets' n8n node with your required Google Sheets credentials. Ensure the service account or OAuth credentials have read access to the target sheet.


4. Configure Sheet ID: In the 'Read from Google Sheets' n8n node parameters, replace the placeholder SheetId with the ID of your actual Google Sheet containing the data you wish to publish.


5. Activation: Save and activate the n8n workflow. Accessing the webhook URL will now execute the n8n automation and return the rendered HTML table.

Webhook (n8n trigger): Serves as the entry point for this n8n workflow. It is configured for responseMode: responseNode, meaning the final output is handled by a subsequent node.
Read from Google Sheets (Google Sheets n8n node): Reads all data from the specified spreadsheet ID. Requires valid Google Sheets OAuth2 credentials.
Build HTML (Function n8n node): The core logic engine. It uses JavaScript to iterate over the input items and dynamically construct a styled HTML table using Bootstrap classes. The output of this n8n node is an object containing the key html.
Respond to Webhook (n8n node): Handles the final output. It maps the custom HTML output from the previous Function n8n node (={{$json["html"]}}) as the response body and sets the critical Content-Type header to text/html; charset=UTF-8.