durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-12 07:12:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
docs/guides/visualizing-data/filter-table-data.md Normal file
View File

@@ -0,0 +1,344 @@
---
title: Filter your Table data
hide_title: true
---
import CopyToClipboardButton from '/src/components/copytoclipboardbutton'
import ImportButton from '../../../src/components/importbutton'
# Filter your Table data
## What you will learn in this guide
This guide continues building on the [Using the Table node to display data](/docs/guides/visualizing-data/table-to-visualize-data) and the [Adding pagination to the Table](/docs/guides/visualizing-data/table-pagination) guides. In those two guides we have created a **Table** with pagination that displays data on National Parks in the US. In this guide we will use the **[Filters](/library/prefabs/filters/)** component prefab so that we can filter the data and have the **Table** display only the parks that fit the filter.
## Some additional layouting
Before we add the **Filters** prefab let's add some more **Groups** so that we get a nice layout for both the **Table** and the **Filters**.
Add a **Group** directly under the **Page** and set it's **Layout** property to be Horizontal. Let's also name it Horizontal Group so that we know what it is. Below are two screenshots showing where the Horizontal Group is placed in the node graph and it's properties.
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/filter-table-data/horizontal-group.png)
</div>
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/filter-table-data/horizontal-group-props.png)
</div>
Add another **Group** as a child to the Horizontal Group, and set it's **Width** to 300px. Let's also givie it 40px **Right Margin**, and set it's **Position** in the Layour section to be Sticky. Name it Filter Column, it should look like the screenshots below:
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/filter-table-data/filter-column.png)
</div>
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/filter-table-data/filter-column-props.png)
</div>
As a last step, move the **Group** that contains our **Table** and related nodes, so it is a sibling to the Filter Column.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/sibling.png)
</div>
## Import the Filters component
Bring up the Node Picker, select the prefabs tab, and find the **Filters** prefab. Click the Clone button to bring it into your project.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/clone-filter.png)
</div>
Let's add the **Filters** component as a child to the Filter Column **Group**.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/add-filters.png)
</div>
## Hooking up Filters to Query Records
Before we define the exact filters we want to have, let's prepare the **Query Records** node to take in the filters from the **Filters** component and hook it all up.
Select the Query Records node and change the **Filter** proeprty in the General section to be Javascript:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/javascript-filters-qr.png)
</div>
Then click the Edit button by the **Filter** property in the Filter section for the **Query Records** node and input the following code:
```javascript
where(Inputs.filters);
```
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/edit-filters-qr.png)
</div>
This gives us an input that takes filters from the **Filters** component, so let's hook it up like this:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/filters-qr-connections.png)
</div>
- Connect <span class="ndl-data">Filter</span> from the **Filters** to <span class="ndl-data">Filters</span> in the **Query Records**
- Connect <span class="ndl-signal">Filter Changed</span> from the **Filters** to <span class="ndl-signal">Do</span> in the **Query Records**
You should now see the default filters from the **Filters** component in your preview, and in the next section we will customize which filters we will use in this app.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/filters-in-preview.png)
</div>
## Customizing the filters
If you look at the **[Filters](/library/prefabs/filters/)** documentation you can see that we have the ability to use 7 different types of filters out of the box. Let's use a Text search filter so that we can search for a specific park, the Multi Choice filter so that we can select one or more specific states, and the range filter so that we can filter the parks based on their size.
The **Filters** component can take an array of filters as an input, so let's use a **Function** node to create an array with our filters. Add a **Function** node, name it Create Filters and add the following code:
```javascript
Outputs.Filter = [
{
Name: 'NameSearch',
Type: 'Text Search',
Label: 'Search',
Property: 'Name',
},
{
Name: 'StateSelector',
Label: 'Show states',
Type: 'Multi Choice',
Options: Inputs.States || [],
Labels: Inputs.States || [],
Property: 'State',
},
{
Name: 'MinMaxSize',
Label: 'Size Filter',
Type: 'Range',
Max: Inputs.maxSize || 35000,
Min: Inputs.minSize || 0,
Step: 100,
Property: 'Size_km2',
Value: 100,
},
];
```
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/create-filters-func.png)
</div>
Before we continue, let's have a look at the Multi Choice filter which is the second object in the array:
```javascript
{
Name:"StateSelector",
Label:"Show states",
Type:"Multi Choice",
Options:Inputs.States||[],
Labels:Inputs.States||[],
Property:"State"
}
```
Here we have defined an `Inputs.States`, and the idea is that we will provide this function node with a list of distinct states that are available in the Parks data. If `Inputs.States` is undefined, we just return an empty array, that is what this line does: `Inputs.States||[]` (The same pattern is used for the max and min size). So until we have a list of states, the Multi Choice filter will be empty. Let's hook up the **Function** node to the **Filters** so that we can see what we get:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/custom-filters-preview.png)
</div>
Try out the search and range filter, it should already work.
## Getting a distinct list of states and min and max size
To get a list of distinct states and the minimum and maximum size from the data we have in the Parks class we can use a **Cloud Function** and some Javascript. We will use the [Noodl.Records.distinct()](/javascript/reference/records/#noodlrecordsdistinctclassnamepropertyquery) function and the [Noodl.Records.aggregate()](/javascript/reference/records#noodlrecordsaggregateclassnameaggregatesquery) and it is only available for use in a Cloud Function so let's create one of those.
Select the Cloud Functions tab.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/cloud-tab.png)
</div>
Click the plus sign and create a new Cloud Function Component and call it Get States.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/create-cloud-func.png)
</div>
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/get-states-func.png)
</div>
Next select the **Request** node and check the **Allow Unauthenticated** property. This is so that we can call the Cloud Function without having a signed in user.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/request-node.png)
</div>
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/request-allow.png)
</div>
Now let's add a **Function** node and copy in the following code:
```javascript
try {
Outputs.states = await Noodl.Records.distinct('Parks', 'State');
const minMax = await Noodl.Records.aggregate('Parks', {
minSize: { min: 'Size_km2' },
maxSize: { max: 'Size_km2' },
});
Outputs.maxSize = minMax.maxSize;
Outputs.minSize = minMax.minSize;
Outputs.success();
} catch (e) {
Outputs.errorMessage = e;
Outputs.error();
}
```
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/distinct-states.png)
</div>
The code pulls out all distinct states from the Parks class and make them available in the `Outputs.states`. We also get the minimum and maximum size in an object that we call minMax, that we then make available as outputs in the `Outputs.maxSize` and `Outputs.minSize`, and send a success signal if it is successful. If there is an error it will give us an error message and send an error signal. Let's first handle the success case. Select the **Response** node and name it Success Response and then add parameters called states, Max Size, and Min Size.
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/filter-table-data/success-resp.png)
</div>
Then from the **Function** node make the connections like in the image below.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/success-resp-connection.png)
</div>
Bring up the Node Picker and add a second **Response** node. Call it Error Response, and change the **Status** property to Failure, then connect it like in the second image.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/error-resp.png)
</div>
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/error-resp-connection.png)
</div>
Now we just need to connect the <span class="ndl-signal">Received</span> signal from the **Request** node to the <span class="ndl-signal">Run</span> action of the **Function** node.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/cloud-func-final.png)
</div>
That's it for the Cloud Function, now let's use it in our Start Page.
## Add Cloud Function to Start Page
Go back to your Start Page component, and add a **Cloud Function** node from the Node Picker.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/add-cf-in-start.png)
</div>
Select the Cloud Function node and from the Function dropdown select the Get States function.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/cf-props.png)
</div>
We want the **Cloud Function** to execute as soon as the page becomes visible so let's connect the <span class="ndl-signal">Did Mount</span> signal from the **Page** node to the <span class="ndl-signal">Received</span> signal.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/cf-did-mount.png)
</div>
Next connect the **Cloud Function** to the **Function** node like in the image below:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/get-states-to-func.png)
</div>
Let's also empty out the default filters from the **Filters** component by selecting the **Filters** property and leaving an empty array like in the screenshot:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/empty-filters.png)
</div>
Now your final Node Graph should look like this:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/final-node-graph.png)
</div>
And your app should have selections for states and fully functioning filters:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/filter-table-data/final-filters-result.png)
</div>
## Summary
In this guide we used the **[Filters](/library/prefabs/filters/)** component prefab to help us filter the data our **Table** shows. We also used a **Cloud Function** to pull out a list of distinct states from our data in the backend.

297
docs/guides/visualizing-data/styling-table.md Normal file
View File

@@ -0,0 +1,297 @@
---
title: Styling the Table
hide_title: true
---
import CopyToClipboardButton from '/src/components/copytoclipboardbutton'
import ImportButton from '../../../src/components/importbutton'
# Styling the Table
## What you will learn in this guide
In this guide we will look at how we can style the **[Table](/library/prefabs/table/)** prefab and make the app we have created in the previous guides look a bit nicer. We will only make some minor changes to the background colors and borders of the **Table**, but we encourage you to play around with the **Table** prefab on your own and make it into something that fits your use cases.
## Changing the app background
Let's start with an easy change, the overall background color of our app. Go the the App component and select the **Page Router**.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/styling-table/select-app.png)
</div>
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/select-pr.png)
</div>
Now change the **Background Color** property to ```#F0EDE8```, and the app should look like the second image below.
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/styling-table/change-bg-pr.png)
</div>
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/new-bg.png)
</div>
## Styling the table
Go back to the Start Page and double click on the **Table** component in the node graph. It should take you into the **Table** prefab, and this is where we will make some styling changes.
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/double-click-table.png)
</div>
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/table-overview.png)
</div>
Select the top **Group** and remove it's **Border** by setting it to none and set the **Corner Radius** to 0:
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/select-table-group.png)
</div>
<div className="ndl-image-with-background m">
![](/docs/guides/visualizing-data/styling-table/table-group-props.png)
</div>
Next select the **Group** named Header Row and find the Border Style section. In the Border Style section, select the bottom border and set it's color to Grey - 300. Let's also set it's **Background Color** to White.
<div className="ndl-image-with-background m">
![](/docs/guides/visualizing-data/styling-table/select-header-row.png)
</div>
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/styling-table/header-row-props.png)
</div>
It doesn't look like much right now, but let's continue by styling the rows of the **Table**. In the Components tab, unfurl the **Table** and select the **Row** subcomponent.
<div className="ndl-image-with-background m">
![](/docs/guides/visualizing-data/styling-table/row-in-comp.png)
</div>
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/row-overview.png)
</div>
We want all rows to have the same background color so select the **Color Blend** node and set **Color 0** and **Color 1** to Grey - 100.
<div className="ndl-image-with-background m">
![](/docs/guides/visualizing-data/styling-table/color-blend-props.png)
</div>
Also make sure that the bottom border of the **Group** named Row is set to 1px and Grey - 300
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/row-border-props.png)
</div>
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/table-in-progress.png)
</div>
The table is starting to look pretty good, we want to add a border around the whole thing, but before we do that, let's style the **Image Cell** slightly.
Select the **Image Cell** in the Components view.
<div className="ndl-image-with-background m">
![](/docs/guides/visualizing-data/styling-table/image-cell.png)
</div>
Find the **Image** node and give it 8px Corner Radius.
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/image-props.png)
</div>
Now we will add a border around the whole **Table** and we will also include the **Pages And Rows** in that border. Go back to the Start Page, and wrap the **Table** and **Pages And Rows** in a **Group** called Table Border.
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/table-border-group.png)
</div>
Select the Table Border **Group** and set the **Border style** to Solid 1px and Grey - 300, give it 8px **Corner Radius** and make sure that **Clip Content** is checked:
<div className="ndl-image-with-background m">
![](/docs/guides/visualizing-data/styling-table/table-border-props.png)
</div>
The table now looks really good, except for the bottom where we have the **Pages And Rows**.
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/table-style-done.png)
</div>
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/table-bottom.png)
</div>
Let's fix it by wrapping the **Pages And Rows** in it's own **Group** and give that Group a White **Background**.
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/pages-and-rows-in-group.png)
</div>
Select the **Pages And Rows** and give it 16px margin all around.
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/styling-table/pages-and-rows-padding.png)
</div>
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/table-final.png)
</div>
That looks quite nice, so let's make the Filters section look a bit nicer too.
## Style the Filters section
The filters section currently looks like this:
<div className="ndl-image-with-background m">
![](/docs/guides/visualizing-data/styling-table/filters-initial.png)
</div>
It needs a header so let's add a **Group** as a child to the Filter Column and call it Filter Header. Then with the Filter Header **Group** selected set the **Height** to 42px and have it align it's content vertically centered. Also give it 16px **Padding** both left and right and set it's **Background Color** to White.
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/add-filter-header.png)
</div>
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/styling-table/filter-header-props.png)
</div>
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/styling-table/filter-header-props-bg.png)
</div>
Add **Text** node as a child to the Filter Header **Group** and set the **Text** property to "Filters" and change the **Text Style** to Label Medium.
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/styling-table/text-node-filter-header.png)
</div>
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/styling-table/text-node-props.png)
</div>
Wrap the **Filter** component in a **Group** and add 16px Top, Left and Right *Padding** to the Group.
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/styling-table/filters-in-group.png)
</div>
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/styling-table/group-padding-props.png)
</div>
Now select the Filter Column **Group** and update the **Top Margin** to 40px, check the **Clip Content** property, set the **Background Color** to Grey - 100, give it a Solid 1px, Grey - 300 border all around and a **Corner Radius** of 16px.
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/styling-table/select-filter-column.png)
</div>
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/styling-table/column-props-1.png)
</div>
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/styling-table/column-props-2.png)
</div>
That's if for the filters section, but as a final touch we will update the **Text Style** called Body Medium. Select the **Text** node in the Filter Header, find the **Text Style** property and click the settings icon next to Body Medium and set the **Size** to 14px.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/styling-table/text-style-conf.png)
</div>
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/styling-table/text-style-props.png)
</div>
## Summary
Now we have styled our **Table** and the filters section and below you can see what it looked like before and after the styling. Prefabs like that **Table** are a great way to quickly build out your experiences, but they are meant to be tinkered with and hopefully this guide has given you some ideas of how you can update the look and feel of prefabs.
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/table-no-style.png)
</div>
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/styling-table/table-with-style.png)
</div>

121
docs/guides/visualizing-data/table-pagination.md Normal file
View File

@@ -0,0 +1,121 @@
---
title: Adding pagination to the Table
hide_title: true
---
import CopyToClipboardButton from '/src/components/copytoclipboardbutton'
import ImportButton from '../../../src/components/importbutton'
# Adding pagination to the Table
## What you will learn in this guide
In this guide we will use the **[Pages And Rows](/library/prefabs/pagesandrows/)** component prefab to add pagination to the **[Table](/library/prefabs/table)** from the [Using the Table node to display data](/docs/guides/visualizing-data/table-to-visualize-data) guide. The **Pages And Rows** node also allows users to control how many rows the **Table** displays on each page.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/j9sUBnFfjxo" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
## Adding the Pages And Rows prefab
Bring up the Node Picker and select the Prefabs tab. Then find the **Pages And Rows** prefab and click clone.
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/table-pagination/clone-pages-rows.png)
</div>
You should now have the **Pages And Rows** component in your project, so let's add it to the node graph underneath the **Table** node in the Start Page, like in the screenshot below:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-pagination/pages-rows-in-graph.png)
</div>
Let's also give the **Pages And Rows** component a **Top Margin** of 16px:
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/table-pagination/top-margin.png)
</div>
## Setting up the Query Records node
In order to use the **Pages And Rows** component, we need to enable some properties on the **Query Records** node. Check the **Use Limit** property and also check the **Fetch Total Count** property. It should look like this:
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/table-pagination/query-records-properties.png)
</div>
The **Pages And Rows** component will give us the values for **Limit** and **Skip**, and the **Query Records** will give the total count to the **Pages And Rows**. In the next section we will make the connections.
## Connecting the Pages And Rows with the Query Records node
Let's start by making some connections from the **Pages And Rows** component to the **Query Records** node. Make the following connections:
- Connect the <span class="ndl-data">Skip</span> output from the **Pages And Rows** to the <span class="ndl-data">Skip</span> input of the **Query Records**
- Connect the <span class="ndl-data">Limit</span> output from the **Pages And Rows** to the <span class="ndl-data">Limit</span> input of the **Query Records**
- Connect the <span class="ndl-signal">Changed</span> output from the **Pages And Rows** to the <span class="ndl-signal">Do</span> input of the **Query Records**
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-pagination/connections-pr-qr.png)
</div>
Now from the **Query Records** make a connection to the **Pages And Rows**:
- Connect the <span class="ndl-data">Total Count</span> output from the **Query Records** to the <span class="ndl-data">Total Count</span> input of the **Pages And Rows**
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-pagination/connections-qr-pr.png)
</div>
It should look like this in the node graph when you are done:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-pagination/connections-done.png)
</div>
## Explicit control of when the Query Records node fetches it's data
If you reload the application now, you will be met with the following:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-pagination/empty-table.png)
</div>
The reason the table looks like this is because the **Query Records** node hasn't fetched any data. When we hooked up the <span class="ndl-signal">Changed</span> signal from the **Pages And Rows** to the <span class="ndl-signal">Do</span> action of the **Query Records**, the **Query Records** node went from implicitly fetching data, to only fetching data when it gets a signal to the <span class="ndl-signal">Do</span> action. This means that we want to make sure that the **Query Records** node fetches data as soon as something in the Node Graph has become visible, so let's connect the <span class="ndl-signal">Did Mount</span> signal from the **Group** node to the <span class="ndl-signal">Do</span> action of the **Query Records**, like this:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-pagination/group-qr.png)
</div>
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-pagination/all-connections.png)
</div>
If you reload now, it should look like this:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-pagination/table-with-pagination.png)
</div>
## Summary
Now we have a fully functioning table where the user can control the number of rows that are displayed on each **Table** page thanks to the **Pages And Rows** component.

201
docs/guides/visualizing-data/table-to-visualize-data.md Normal file
View File

@@ -0,0 +1,201 @@
---
title: Using the Table node to display data
hide_title: true
---
import CopyToClipboardButton from '/src/components/copytoclipboardbutton'
import ImportButton from '../../../src/components/importbutton'
# Using the Table node to display data
## What you will learn in this guide
In this guide we will walk you through how to use the **[Table](/library/prefabs/table)** node and get it to display data that is retrieved from a **[Query Records](/nodes/data/cloud-data/query-records)** node.
## Create new project and import the Table
Create a new project in Noodl using the Hello World template. Create a new Noodl Cloud Service by following this **[guide](/docs/guides/cloud-data/creating-a-backend)**. Once you have the backend, create a new class called Parks, and add the following columns (name, type):
- Image_src, String
- Name, String
- State, String
- Desc, String
- Size_km2, Number
- Established, Date
Then follow the **[Importing and exporting data](/docs/guides/cloud-data/import-export-csv)** guide to import the data from the following [csv-file](/docs/guides/visualizing-data/table-to-visualize-data/parks.csv).
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/6eZ1Zgo3qko" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
Select the Start Page component and remove the text node. Then on the **Page** node, add 80px padding all around.
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/table-to-visualize-data/page-padding.png)
</div>
Add a **Group** as a child to the **Page** and set the **Group's** **Dimension** property to be 100% width and the children's height. You can also enable scroll on this **Group**. This ensures that you can scroll the **Table** horizontally if it is large.
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/table-to-visualize-data/group-dimensions.png)
</div>
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/group-scroll.png)
</div>
Let's also add a **Text** node like this:
<div className="ndl-image-with-background xl">
![](/docs/guides/visualizing-data/table-to-visualize-data/add-text-node.png)
</div>
Style the **Text** node like this and have it say Parks in America:
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/table-to-visualize-data/text-style-1.png)
</div>
<div className="ndl-image-with-background s">
![](/docs/guides/visualizing-data/table-to-visualize-data/text-style-2.png)
</div>
Next, in the Start Page, bring up the Node Picker and select the Prefabs tab. Find the **Table** prefab, and click Clone.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/prefabs-tab.png)
</div>
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/clone-table.png)
</div>
Now you should see that you have a **Table** component in your Components View.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/table-in-comps.png)
</div>
Add a **Table** node to the node tree, by either dragging it in from the components view or by using the Node Picker. Put the **Table** under the **Text** node. Your node graph should look like this:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/table-in-graph.png)
</div>
## Adding data to the Table
Now that we have a **Table** let's feed it with data from Parks class. Add a **[Query Records](/nodes/data/cloud-data/query-records)** node to your node graph and tell it to look at the Parks class.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/add-query.png)
</div>
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/query-details.png)
</div>
Next connect the <span class="ndl-data">Items</span> output from the **Query Records** node to the <span class="ndl-data">Items</span> input of the **Table**.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/items-connected.png)
</div>
Reload the project. Your table should now look like the image below:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/table-with-data.png)
</div>
You might have noticed that when you reload the project, the **Table** shows some default data before the **Query Records** node has retrieved our parks data. To remove that default data, select the **Table** and click the Edit button for the Items and remove the objects in the array, so that you are left with an empty array like this:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/items-empty-array.png)
</div>
Now if you reload your project the **Table** will be empty until it gets data from the **Query Records** node.
## Customizing the Header titles and what data to show
By default the **Table** node will display all the data fields it gets from the **Query Records**, and will use the same title for the header as the column name in the class.
By editing the **Headers** property we can control which fileds that are shown, what order the fields are shown, and we can change the titles to something more friendly than the default column names.
Click the Edit button next to the **Headers** property and fill in the following. You can refer to the **[Table](/library/prefabs/table)** documentation for a deeper explanation of how the Headers work.
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/edit-headers.png)
</div>
Then add the following code to the Headers section:
```javascript
[
{
Field: 'Image_src',
Label: 'Image',
Type: 'Image',
},
{
Field: 'Name',
Label: 'Name',
},
{
Field: 'State',
Label: 'State',
},
{
Field: 'Established',
Label: 'Established',
},
{
Field: 'Size_km2',
Label: 'Size',
},
{
Field: 'Desc',
Label: 'Description',
},
];
```
Here is a screenshot of the final result:
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/headers-code.png)
</div>
<div className="ndl-image-with-background l">
![](/docs/guides/visualizing-data/table-to-visualize-data/final-result.png)
</div>
## Summary
In this guide we used a **[Table](/library/prefabs/table)** node to display data from a **[Query Records](/nodes/data/cloud-data/query-records)** node and we used the **Headers** property on the **Table** node to control what data to show and in what order.