> 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="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FpMy9bmNUm6Q4XxMJ0PyA%2Fimage.png?alt=media&amp;token=d2e20b8a-f29a-473e-bd34-dba2008e761d" 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>