> For the complete documentation index, see [llms.txt](https://learn.squirrel365.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.squirrel365.io/~/revisions/heUC4IdcyyXSz2lCbI8z/components/overview.md).

# Overview

## Looking for something in particular?

## What is a component?

Squirrel components are essential building blocks for any project you create. They include Charts and Tables for displaying data, Controls for managing data movement and functionality, as well as Shapes and Media for designing and building a user interface.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Layout &#x26; Containers</td><td><a href="/pages/BCgUyadK5FKTM70QOQ2T">/pages/BCgUyadK5FKTM70QOQ2T</a></td></tr><tr><td>Input Controls</td><td><a href="/pages/i7Sz9XuXdoMUPmNSBvhV">/pages/i7Sz9XuXdoMUPmNSBvhV</a></td></tr><tr><td>Buttons</td><td><a href="/pages/xJHoqCDNHclfpK25jMeF">/pages/xJHoqCDNHclfpK25jMeF</a></td></tr><tr><td>Basic</td><td><a href="/pages/FkmZpNhFBUl7kWhA8stK">/pages/FkmZpNhFBUl7kWhA8stK</a></td></tr><tr><td>Media</td><td><a href="/pages/mMaUXwDAyJ7IhYCmkNIH">/pages/mMaUXwDAyJ7IhYCmkNIH</a></td></tr><tr><td>Tables</td><td><a href="/pages/tHrswYnYUHNVdOnEwIgr">/pages/tHrswYnYUHNVdOnEwIgr</a></td></tr><tr><td>Charts</td><td><a href="/pages/iE4QT0RPcz2QbzszvLOS">/pages/iE4QT0RPcz2QbzszvLOS</a></td></tr><tr><td>Data Viz</td><td><a href="/pages/VOrb7mwkuKJQ2S8MTXpK">/pages/VOrb7mwkuKJQ2S8MTXpK</a></td></tr><tr><td>Miscellaneous</td><td><a href="/pages/jhnHny9h4llPKiLfLCDQ">/pages/jhnHny9h4llPKiLfLCDQ</a></td></tr><tr><td>Add-ons</td><td><a href="/pages/iJtlWQgH63qSTYGvhLc6">/pages/iJtlWQgH63qSTYGvhLc6</a></td></tr></tbody></table>

### Adding a component

<figure><img src="/files/UADpebRKnb6UlvIHIXzx" alt="" width="375"><figcaption><p>From left to right: Add Component, Component Tree, Connections, Functions</p></figcaption></figure>

To open the Component Library, click the <img src="/files/Czm8CHfc76yMHtRmiS4l" alt="" data-size="line"> icon. This action will reveal the 'Add Component' library, showcasing various sub-sections for each component type. At the top of the library, you'll find a search bar and buttons to switch the library's view: Grid View (default) or List View.

<figure><img src="/files/Dm51EG9QDx8TmrVb4O4n" alt=""><figcaption><p>An example view of the Component Library (v1.19), displaying the default Grid View, expanded drawers and components in the drawers.</p></figcaption></figure>

Select the desired component and move the cursor over the canvas area. There are a few options for placing a component on the canvas:

#### 1. One-click placement

<figure><img src="/files/93hk0LPRXgX4nZ3wymCB" alt=""><figcaption></figcaption></figure>

#### 2. Drawing component

<figure><img src="/files/5OBG4HQS14wEd7NbG76Z" alt=""><figcaption></figcaption></figure>

3. **Double-click component**

<figure><img src="/files/AnhvVjOTQPVIIsPYzAnc" alt="" width="563"><figcaption></figcaption></figure>

### Grouping Components

Components can be grouped on the canvas. When grouped, these components can be moved together on the canvas, as a single layer in the Component Tree.

{% hint style="info" %}
v1.19 Introduced changes to Grouping and its functionality in the product. For more information, check out [this article](/~/revisions/heUC4IdcyyXSz2lCbI8z/components/layout-and-positioning/changes-to-grouping-in-v1.19.md).
{% endhint %}

Components can be grouped in a few ways:

#### 1. Ctrl + G

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

#### 2. Right-click menu

<figure><img src="/files/0K02snWft86sxUPyHNWI" alt=""><figcaption></figcaption></figure>

#### 3. Arrange Menu

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

### Arranging Components

Components can be arranged on the canvas based on their positions and size. When multiple components are selected, the arrange menu will be enabled.

<figure><img src="/files/J5aMhuHIt8Baml1d0QzM" alt=""><figcaption><p>From left to right: Align Left, Alight Center, Align Right, Align Top, Align Middle, Align Bottom, Distribute Horizontally, Distribute Vertically, Make Same Size, Make Same Height, Make Same Width</p></figcaption></figure>

{% hint style="info" %}
When arranging components, the arrangement will be based on the first selected component.&#x20;

This is identifiable by the thicker blue bounding box around the component.
{% endhint %}

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

### View components in action

When on the canvas, components have no interaction and serve only as a means of styling and layout. Components can be "tested" and viewed in action within the Debug and Preview menus.

#### Debug

Debug acts as a means to "test" a project. When in this mode, components can be interacted with on the canvas, and display the set styling for each of their states. In addition to this, the spreadsheet is still visible. allowing you to see what is happening in the spreadsheet while interacting with the components.

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

#### Preview

Preview mode acts as a means of viewing the project as it will be seen in the browser before publishing. When in this mode, the spreadsheet cannot be viewed, but the components can be interacted with.

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

## What is a function?

Squirrel functions are "invisible" interactions that work behind the scenes. From highly dynamic movement of data with the Data Mover and MegaQuery functions, to connections between parent and child with the Tableau or External Parameters.

#### Adding a function

Adding a function is very similar to adding a function to the canvas, minus the drag-and-drop interaction with the canvas itself.

To access the Functions panel and Functions Library, select the <img src="/files/t1OkOvBsNr5qGKFg1ufp" alt="" data-size="line"> icon on the Left-Side Menu. The Functions panel will expand that contains a search bar and an 'Add a Function' button.

<figure><img src="/files/wfpi9P3vDwtjNeAL4MpD" alt="" width="375"><figcaption></figcaption></figure>

Functions can be added by hovering over the desired Function and selecting the <img src="/files/K48o6WkTeyxDiEEVVBq9" alt="" data-size="line"> icon to add it to the Functions panel.

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

## What is a connection?

Connections take your Squirrel projects to the next level. Power your projects with data from external sources such as Google Sheets, Excel Online, InfoBurst, or Ninox to drive your calculations. &#x20;

#### Adding a connection

Adding a connection is very similar to adding a function.

To access the Connections library, select the <img src="/files/B5i1K6TefLRSAfkI4JFU" alt="" data-size="line"> icon on the Left-Side Menu. A small side interface will expand, containing a search bar and an 'Add a Connection' button.

<figure><img src="/files/uMnLxO2v0LhApF1pY3DG" alt="" width="425"><figcaption><p>The Connections Library (v1.19), after selecting the 'Add a Connection' button</p></figcaption></figure>

Connections can then be added by hovering over the desired one and clicking the <img src="/files/K48o6WkTeyxDiEEVVBq9" alt="" data-size="line"> icon that appears. Any added connection will then appear on the list to the left side of the library.

<figure><img src="/files/zWAOQaHSrkIXyPZlxhfh" alt=""><figcaption><p>A connection added to the connections panel.</p></figcaption></figure>