> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-layout/datatable.md).

# DataTable ✅

<figure><img src="/files/YV7nDbsdRCPFwZNtjj0M" alt=""><figcaption></figcaption></figure>

## Features

* Generate a table in your Webflow site, using an external data source &#x20;
  * e.g. Google doc table&#x20;
  * e.g. Google sheet range&#x20;
* Basic styling options in the form of themes&#x20;
* Full or constrained height. &#x20;
  * Automatically scrollable with a fixed header when the content does not fit&#x20;

## Properties&#x20;

<table><thead><tr><th width="165.66668701171875">Name</th><th width="158.3333740234375">Type</th><th>Description </th></tr></thead><tbody><tr><td>Data URL</td><td>Link</td><td>The URL to your datasource, e.g. Google Doc.  Must be publicly accessible ( see Data Sources ) </td></tr><tr><td>Range </td><td>Text</td><td>The range of data to use</td></tr><tr><td>Header Rows</td><td>Number</td><td>The number of rows to use as the table header </td></tr><tr><td>Header Cols</td><td>Number</td><td>The number of columns to use as header columns </td></tr><tr><td>Height</td><td>Text</td><td>Optional. If specified, constrains the table height, fixes the header and makes the row content scrollable. </td></tr><tr><td>Theme</td><td>Variant</td><td>Pre-defined table themes. </td></tr><tr><td>Placeholder</td><td>Variant</td><td>Design-only placeholder content to assist with layout decisions. </td></tr><tr><td>Debug</td><td>Boolean </td><td>Used for debugging only. </td></tr></tbody></table>

## Data Sources&#x20;

Automatic source type identification&#x20;

<table><thead><tr><th width="158.33331298828125"></th><th>URL</th><th>Range</th><th></th></tr></thead><tbody><tr><td>Google Doc</td><td>Specify doc, and table index</td><td>The index of the table to use- 1, 2, 3, etc. </td><td>Great for text chunks, paragraphs, and bulleted lists<br>Must be shared to "Anyone with the link can read"</td></tr><tr><td>Google Sheet </td><td>Specify sheet and range</td><td></td><td>Great for simpler tables, can do dynamic calcs, smart formatting?  Must be shared to "Anyone with the link can read" </td></tr><tr><td></td><td></td><td></td><td></td></tr></tbody></table>

## Future&#x20;

* More data sources&#x20;
* Placeholder data options for designer preview
* Fixed header w/ scrollbar&#x20;
  * Height, full v. fixed&#x20;
* More styling approaches&#x20;
* Responsiveness&#x20;
* Sortable columns&#x20;
* Column-specific formatting&#x20;
  * Horizontal alignment &#x20;
  * Vertical alignment&#x20;
  * Format e.g. currency, decimals&#x20;
* Ideally, table-within-richtext and table-within-CMS-richtext support&#x20;

## Technical Notes&#x20;

* Component type: **Standard** &#x20;
* Support data source adapters for convenient source parsing&#x20;
  * Automate based on URL characteristics&#x20;

<https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Tables>

<https://tailwindcss.com/docs/table-layout>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-layout/datatable.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.